JavaScript Canvas로 이미지 크기를 부드럽게 조정하는 방법은 무엇입니까?

JavaScript Canvas로 이미지 크기를 부드럽게 조정

캔버스를 사용하여 이미지 크기를 조정할 때 부드러움 문제가 발생하는 것이 일반적입니다. 쌍입방 또는 쌍선형과 같은 알고리즘을 사용하는 Photoshop이나 브라우저와 같은 소프트웨어와 달리 캔버스에는 다듬기 기능이 내장되어 있지 않습니다.

부드러운 크기 조정을 위해서는 다운스테핑을 사용할 수 있습니다. 브라우저는 일반적으로 이미지 크기 조정 중에 선형 보간을 사용하는 반면, 다운스테핑은 쌍선형 보간을 사용하여 보다 세련된 결과를 생성합니다. 프로세스를 여러 단계로 나누어 대략적인 쌍입방 결과를 얻을 수 있습니다.

다음 코드 조각을 고려하세요.

<code class="js">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 = "image.jpg";</code>

첫 번째 단계에서는 이미지를 원본의 50%로 줄입니다. 크기. 두 번째 단계에서는 중간 이미지를 다시 축소하여 최종적으로 25%가 축소됩니다. 마지막으로 세 번째 단계에서는 이미지를 원하는 크기로 조정합니다.

축소 프로세스를 여러 번 반복하면 보다 부드러운 이중입방 보간 기술에 효과적으로 접근할 수 있습니다. 이 접근 방식을 통해 캔버스는 향상된 부드러움으로 이미지 크기를 조정하여 소프트웨어 프로그램 및 브라우저에서 볼 수 있는 품질에 근접할 수 있습니다.

위 내용은 JavaScript Canvas로 이미지 크기를 부드럽게 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!