Question

我们已经实施了FineUploader，并且遇到了客户正在上传的一些图片的问题。对于具有重复画布纹理的大图像文件，FineUploader可以很好地调整图像大小，但是在最终图像中引入了莫尔条纹。有没有办法帮助防止这种情况发生？

这是一个例子： http://205.238.27.187/Hagan/site/Artwork-Detail.cfm?ArtistsID=1110&NewID=10709

Answer 1

这不是因为质量设置。

大多数浏览器在调整图像大小时使用线性插值而不是双三次。 Fine Uploader使用默认的浏览器图像大小调整算法。

我找到的解决方案是limby-resize。它使用像素平均/更好的调整算法，但CPU密集度更高。自述文件中有一个演示的链接。（Fine Uploader使用“Crappy”方法）

在line #168周围的megapix-image.js或精细上传器源代码中，

替换：

else {
      ctx.drawImage(img, 0, 0, width, height);
}

canvas.qqImageRendered && canvas.qqImageRendered();

使用：

else {
    var tmpCanvas = document.createElement("canvas");
    tmpCanvas.width = iw;
    tmpCanvas.height = ih;
    var tmpCtx = tmpCanvas.getContext("2d");
    tmpCtx.drawImage(img, 0, 0);
    canvasResize(tmpCanvas, canvas, function () {
        alert("Image resized by limby-resize");
        canvas.qqImageRendered && canvas.qqImageRendered();
    });
}

并在HTML中的精细上传器js文件之前包含limby-resize的canvas_resize.js。

上传图像纹理创建云纹

1 个答案: