javascript裁剪(croppie)图像质量差

Question

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

有没有解决这个问题？

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

Answer 1

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

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

默认情况下,CroppieJS会将裁剪后的图像保存在视口大小.

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

修复方法是使用Croppie的result方法将裁剪后的图像保存为原始(较大)尺寸:

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

Answer 2

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

为我工作。

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