## Wie kann ich eine pixelgenaue Bildverkleinerung in HTML5 Canvas erreichen?-js-Tutorial-php.cn

## Wie kann ich eine pixelgenaue Bildverkleinerung in HTML5 Canvas erreichen?

Mary-Kate Olsen

Freigeben： 2024-10-26 15:57:30

Original

923 Leute haben es durchsucht

## How Can I Achieve Pixel-Perfect Image Downscaling in HTML5 Canvas?

Herunterskalieren von HTML5-Canvas-Bildern

Obwohl die Interpolation deaktiviert ist, kommt es beim Herunterskalieren von Bildern in HTML5-Canvas immer noch zu Bildqualitätsverlusten. Dies liegt daran, dass Browser in der Regel eine einfache Downsampling-Technik verwenden, die Rauschen und Rundungsfehler verursacht.

Pixel-Perfect Downscaling-Algorithmus

Um eine optimale Qualität zu erzielen, sollten Sie die Verwendung eines Pixel-Perfect-Downscaling-Algorithmus in Betracht ziehen. Perfekter Downscaling-Algorithmus. Dieser Algorithmus stellt sicher, dass jedes Pixel im Originalbild im verkleinerten Bild genau dargestellt wird, unabhängig vom Skalierungsfaktor.

Herunterskalierungsimplementierung

Hier ist eine JavaScript-Implementierung von a Pixelgenauer Herunterskalierungsalgorithmus:

<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>

Nach dem Login kopieren

Dieser Algorithmus erzeugt herunterskalierte Bilder in hoher Qualität, ist jedoch rechenintensiv. Wenn die Leistung ein Problem darstellt, können Sie die Verwendung einer weniger genauen, aber schnelleren Downsampling-Methode wie der folgenden in Betracht ziehen:

<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>

Nach dem Login kopieren

Auswahl der richtigen Methode

Die beste Methode Wie Sie Bilder verkleinern, hängt von Ihren spezifischen Anforderungen ab. Für qualitativ hochwertige Ergebnisse verwenden Sie den pixelgenauen Algorithmus. Wenn die Leistung jedoch entscheidend ist, kann die schnelle Downsampling-Methode akzeptabel sein.

Das obige ist der detaillierte Inhalt von## Wie kann ich eine pixelgenaue Bildverkleinerung in HTML5 Canvas erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!