How to Achieve High-Quality Image Downscaling in the Browser Using HTML5 Canvas?

Downsize (downsample) images in the browser for high quality

Reduxrespot:

In the browser When shrinking the image using the html5 canvas element, I found that the image quality is very low. After some research, I found that disabling interpolation in improves the quality, but still doesn't give the best results.

Best Practices

Single-step downsampling

Recommended for situations where you need to downsize a large image to a small image Use single-step downsampling. Here are the steps:

1. Use the drawImage() method to draw the original image onto a reduced size canvas.
2. Use getImageData() to get the data of the reduced image.
3. Use putImageData() to draw the reduced data onto a new canvas.

Achieved with the following code example:

const originalImage = new Image();
originalImage.onload = () => {
  const originalCanvas = document.createElement('canvas');
  originalCanvas.width = desiredWidth;
  originalCanvas.height = desiredHeight;
  const originalCtx = originalCanvas.getContext('2d');
  originalCtx.drawImage(originalImage, 0, 0, desiredWidth, desiredHeight);

  const scaledData = originalCtx.getImageData(0, 0, desiredWidth, desiredHeight);
  const scaledCanvas = document.createElement('canvas');
  scaledCanvas.width = desiredWidth;
  scaledCanvas.height = desiredHeight;
  const scaledCtx = scaledCanvas.getContext('2d');
  scaledCtx.putImageData(scaledData, 0, 0);
};

Multi-step downsampling

If single-step downsampling is not enough quality, you can use multi-step downsampling. This is achieved by repeatedly performing single-step downsampling using smaller ratios.

The following is a code example for two-step downsampling:

const originalImage = new Image();
originalImage.onload = () => {
  // 第一步：缩小 50%
  const firstCanvas = document.createElement('canvas');
  firstCanvas.width = originalImage.width / 2;
  firstCanvas.height = originalImage.height / 2;
  const firstCtx = firstCanvas.getContext('2d');
  firstCtx.drawImage(originalImage, 0, 0, firstCanvas.width, firstCanvas.height);

  // 第二步：缩小 50%
  const secondCanvas = document.createElement('canvas');
  secondCanvas.width = firstCanvas.width / 2;
  secondCanvas.height = firstCanvas.height / 2;
  const secondCtx = secondCanvas.getContext('2d');
  secondCtx.drawImage(firstCanvas, 0, 0, secondCanvas.width, secondCanvas.height);

  const finalImage = new Image();
  finalImage.src = secondCanvas.toDataURL();
};

Blur issue

Multi-step downsampling may cause image blur. To solve this problem, the following techniques can be used:

• Sharpening the image: Convolutional filters or other sharpening techniques can be used to enhance image edges.
• Use higher quality interpolation algorithms: For example bilinear or bicubic interpolation can provide better quality than nearest neighbor interpolation.
• Perform downsampling in smaller steps: For example, perform 3-step downsampling, each step reducing the size by 33%, instead of 2-step downsampling, each step reducing the size by 50% .

The above is the detailed content of How to Achieve High-Quality Image Downscaling in the Browser Using HTML5 Canvas?. For more information, please follow other related articles on the PHP Chinese website!