Cropper lost the quality?

Why with these settings, after cropping image, it loses quality in 2 times?
$('#input-avatar').on('change', function (e) {
 let files = e.target.files;
 let done = function (url) {
 input.value = ";
 image.src = url;
$modal.modal('show');
};
 let reader;
 let file;
 let url;

 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(file);
}
}
});

 $modal.on('shown.bs.modal', function () {
 cropper = new Cropper(image, {
 aspectRatio: 1,
 viewMode: 1,
});
 }).on('hidden.bs.modal', function () {
cropper.destroy();
 cropper = null;
});

 $('#crop').on('click', function () {
 let initialAvatarURL;
 let canvas;

$modal.modal('hide');

 if (cropper) {
 canvas = cropper.getCroppedCanvas({
 width: 315,
 height: 360,
 minWidth: 315,
 minHeight: 360,
 maxWidth: 4096,
 maxHeight: 4096,
 fillColor: '#fff',
 imageSmoothingEnabled: false,
 imageSmoothingQuality: 'high'
});
 initialAvatarURL = avatar.src;
 avatar.src = canvas.toDataURL();
 canvas.toBlob(function (blob) {
 let formData = new FormData();
 formData.append('avatar', blob);
 formData.append('action', 'avatar');
 formData.append('_token', token);
 $.ajax('/profile/me/update', {
 method: 'POST',
 data: formData,
 processData: false,
 contentType: false,
 success: function(response){
 if (response.error == 0){
toast.fire({
 icon: 'success',
 title: response.message
});
 $('#avatar').css('background-image','url(/storage/' + response.user_avatar + ')');
}else{
toast.fire({
 icon: 'error',
 title: response.message
});
}
},
 error: function(jqXHR, textStatus, errorThrown) {
toast.fire({
 type: 'error',
 title: jqXHR.responseJSON.message
});
}
});
});
}
 });
April 7th 20 at 11:56
0 answer

Find more questions by tags JavaScriptjQuery