HTML 캔버스를 사용하여 부드럽게 크기가 조정된 이미지를 얻는 방법은 무엇입니까?

캔버스로 이미지 다듬기

HTML 캔버스로 이미지 크기를 조정하는 것은 일반적인 작업이지만 매끄럽게 만드는 것은 어려울 수 있습니다. Photoshop과 같은 이미지 편집 소프트웨어는 쌍입방 및 쌍선형과 같은 다양한 보간 알고리즘을 제공하지만 캔버스가 이러한 옵션을 지원하는지 여부는 확실하지 않습니다.

<code class="js">var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 234;
ctx.drawImage(img, 0, 0, 300, 234);
document.body.appendChild(canvas);</code>

위 코드 조각은 캔버스를 사용하여 이미지 크기를 조정하지만 크기 조정된 이미지의 부드러움이 부족합니다.

이 문제를 해결하기 위해 다운스테핑(down-stepping) 개념을 사용할 수 있습니다. 브라우저는 일반적으로 크기 조정을 위해 선형 보간법을 사용하므로 앨리어싱이 발생할 수 있습니다. 축소 프로세스를 여러 단계로 나누면 바이큐빅 보간에 가까운 결과를 얻을 수 있습니다.

다음 수정 코드를 고려하세요.

<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 = "//i.imgur.com/SHo6Fub.jpg";</code>

이 코드는 여러 크기 조정 단계를 수행합니다. 연속해서 이미지 크기를 점진적으로 줄이고 보간법을 적용합니다. 그 결과 가장자리가 더 부드러워지고 시각적 품질이 향상된 이미지가 탄생했습니다.

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