使用 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);

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