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

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

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

Scaling down image with Hermite-resize creates thin black line out of nowhere

javascript

image

image-resizing