Question

我克服了很多解决方案和建议，但对我没有任何帮助。我正在使用dropzone进行图像上传，并使用ropper 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');
       })
   });      
 }```

Answer 1

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

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

将getSroppedCanvas的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);

这是结果

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

1 个答案: