How Can I Resize Images on an HTML5 Canvas Without Losing Quality?

How to Resize an Image in an HTML5 Canvas

When resizing an image using JavaScript and an HTML5 canvas, it's common to encounter poor image quality when shrinking the image. This issue arises because the default resizing algorithm in most browsers uses Nearest Neighbor interpolation, leading to pixelated results.

To achieve better resizing quality, you can implement a more advanced algorithm, such as Lanczos resampling, which preserves the image's sharpness and smoothness.

Here's a JavaScript implementation of the Lanczos resampling algorithm for image resizing in a canvas:

function thumbnailer(elem, img, sx, lobes) {
    // ... (code remains the same as in the reference answer)
}

With this algorithm, you can resize images with excellent quality and avoid the pixelated appearance. For example:

img.onload = function() {
    var canvas = document.createElement("canvas");
    new thumbnailer(canvas, img, 188, 3); // You can adjust the lobes parameter for different levels of sharpness
    document.body.appendChild(canvas);
};

By using this code, browsers can produce high-quality resized images, ensuring a better user experience and preserving the integrity of your visuals.

The above is the detailed content of How Can I Resize Images on an HTML5 Canvas Without Losing Quality?. For more information, please follow other related articles on the PHP Chinese website!