my project is about to crop image then upload it to database and show it in controller. i saw a project about that but it upload the image to server
i tried for several days but i couldn't figure it out.
i use cropper js for that.
the image is shown in the view but i don't know how to pass it to my controller
window.addEventListener('DOMContentLoaded', function () {
var avatar = document.getElementById('avatar');
var image = document.getElementById('image');
var input = document.getElementById('input');
var newavatar = document.getElementById('newavatar');
var $modal = $('#modal');
input.addEventListener('change', function (e) {
var files = e.target.files;
var done = function (url) {
input.value = '';
image.src = url;
$modal.modal('show');
};
var reader;
var file;
if (files && files.length > 0) {
file = files[0];
if (URL) {
done(URL.createObjectURL(file));
} else if (FileReader) {
reader = new FileReader();
reader.onload = function (e) {
done(reader.result);
};
reader.readAsDataURL(this.files[0]);
}
}
});
//important for cropping
$modal.on('shown.bs.modal', function () {
cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 3,
});
}).on('hidden.bs.modal', function () {
cropper.destroy();
cropper = null;
});
document.getElementById('crop').addEventListener('click', function () {
var canvas;
$modal.modal('hide');
if (cropper) {
canvas = cropper.getCroppedCanvas({
width: 160,
height: 160,
});
newavatar.src = canvas.toDataURL();
canvas.toBlob(function (blob) {
var formData = new FormData();
formData.append('newavatar', blob);
$.ajax( {
method: 'POST',
data: formData,
processData: false,
contentType: false,
});
});
}
});
});
any one please help with this problem
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire