JavaScript裁剪（Croppie）导致图像质量差

Question

我试图使用Croppie和JavaScript剪裁图片，然后上传到服务器。这个工具很好用且界面美观。但是，在试玩演示时，我发现生成的图像质量比原始图像要差得多 - 我正在使用1920x1080的图像。

是否有解决方法？

我也接受其他库的推荐 :)

- lang2

---

你可以调整画布输出的质量，但不确定crappie是否允许...每次压缩JPEG时都会有一定程度的损失，但每次100%的损失并不多... - dandavis

Answer 1

如果你对图像进行缩放或旋转，一些退化是可以预期的且无法避免。

但如果你只是从原始图像中裁剪一部分...

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

针对你的大尺寸1920x1080图像，视口的大小（可能）小于原始图像的大小，因此Croppie会减少导出图像的像素密度。更少的像素意味着更低的质量。

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

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

- markE

---

嘿，如果我必须以原始尺寸保存图像，裁剪图像的意义是什么？ - ITSagar

@ITSagar 你也可以用 {width:960, height:540} 或者任何你想要的尺寸来替换 'original'。 - Daniel Wu

Answer 2

---

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

对我来说很有帮助。

附注：这个库非常酷，但是文档需要重写。

- Henrikh Kantuni

Answer 3

默认情况下，Croppie使用视口大小来减小生成图像的像素。有两种方法可以解决这个问题：
1. 通过更改 Croppie 的 viewportResize 参数为false来关闭此功能；
2. 增加生成的图像尺寸，以便在视口内保留更多的像素。

1. fix some size for resulting i.e

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

   and use this in result croppie result

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

2. You can use size of current image if it is good quality but if it is very good quality then it will make to much larger size of current image i.e

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

- Akash