## HTML5 Canvas에서 픽셀 단위의 완벽한 이미지 축소를 어떻게 달성할 수 있나요?

HTML5 캔버스 이미지 축소

보간을 비활성화하더라도 HTML5 캔버스에서 이미지 크기를 축소하면 여전히 이미지 품질이 저하됩니다. 이는 브라우저가 일반적으로 노이즈와 반올림 오류를 발생시키는 간단한 다운샘플링 기술을 사용하기 때문입니다.

픽셀 완벽한 다운스케일링 알고리즘

최적의 품질을 얻으려면 픽셀- 완벽한 다운스케일링 알고리즘. 이 알고리즘은 원본 이미지의 각 픽셀이 배율에 관계없이 축소된 이미지에서 정확하게 표현되도록 보장합니다.

축소 구현

다음은 픽셀 완벽한 축소 알고리즘:

<code class="javascript">function downscaleImage(img, scale) {
    var imgCV = document.createElement('canvas');
    imgCV.width = img.width;
    imgCV.height = img.height;
    var imgCtx = imgCV.getContext('2d');
    imgCtx.drawImage(img, 0, 0);

    if (!(scale < 1) || !(scale > 0)) throw ('scale must be a positive number < 1');

    var sqScale = scale * scale;
    var sw = imgCV.width;
    var sh = imgCV.height;
    var tw = Math.floor(sw * scale);
    var th = Math.floor(sh * scale);

    var sBuffer = imgCV.getContext('2d').getImageData(0, 0, sw, sh).data;
    var tBuffer = new Float32Array(3 * tw * th);
    var sx, sy, sIndex, tx, ty, yIndex, tIndex;

    for (sy = 0; sy < sh; sy++) {
        ty = sy * scale;
        yIndex = 3 * ty * tw;

        for (sx = 0; sx < sw; sx++, sIndex += 4) {
            tx = sx * scale;
            tIndex = yIndex + tx * 3;

            var sR = sBuffer[sIndex];
            var sG = sBuffer[sIndex + 1];
            var sB = sBuffer[sIndex + 2];

            tBuffer[tIndex] += sR * sqScale;
            tBuffer[tIndex + 1] += sG * sqScale;
            tBuffer[tIndex + 2] += sB * sqScale;
        }
    }

    // Convert float array into canvas data and draw
    var resCV = document.createElement('canvas');
    resCV.width = tw;
    resCV.height = th;
    var resCtx = resCV.getContext('2d');
    var imgRes = resCtx.getImageData(0, 0, tw, th);
    var tByteBuffer = imgRes.data;

    var pxIndex;

    for (sIndex = 0, tIndex = 0; pxIndex < tw * th; sIndex += 3, tIndex += 4, pxIndex++) {
        tByteBuffer[tIndex] = Math.ceil(tBuffer[sIndex]);
        tByteBuffer[tIndex + 1] = Math.ceil(tBuffer[sIndex + 1]);
        tByteBuffer[tIndex + 2] = Math.ceil(tBuffer[sIndex + 2]);
        tByteBuffer[tIndex + 3] = 255;
    }

    resCtx.putImageData(imgRes, 0, 0);

    return resCV;
}</code>

이 알고리즘은 고품질 축소 이미지를 생성하지만 계산 비용이 많이 듭니다. 성능이 중요하다면 다음과 같이 덜 정확하지만 더 빠른 다운샘플링 방법을 사용하는 것을 고려할 수 있습니다.

<code class="javascript">function downscaleImageFast(img, scale) {
    var sw = img.width;
    var sh = img.height;
    var tw = Math.floor(sw * scale);
    var th = Math.floor(sh * scale);

    var resCV = document.createElement('canvas');
    resCV.width = tw;
    resCV.height = th;
    var resCtx = resCV.getContext('2d');
    resCtx.drawImage(img, 0, 0, sw, sh, 0, 0, tw, th);

    return resCV;
}</code>

올바른 방법 선택

가장 좋은 방법 이미지 축소는 특정 요구 사항에 따라 다릅니다. 고품질 결과를 얻으려면 픽셀 완벽 알고리즘을 사용하십시오. 그러나 성능이 중요한 경우 빠른 다운샘플링 방법이 허용될 수 있습니다.

위 내용은 ## HTML5 Canvas에서 픽셀 단위의 완벽한 이미지 축소를 어떻게 달성할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!