## How Can I Achieve Pixel-Perfect Image Downscaling in HTML5 Canvas?-JS Tutorial-php.cn

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

Mary-Kate Olsen

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

Original

924 people have browsed it

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

HTML5 Canvas Image Downscaling

Despite disabling interpolation, you still face image quality loss when downscaling images in HTML5 canvas. This is because browsers typically use a simple downsampling technique that introduces noise and rounding errors.

Pixel-Perfect Downscaling Algorithm

To achieve optimal quality, consider using a pixel-perfect downscaling algorithm. This algorithm ensures that each pixel in the original image is accurately represented in the downscaled image, regardless of the scale factor.

Downscaling Implementation

Here's a JavaScript implementation of a pixel-perfect downscaling algorithm:

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

Copy after login

This algorithm produces high-quality downscaled images, but it is computationally expensive. If performance is a concern, you can consider using a less accurate but faster downsampling method such as the following:

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

Copy after login

Choosing the Right Method

The best method for downscaling images depends on your specific requirements. For high-quality results, use the pixel-perfect algorithm. However, if performance is critical, the fast downsampling method may be acceptable.

The above is the detailed content of ## How Can I Achieve Pixel-Perfect Image Downscaling in HTML5 Canvas?. For more information, please follow other related articles on the PHP Chinese website!