## Comment puis-je obtenir une réduction d'image au pixel près dans un canevas HTML5 ?-js tutoriel-php.cn

## Comment puis-je obtenir une réduction d'image au pixel près dans un canevas HTML5 ?

Mary-Kate Olsen

Libérer： 2024-10-26 15:57:30

original

931 Les gens l'ont consulté

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

Réduction d'image du canevas HTML5

Malgré la désactivation de l'interpolation, vous êtes toujours confronté à une perte de qualité d'image lors de la réduction d'images dans le canevas HTML5. En effet, les navigateurs utilisent généralement une technique de sous-échantillonnage simple qui introduit du bruit et des erreurs d'arrondi.

Algorithme de réduction d'échelle pixel-perfect

Pour obtenir une qualité optimale, envisagez d'utiliser un pixel-perfect. algorithme de réduction d'échelle parfait. Cet algorithme garantit que chaque pixel de l'image originale est représenté avec précision dans l'image réduite, quel que soit le facteur d'échelle.

Implémentation de la réduction

Voici une implémentation JavaScript d'un Algorithme de réduction d'échelle au pixel près :

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

Copier après la connexion

Cet algorithme produit des images réduites de haute qualité, mais il est coûteux en termes de calcul. Si les performances sont un problème, vous pouvez envisager d'utiliser une méthode de sous-échantillonnage moins précise mais plus rapide, telle que la suivante :

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

Copier après la connexion

Choisir la bonne méthode

La meilleure méthode La réduction d'échelle des images dépend de vos besoins spécifiques. Pour des résultats de haute qualité, utilisez l’algorithme pixel-perfect. Cependant, si les performances sont critiques, la méthode de sous-échantillonnage rapide peut être acceptable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!