JavaScript裁剪(裁剪）的图像质量差

poor image quality with javascript cropping (croppie)

本文关键字：裁剪 图像质量 JavaScript      更新时间：2023-09-26

我正在尝试使用Croppie在将图像上传到服务器之前使用Javascript裁剪图像。它运行良好，用户界面很好。但是，在播放演示时，我注意到生成的图像的质量比原始图像差得多 - 我使用的是 1920x1080 图像。

有解决这个问题的方法吗？

我也会接受其他图书馆的推荐:)

如果要缩放或旋转图像，则预计会出现一些性能下降，并且是不可避免的。

但是，如果您只是从原始图像中裁剪一块......

默认情况下，CroppieJS 会以视口大小保存裁剪后的图像。

对于 1920x1080 的大型图像，视口大小（可能）小于原始图像大小，因此 Croppie 会降低导出图像的像素密度。更少的像素==更少的质量。

解决方法是使用 Croppie 的result方法将裁剪后的图像保存为原始（较大）尺寸：

yourCroppieReference.result('canvas','original','png',1)

myCroppie.result({
  type: "canvas", 
  size: "original", 
  format: "png", 
  quality: 1
});

为我工作。

附言该库非常酷，但文档需要重写。

默认情况下，裁剪使用视口大小来减少结果图像的像素。有两种方法可以解决此问题

  1. 修复结果的一些大小，即

    var imageSize = {
        width: 900,
        height: 900,
        type: 'square'
};
    并在结果裁剪

    饼结果中使用它

        $uploadCrop.croppie('result', {
        type: "canvas",
        size: imageSize,
        format: "png", 
        quality: 1
    }).then(function (resp) { )};
    2. 如果质量好，您可以使用当前图像

  2. 的大小，但如果质量非常好，那么它将使当前图像的大小更大，即

        $uploadCrop.croppie('result', {
        type: "canvas", 
        size: "original", 
        format: "png", 
        quality: 1
    }).then(function (resp) { )};
相关文章：