Utilizing fengyuanchen's cropper library, I am cropping an uploaded image and then submitting it to a form.
<div id="change-dp" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<button class="uk-modal-close-outside" type="button" uk-close></button>
<h2 class="uk-modal-title">Change Profile Picture</h2><br>
<form action="{{url_for('upload_dp', username=username)}}" method="POST" enctype="multipart/form-data">
<input type="file" accept="image/*" placeholder="Upload profile picture" onchange="loadFile(event)" id="uploaded" required>
<img id="dp" onchange=""/>
<div id="cropped"></div>
<button type="submit">Upload</button>
</form>
</div>
</div>
Javascript
var cropper;
function loadFile(image) {
var dp = document.getElementById('dp')
dp.src = URL.createObjectURL(image.target.files[0]);
dp.onload = function() { URL.revokeObjectURL(dp.src)};
cropper = new Cropper(dp, { aspectRatio: 1 });
};
The concept here is that once the user uploads an image, it will be displayed with a cropper. Upon submission, cropped data will be generated and displayed in the cropped div using JavaScript before being submitted as a profile picture to the server. However, I am having trouble displaying the cropper functionality.
I have chosen not to use jQuery, which is commonly found in most documentation for this type of task.