I overcome lot of solutions and suggestion but nothing work for me. I am using dropzone for Image upload and cropper js to crop the image. But every time after i cropped the image, the quality of image get reduced (blured)

Actual Image

.jpg

Crop Image
.png

   //This is my cropper js code, As per the documentation I have set max height, max width, imageSmoothingQuality etc. But still image qualty get reduced after crop.
   var $cropperModal = $("<div>Company Logo</div>");
   $cropperModal.modal('show').on("shown.bs.modal", function() {
     var $image = $('#img-' + c);
     var cropper = $image.cropper({
       aspectRatio: 1//,
     }).on('hidden.bs.modal', function() {
       $image.cropper('destroy');
     });

     //After I uploaded the image, Below code allow me to crop the image

     $cropperModal.on('click', '.crop-upload', function() {
       $image.cropper('getCroppedCanvas', {
         width: 160,
         height: 90,
         minWidth: 256,
         minHeight: 256,
         maxWidth: 4096,
         maxHeight: 4096,
         fillColor: '#fff',
         imageSmoothingEnabled: false,
         imageSmoothingQuality: 'high'
       })
       .toBlob(function(blob) {
         // Create a new Dropzone file thumbnail
         myDropZone.createThumbnail(
           blob,
           myDropZone.options.thumbnailWidth,
           myDropZone.options.thumbnailHeight,
           myDropZone.options.thumbnailMethod,
           false, 
           function(dataURL) {              
             // Update the Dropzone file thumbnail
             myDropZone.emit('thumbnail', file, dataURL);
             // Return the file to Dropzone
             done(blob);
         });
         $cropperModal.modal('hide');
         });
       })        
       .on('click', '.rotate-right', function() {
         $image.cropper('rotate', 90);
       })
       .on('click', '.rotate-left', function() {
         $image.cropper('rotate', -90);
       })
       .on('click', '.reset', function() {
         $image.cropper('reset');
       })
   });      
 }```

I overcome lot of solutions and suggestion but nothing work for me. I am using dropzone for Image upload and cropper js to crop the image. But every time after i cropped the image, the quality of image get reduced (blured)

Actual Image

https://i.sstatic.net/UsVqz.jpg

Crop Image
https://i.sstatic.net/snAuB.png

   //This is my cropper js code, As per the documentation I have set max height, max width, imageSmoothingQuality etc. But still image qualty get reduced after crop.
   var $cropperModal = $("<div>Company Logo</div>");
   $cropperModal.modal('show').on("shown.bs.modal", function() {
     var $image = $('#img-' + c);
     var cropper = $image.cropper({
       aspectRatio: 1//,
     }).on('hidden.bs.modal', function() {
       $image.cropper('destroy');
     });

     //After I uploaded the image, Below code allow me to crop the image

     $cropperModal.on('click', '.crop-upload', function() {
       $image.cropper('getCroppedCanvas', {
         width: 160,
         height: 90,
         minWidth: 256,
         minHeight: 256,
         maxWidth: 4096,
         maxHeight: 4096,
         fillColor: '#fff',
         imageSmoothingEnabled: false,
         imageSmoothingQuality: 'high'
       })
       .toBlob(function(blob) {
         // Create a new Dropzone file thumbnail
         myDropZone.createThumbnail(
           blob,
           myDropZone.options.thumbnailWidth,
           myDropZone.options.thumbnailHeight,
           myDropZone.options.thumbnailMethod,
           false, 
           function(dataURL) {              
             // Update the Dropzone file thumbnail
             myDropZone.emit('thumbnail', file, dataURL);
             // Return the file to Dropzone
             done(blob);
         });
         $cropperModal.modal('hide');
         });
       })        
       .on('click', '.rotate-right', function() {
         $image.cropper('rotate', 90);
       })
       .on('click', '.rotate-left', function() {
         $image.cropper('rotate', -90);
       })
       .on('click', '.reset', function() {
         $image.cropper('reset');
       })
   });      
 }```

• javascript
• jquery
• ruby-on-rails
• cropperjs

• if you find it helpful then accept it as answer. – Tauha Commented Nov 18, 2021 at 15:33

2 Answers 2

I'm using cropper js i came across same issue, following was the solution for me. (I'm sharing here so that it can help others)

• Set parameter qualityArgument to value 1 of toBlob method

• Set imageSmoothingEnabled to true of getCroppedCanvas and did not set height, width

   cropper.getCroppedCanvas({
       minWidth: 256,
       minHeight: 256,
       maxWidth: 4096,
       maxHeight: 4096,
       fillColor: '#fff',
       imageSmoothingEnabled: true,
       imageSmoothingQuality: 'high',
   });
  
   cropper.getCroppedCanvas().toBlob(function (blob) {
       var formData = new FormData();
       formData.append('upload', blob, 'imagetest.jpeg');
  
       $.ajax('/ListingManager/Images/index', {
           method: 'POST',
           data: formData,
           processData: false,
           contentType: false,
           success: function () {
               console.log('success');
           },
           error: function () {
               console.log('error');
           }
       });
  
  
  
   }, 'image/jpeg', 1);
  

And here is the result

The point is quality of HTMLCanvasElement.toDataURL()

type [Optional]

A DOMString indicating the image format. The default format type is image/png.

encoderOptions [Optional]

A Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp. If this argument is anything else, the default value for image quality is used. The default value is 0.92. Other arguments are ignored.

cropper.getCroppedCanvas({
    imageSmoothingEnabled: true,
    imageSmoothingQuality: 'high',
}).toDataURL('image/jpeg', 1);

And here is the result