cropper.js 导致图像质量不佳

问题描述

我使用的是 fengyuanchen 的cropper.js (1.5.9)。我有来自 5472px x 3648px (350 dpi) 的高分辨率图像。我会将这些图像裁剪为 577px x 377px 的分辨率。当我裁剪图像时，目标质量很差。

原文：

裁剪：

我们现在在裁剪后的图像上看到奇怪的圆圈，图像质量不佳。我使用以下代码：

        $('#crop').click(function(){
          canvas = cropper.getCroppedCanvas({
          width: 577,height: 377,minWidth: 256,minHeight: 256,maxWidth: 5472,maxHeight: 3648,fillColor: '#fff',imageSmoothingEnabled: true,imageSmoothingQuality: 'high',});

        canvas.toBlob(function(blob){
            url = URL.createObjectURL(blob);
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function(){
                var base64data = reader.result;
                $.ajax({
                    url:'pages/mediaupload.PHP',method:'POST',data:{
                     image:base64data,

我已经阅读了很多关于cropper.js 和尝试不同设置的文章，但质量仍然很差。有谁知道我做错了什么？

解决方法

作者在 Github repo 的 notes 下解决了这个问题。

简短：浏览器原生压缩是有损的。根据您的方法，您可以通过上传端点实现 PHP 调整器（例如 imagine），并将原始图像与裁剪数据一起传递。

哇。这是下采样图像的病理情况。除非你反对，否则我会将它放入我的难以处理的图像测试套件中。

您在较小的图像上看到的令人讨厌的伪影是由建筑物上的网格状砖砌与下采样网格相互作用而生成的 Moiré pattern。好消息是大多数图片不会有这个问题。

您的示例没有显示您传递给 the canvas.toBlob() method 的第二个和第三个参数。如果您还没有这样做，请尝试将它们指定为 'image/jpeg' 和 0.6 到 0.9 之间的某个数字。

并且，尝试告诉cropper使用原始图像的大小，而不是在裁剪时将其缩小。

进行这种缩小的高质量方法是使用双三次插值。或者，您可以在缩小图像之前对图像应用高斯模糊如果您将宽度从 2000 缩小到 500，请使用半径为 2.0 像素的模糊，这应该从网格状砖砌中去除足够的细节，莫尔条纹不会那么容易查看。您或许可以找到一个浏览器驻留的高斯模糊模块，例如 glur。

同样，这个特殊的图像非常容易受到这个问题的影响。

browser cropper cropperjs image-processing