使用Hermite-resize缩小图像会在任何地方创建细黑线

Question

我必须缩小图像并在浏览器中将它们转换为jpeg。为此我一直在使用名为Hermite-resize

的javascript调整大小函数

这很有效。在重新调整了几百张图像后，我注意到每次都会发生奇怪的事情。对于某些图像，缩小的jpeg图像底部会出现一条细黑线。

我认为这可能是由于在缩小版本中呈现透明线条。转换为jpeg后，线条变为黑色，因为jpegs没有背景变成黑色背景。

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

如果有人知道是什么造就了这个，或者如何解决它，我会非常感激。

澄清我的意思：

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

似乎解决了你的例子中的问题。