Hello, I am trying to implement cropper.js plugin to my website and send cordinates via ajax to Laravel backend. However, when I am trying to launch ajax request i get Uncaught RangeError: Maximum call stack size exceeded error. Maybe someone could take a look at my code and help me solve this ?
TextDropzone.options.myDropzone = {
// Prevents Dropzone from uploading dropped files immediately
autoProcessQueue: true,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 10,
acceptedFiles: "image/*",
clickable: '#dropzonePreview',
addRemoveLinks: true,
previewsContainer: '#dropzonePreview',
init: function() {
//var submitButton = document.querySelector("#submit-all")
myDropzone = this; // closure
// submitButton.addEventListener("click", function() {
// if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
// } else {
// $("#my-dropzone").submit(); //send empty
// }
//myDropzone.processQueue(); // Tell Dropzone to process all queued files.
// });
// You might want to show the submit button only when
// files are dropped here:
this.on("successmultiple", function(response, file) {
console.log(response);
console.log(file);
//$('.image').prepend('<img id="" src=" '+file.path+' '+' '+file.name+' " />');
$('<img />')
.attr('src', "" + file.path + file.name + "") // ADD IMAGE PROPERTIES.
.attr('title', 'Some title')
.attr('id', 'image')
.appendTo($('.image'));
getCropper();
});
}
};
function getCropper(){
$(function () {
var $image = $('#image');
var minAspectRatio = 0.5;
var maxAspectRatio = 1.5;
$image.cropper({
built: function () {
var containerData = $image.cropper('getContainerData');
var cropBoxData = $image.cropper('getCropBoxData');
var aspectRatio = cropBoxData.width / cropBoxData.height;
var newCropBoxWidth;
if (aspectRatio < minAspectRatio || aspectRatio > maxAspectRatio) {
newCropBoxWidth = cropBoxData.height * ((minAspectRatio + maxAspectRatio) / 2);
$image.cropper('setCropBoxData', {
left: (containerData.width - newCropBoxWidth) / 2,
width: newCropBoxWidth
});
}
},
cropmove: function () {
var cropBoxData = $image.cropper('getCropBoxData');
var aspectRatio = cropBoxData.width / cropBoxData.height;
if (aspectRatio < minAspectRatio) {
$image.cropper('setCropBoxData', {
width: cropBoxData.height * minAspectRatio
});
} else if (aspectRatio > maxAspectRatio) {
$image.cropper('setCropBoxData', {
width: cropBoxData.height * maxAspectRatio
});
}
}
});
$(".button2").click(function() {
var cropped = $image.cropper('getCroppedData');
var data = $image.cropper('getCanvasData');
console.log(cropped);
console.log(data);
var $_token = $('#token').val();
$.ajax({
type: "POST",
url: '/images/cropped',
//headers: { 'X-XSRF-TOKEN' : $_token },
data: {'_token':$_token, 'cropped':cropped },
success: function (result) {
console.log(result);
}
});
});
});
}
This error is almost always means you have a problem with recursion in JavaScript code, as there isn't any other way in JavaScript to consume lots of stack. Sometimes calling a recursive function over and over again, causes the browser to send you Maximum call stack size exceeded error message as the memory that can be allocated for your use is not unlimited. It's possible to cause infinite recursion in a fully promisified code, too. That can happen if the promises in a chain don't actually perform any asynchronous execution , in which case control never really returns to the event loop, even though the code otherwise appears to be asynchronous. That's when it's useful to wrap your recursive function call into a -
setTimeout, setImmediate or process.nextTick
Also, you can localize the issue by setting a breakpoint on RangeError type of exception , and then adjust the code appropriately. Moreover, you can managed to find the point that was causing the error by check the error details in the Chrome dev toolbar console , this will give you the functions in the call stack, and guide you towards the recursion that's causing the error.
Frederik
student
"Long Path Tool" is helpful