使用 Cropper js 裁剪后图像质量降低

Posted 2023-05-09

【中文标题】使用 Cropper js 裁剪后图像质量降低

【英文标题】：Using Cropper js Image quality get reduced after cropping

【发布时间】：2019-10-27 15:00:37

【问题描述】：

我克服了很多解决方案和建议，但对我没有任何帮助。我正在使用 dropzone 进行图像上传和cropper js 来裁剪图像。但是每次我裁剪图像后，图像的质量都会降低（模糊）

实际图像

https://i.stack.imgur.com/UsVqz.jpg

裁剪图像https://i.stack.imgur.com/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');
       )
   );      
 ```

【问题讨论】：

如果您觉得它有帮助，请接受它作为答案。

【参考方案1】：

我正在使用cropper js，我遇到了同样的问题，以下是我的解决方案。 （我在这里分享是为了帮助其他人）

将参数 qualityArgument 设置为 toBlob 方法的值 1

将 getCroppedCanvas 的 imageSmoothingEnabled 设置为 true 并且没有设置 高、宽

 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);

这是结果

【讨论】：

对我不起作用，预览质量仍然很差

【参考方案2】：

重点是htmlCanvasElement.toDataURL()的质量

键入 [可选]

表示图像格式的 DOMString。默认格式类型为 image/png。

encoderOptions [可选]

一个介于 0 和 1 之间的数字，指示用于使用有损压缩的图像格式（例如 image/jpeg 和 image/webp）的图像质量。如果此参数是其他参数，则使用图像质量的默认值。 默认值为 0.92。其他参数被忽略。

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

这是结果