'Site getting stuck on Safari while cropping image with cropper js

I'm stuck on an issue with Safari. I'm using cropper js with jQuery to crop and upload images. My site works perfectly on other browsers except for Safari.

When I upload an image and hit the crop button my site most of the time gets stuck and becomes unresponsive. There are no errors or warnings in the console.

One thing I have noticed is issue occurs mostly with large-sized images. Upon click, I do some adjustments to the uploaded image and then run the following cropper js function.

  cropper.getCroppedCanvas().toBlob((blob)=>{
  let fileInputElement = $('#uploaded_image')[0];
  let file = new File([blob], imageToProcess.name,{type:imageToProcess.type, lastModified:new Date().getTime()});
  let container = new DataTransfer();
  container.items.add(file);
  fileInputElement.files = container.files;
  });


Solution 1:[1]

I have a similar problem, but with photos that are not from the origin of the device regardless of the size, I share my code in case it helps you in any way.

canvas = cropper.getCroppedCanvas({
                    width: canvasWidth,
                    height: canvasHeight,
});
canvas.toBlob(function (blob) {
     var formData = new FormData();
     formData.append("imageFromCanvasCrop", blob);

}, 'image/jpeg',1);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ysidro almonte morales