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

我克服了很多解决方案和建议，但没有一个对我有用。我使用dropzone上传图像，并使用cropper js裁剪图像。但每次我剪切图像后，图像质量都会降低（模糊）

实际图像

裁剪图像

//这是我的cropper js代码，根据文档，我设置了最大高度、最大宽度、imageSmoothingQuality等，但裁剪后静态图像质量会降低。
变量$CROPERMODAL=$（“公司标志”）；
$croperModal.modal（'show'）。on（'show.bs.modal'，function（）{
变量$image=$（'#img-'+c）；
var crapper=$image.crapper({
aspectRatio:1/，
}).on（'hidden.bs.modal'，function（）{
$image.crapper（'destroy'）；
});
//上传图片后，下面的代码允许我裁剪图片
$CROPERMODAL.on（'click'，'CROPER upload'，函数（）{
$image.cropper（'getCroppedCanvas'{
宽度：160，
身高：90，
最小宽度：256，
身高：256，
最大宽度：4096，
最大高度：4096，
fillColor:“#fff”，
ImageSmoothInEnabled:错误，
图像平滑质量：“高”
})
.toBlob（函数（blob）{
//创建新的Dropzone文件缩略图
myDropZone.createThumbnail(
水滴，
myDropZone.options.thumbnailWidth，
myDropZone.options.thumbnailHeight，
myDropZone.options.thumbnailMethod，
假,，
函数（dataURL）{
//更新Dropzone文件缩略图
emit（'缩略图'、文件、数据URL）；
//将文件返回到Dropzone
完成（blob）；
});
$CROPERMODAL.modal（'hide'）；
});
})        
.on（'单击'，'向右旋转'，函数（）{
$image.crapper（'rotate'，90）；
})
.on（'单击'，'向左旋转'，函数（）{
$image.crapper（'rotate'，-90）；
})
.on（'单击'，'重置'，函数（））{
$image.crapper（'reset'）；
})
});      
}```

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

• 将参数qualityArgument设置为toBlob方法的值1
• 将getCroppedCanvas的ImageSmoothInEnabled设置为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.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);