Comment obtenir une réduction d'image de haute qualité dans le navigateur à l'aide de HTML5 Canvas ?

Réduire (sous-échantillonner) les images dans le navigateur pour une haute qualité

Reduxrespot :

Dans le navigateur Lors de la réduction de l'image en utilisant l'élément canevas html5, j'ai trouvé que la qualité de l'image est très faible. Après quelques recherches, j'ai découvert que la désactivation de l'interpolation dans améliore la qualité, mais ne donne toujours pas les meilleurs résultats.

Bonnes pratiques

Sous-échantillonnage en une seule étape

Recommandé pour les situations où vous devez réduire la taille d'une grande image à une petite image Utilisez un sous-échantillonnage en une seule étape. Voici les étapes :

1. Utilisez la méthode drawImage() pour dessiner l'image originale sur un canevas de taille réduite.
2. Utilisez getImageData() pour obtenir les données de l'image réduite.
3. Utilisez putImageData() pour dessiner les données réduites sur un nouveau canevas.

Réalisé avec l'exemple de code suivant :

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);
};

Sous-échantillonnage en plusieurs étapes

Si le sous-échantillonnage en une seule étape n'est pas suffisant pour la qualité , vous pouvez utiliser le sous-échantillonnage en plusieurs étapes. Ceci est obtenu en effectuant de manière répétée un sous-échantillonnage en une seule étape en utilisant des ratios plus petits.

Ce qui suit est un exemple de code pour un sous-échantillonnage en deux étapes :

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();
};

Problème de flou

Un sous-échantillonnage en plusieurs étapes peut provoquer un flou de l'image. Pour résoudre ce problème, les techniques suivantes peuvent être utilisées :

• Affûtage de l'image : Des filtres convolutifs ou d'autres techniques d'accentuation peuvent être utilisés pour améliorer les bords de l'image.
• Utilisez des algorithmes d'interpolation de meilleure qualité : Par exemple, l'interpolation bilinéaire ou bicubique peut fournir une meilleure qualité que l'interpolation du voisin le plus proche.
• Effectuez un sous-échantillonnage par étapes plus petites : Par exemple, effectuez un sous-échantillonnage en 3 étapes, chaque étape réduisant la taille de 33 %, au lieu d'un sous-échantillonnage en 2 étapes, chaque étape réduisant la taille de 50 % .

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!