## HTML5 キャンバスでピクセル完璧な画像のダウンスケーリングを実現するにはどうすればよいですか?

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 キャンバスでピクセル完璧な画像のダウンスケーリングを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。