javascript - 使用 Hermite-resize 缩小图像会莫名其妙地产生细黑线

Question

我必须缩小图像并在浏览器中将它们转换为 jpeg。为此，我一直在使用一个名为 Hermite-resize 的 javascript 调整大小函数。

这很好用。在调整了几百张图片的大小后，我发现每隔一段时间就会发生一些奇怪的事情。对于某些图像，细黑线出现在按比例缩小的 jpeg 图像的底部。

我认为这可能是由于在按比例缩小的版本中渲染了一条透明线。转换为 jpeg 后，线条变为黑色，因为 jpeg 将没有背景变成黑色背景。

但是，如果我在将图像渲染为 jpeg 之前在图像后面放置一个白色背景，那么问题仍然存在。

如果有人知道是什么造成了这个问题，或者如何解决它，我将不胜感激。

一个 jsfiddle 来阐明我的意思:

canvas.getContext("2d").fillStyle = '#FFF';
canvas.getContext("2d").fillRect(0, 0, W2, H2);
canvas.getContext("2d").putImageData(img2, 0, 0);
document.getElementById("imageid").src = canvas.toDataURL("image/jpeg");

http://jsfiddle.net/gt4r54zr/1/

我不确定它是否相关，但如果我在 Hermite 脚本中将透明度设置为完全 (255)，那么同样的黑线也会出现:

data2[x2 + 3] = 255;// Original value: gx_a / weights_alpha;

http://jsfiddle.net/3osq1s1w/3/

Answer 1

resample_hermite() 函数计算这些比率:

var ratio_w_half = Math.ceil(ratio_w/2);
var ratio_h_half = Math.ceil(ratio_h/2);

最终用于确定重新调整大小的图像的尺寸。请注意 Math.ceil，它将 (ratio_h/2) 舍入到下一个最大整数。在 (ratio_h/2) 的尾数(即小数点右边的所有内容)小于 0.5 的情况下，似乎正在呈现黑线。在这些情况下，计算出的图像高度大了一个像素，并且没有数据可以填充这些像素。

改变

var ratio_h_half = Math.ceil(ratio_h/2);

到

var ratio_h_half = Math.round(ratio_h/2);

似乎解决了您示例中的问题。