cropper canvas not working with larger files
P-PATHAK opened this issue · comments
the function is not working for the larger image can you help how to fix it?
function image_crop() {
if(cropperImageInitCanvas.cropper){
var cropcanvas = cropperImageInitCanvas.cropper.getCroppedCanvas({width: 1000, height: 1000});
img = cropperImageInitCanvas.cropper.url;
// document.getElementById('cropImages').appendChild(cropcanvas);
var ctx=cropcanvas.getContext('2d');
var imgData=ctx.getImageData(0, 0, cropcanvas.width, cropcanvas.height);
// var image = document.getElementById(c);
c.width = cropcanvas.width;
c.height = cropcanvas.height;
var ctx = c.getContext('2d');
ctx.putImageData(imgData,0,0);
cropper.getCroppedCanvas().toBlob(function (blob) {
console.log(blob);
var formData = new FormData();
formData.append('szProfilePic', blob);
formData.append('isProfile', true);
setTimeout(function(){
$.ajax("<?php echo url('/'); ?>/mymethod", {
method: "POST",
allowedTypes: "jpg,png,gif,jpe,jpeg,JPEG,JPG,PNG",
data: formData,
cache:false,
multiple: false,
processData: false,
contentType: false,
success: function (data) {
data = JSON.parse(data);
if(data)
{
alert('sucess');
}
},
error: function () {
$('#cemetery-full-page-loader').hide();
// console.log('Upload error');
$('#fileuploader2').val('');
$('#cropped_result').attr('src', '');
}
});
}, 1000);
// Use `jQuery.ajax` method
});
cropperImageInitCanvas.cropper.destroy();
cropperImageInitCanvas.width = 0;
cropperImageInitCanvas.height = 0;
cropImageButton.style.display = 'none';
var allCloseButtons = document.querySelectorAll('.singleImageCanvasCloseBtn');
for (let element of allCloseButtons) {
element.style.display = 'block';
}
urlConversion();
// cropperImageInitCanvas.style.display = 'none';
} else {
alert('Please select any Image you want to crop');
}
For large images, maybe you have to compress it before using the Cropper.