Cropper.min.js:cropper.js导致图像质量差

关于Cropper.min.js的问题,在images cropper中经常遇到, 我使用 fengyuanchen 的 cropper.js (1.5.9)。我有来自 5472px x 3648px (350 dpi) 的高分辨率图像。我将这些图像裁剪为 577px x 377px 的分辨率。当我裁剪图像时,目标质量很差。

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

Original: enter image description here

Cropped: enter image description here

我们现在在裁剪的图像上看到奇怪的圆圈,图像质量很差。我使用以下代码:

        $('#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 en 尝试不同的设置,但质量仍然保持不好。

0

哇。这是一个用于下采样的图像的病态案例。除非你反对,否则我将它放入我的难以处理的图像的测试套件中。

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

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

而且,尝试告诉裁剪器使用原始图像的大小,而不是在裁剪时使其变小。

缩小尺寸的高质量方法是使用双三次插值。或者,您可以在缩小图像尺寸之前对图像应用高斯模糊。如果将宽度从 2000 缩小到 500,则使用半径为 2.0 像素的模糊,这将从网格状的砖砌结构中删除足够的细节,以至于莫尔条纹不会那么容易看到。您可能可以找到浏览器驻留的高斯模糊模块,例如glur

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

0

作者在Github repo中的notes中对此进行了说明。

简而言之:浏览器原生压缩是有损的。考虑到您的方法,您可以通过 upload-endpoint 实现 PHP-resizer(例如imagine),并将原始图像与裁剪数据一起传递。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(536)
Python适合几岁:适合浏览网站的 Python模块
上一篇
学习c语言哪本书好:哪本书学习套接字编程和TCP网络通信
下一篇

相关推荐

  • cvt和自动挡哪个好提升驾驶体验的最佳选择

    CVT(可变转换器)是一种由传动带及传动轮组成的无级变速器,它可以在没有传动档位的情况下,根据驾驶者的驾驶习惯,自动调整传动轮之间的转速比,从而实现无级变速。自动挡是指车辆自动变速箱,它使用液力传动来实现变速,可以自动适应车辆的行驶状态,减少司机的疲劳,提高行车的舒适性。…

    2023-06-08 07:42:19
    0 64 16
  • cv一叶扁舟和清影轩阳:漫游在一叶扁舟和清影轩阳之间

    cv一叶扁舟是一款开源的计算机视觉库,用于图像处理、计算机视觉等。它提供了丰富的API,可以帮助开发者快速实现各种图像处理任务,如图像分割、目标检测、图像识别等。清影轩阳是一款开源的计算机视觉框架,用于图像处理、目标检测、分类等。它提供了丰富的API,可以帮助开发者快速实现各种图像处理任务,如图像分割、目标检测、图像识别等。…

    2023-08-05 07:06:20
    0 95 40
  • css设置滚动条宽度设置:This is a title

    CSS设置滚动条宽度的方法:使用CSS3的。-webkit-属性:…

    2023-06-06 10:53:01
    0 56 23
  • xl和xe汽车cvt:探索XL和XE汽车的CVT技术优势

    XL和XE汽车CVT是一种变速器,它使用液力变矩器代替传统的机械变速器,以达到更高的效率。它的工作原理是,当发动机输出功率时,液力变矩器就会将这些功率转换为液压能量,然后将能量传递到变速器的输出轴上,从而实现变速。…

    2023-04-09 00:41:04
    0 38 40
  • cordon bleu是什么意思:法式炸鸡卷——Cordon Bleu的经典之作

    Cordon Bleu是一种烹饪技术,其中肉片被置于奶酪和火腿之间,然后用面包屑裹上,最后煎炸或烤熟。这种技术通常用于制作鸡肉,但也可以用于制作其他类型的肉类,如牛肉或猪肉。…

    2024-01-27 15:13:30
    0 40 32
  • countif 非空:非空单元格的计数

    Countif 非空是指计算某个单元格不为空的数量。代码如下:…

    2023-04-22 15:54:15
    0 58 51
  • java double保留一位小数:How to Round a Double to One Decimal Place in

    示例示例使用类可以轻松实现java double保留一位小数的功能,具体代码如下:// 创建对象…

    2023-05-14 07:40:03
    0 55 85
  • linux如何写c语言一个完整的指南

    示例示例在Linux系统中,可以使用C语言编写源代码文件,然后使用GCC编译器来编译源代码文件,生成可执行文件。下面是一个简单的C语言代码示例:…

    2023-05-16 02:02:45
    0 77 53

发表评论

登录 后才能评论

评论列表(25条)