Уменьшение изображения с помощью Hermite-resize создает тонкую черную линию из ниоткуда

Question

Я должен масштабировать изображения и превращать их в jpegs в браузере. Для этого я использовал функцию изменения размера javascript под названием Hermite-resize

Это прекрасно работает. После повторной калибровки нескольких сотен изображений я заметил, что что-то странное случается каждый раз. С некоторыми изображениями в нижней части уменьшенного JPEG-изображения появляется тонкая черная линия.

Я думал, что это может быть из-за прозрачной линии визуализируется в уменьшенной версии. После преобразования в jpeg линия становится черной, так как jpegs не превращают фон в черный фон.

Однако, если я поставил белый фон за изображение перед его отображением как 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/

Я не уверен, если это связано, но если я установить прозрачность до полного (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); 

, кажется, решить эту проблему в вашем примере.