JavaScript에서 캔버스를 사용하여 이미지 크기를 조정할 때 다듬기 문제 해결

JavaScript에서 캔버스를 사용하여 이미지 크기를 조정하면 가장자리가 눈에 띄게 들쭉날쭉하거나 흐릿해질 수 있습니다. 원활한 크기 조정을 위해서는 다운스테핑(down-stepping)이라는 기술을 사용할 수 있습니다.

대부분의 브라우저에서는 기본적으로 크기 조정에 선형 보간이 사용됩니다. 더 부드러운 결과를 생성하는 쌍삼차 보간에는 더 큰 이웃 픽셀을 사용하는 작업이 포함됩니다. 그러나 브라우저는 일반적으로 쌍삼차 보간을 직접 구현하지 않습니다.

다운스테핑 접근 방식에서는 매번 더 작은 배율을 사용하여 이미지 크기를 반복적으로 조정합니다. 이는 기본 브라우저에서 선형 보간을 계속 활용하면서 이중삼차 보간 동작을 모방합니다.

다음 코드 조각은 다운스테핑을 구현하는 방법을 보여줍니다.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();

img.onload = function () {

    // set size proportional to image
    canvas.height = canvas.width * (img.height / img.width);

    // step 1 - resize to 50%
    var oc = document.createElement('canvas'),
        octx = oc.getContext('2d');

    oc.width = img.width * 0.5;
    oc.height = img.height * 0.5;
    octx.drawImage(img, 0, 0, oc.width, oc.height);

    // step 2
    octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);

    // step 3, resize to final size
    ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);
}
img.src = "//i.imgur.com/SHo6Fub.jpg";

이 코드는 임시 캔버스인 oc를 생성하고 반복적으로 이미지 크기를 조정하여 최종 캔버스에 그립니다. 각 크기 조정 단계는 선형 보간을 사용하지만 이를 결합하면 전체 효과는 이중 3차 보간에 가까워집니다.

imageSmoothingQuality 속성은 Chrome에서 스무딩 품질을 제어하는 ​​데에도 사용할 수 있어 부드러움을 달성하는 보다 직접적인 수단을 제공합니다. , 그러나 아직 모든 브라우저에서 지원되지는 않습니다.