Question

我正在尝试使用Croppie在将图像上传到服务器之前使用Javascript裁剪图像。它工作得很好，UI很好。但是，在玩这个演示时，我注意到生成的图像的质量比原始图像质量差得多 - 我使用的是1920x1080图像。

这是否有解决方法？

我也接受其他图书馆的推荐：）

Answer 1

如果您正在缩放或旋转图像，预计会出现一些降级，这是不可避免的。

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

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

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

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

{{1}}

Answer 2

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

为我工作。

P.S。该库很酷，但documentation需要重写。

Answer 3

默认情况下，Croppie使用的视口大小会减小生成图像的像素。有两种方法可以解决此问题

为结果固定一些大小，即

var imageSize = {
        width: 900,
        height: 900,
        type: 'square'
};

并将其用于结果裁剪结果

    $uploadCrop.croppie('result', {
        type: "canvas",
        size: imageSize,
        format: "png", 
        quality: 1
    }).then(function (resp) { )};

如果当前图像的质量很好，则可以使用它的大小，但是如果图像质量很好，则可以使用更大的当前图像大小，即

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

javascript裁剪（croppie）图像质量差

3 个答案: