Exemple de code pour HTML5 utilisant Canvas pour compresser des images

Cet article présente principalement les informations pertinentes sur l'exemple de code d'utilisation de Canvas pour compresser des images en HTML5. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence.

J'ai créé une fonction pour convertir les images en base64 pour les télécharger il y a deux jours. J'ai trouvé que si la base64 de l'image est trop grande, la requête deviendra très lente et expirera sérieusement, alors j'ai créé une fonction pour convertir les images en base64 pour les télécharger. J'ai pensé à compresser l'image avant de la télécharger, puis à la télécharger en arrière-plan, ce qui peut grandement améliorer l'efficacité. Voici quelques pièges rencontrés lors de l'utilisation de Canvas pour compresser des images. Le code complet sera donné à la fin de l’article.

Le premier écueil est que lors de la compression de l'image, la largeur et la hauteur de l'image elle-même ne sont pas obtenues, et une largeur et une hauteur fixes de 600*480 sont données car c'est sur le téléphone portable, quand. En téléchargeant l'image, il s'agit toujours d'une image de plusieurs mégaoctets, cela ne pose donc aucun problème. Le problème est survenu lors de la modification de l'avatar. Les images téléchargées lors du test étaient toutes de petites images, puis les images compressées ne s'affichaient pas complètement et la plupart d'entre elles étaient vides. C'est parce qu'elles n'ont pas été prises en compte lors de la compression. et la hauteur de l'image.

Le deuxième piège, la façon de résoudre le premier piège est d'obtenir la largeur et la hauteur de l'image elle-même après le chargement de l'image (onload), puis de l'attribuer au canevas, et d'opérer de cette manière , mais il y a un piège, le chargement de l'image est asynchrone, lorsque vous revenez, ce qui est renvoyé peut être indéfini au lieu du base64 compressé dont vous avez besoin. La solution ici est de créer une nouvelle promesse, puis solve() renvoie le résultat et .then() obtient le résultat lors de l'appel.

Points de connaissance :

• canvas’ toDataURL('image/png', 0.9); Convertir l'image dessinée par canvas en base64, Chapitre Un paramètre représente le type d’image et le deuxième paramètre représente la clarté de l’image.

• Spécifie une taille maximale. Si la largeur et la hauteur de l'image elle-même sont supérieures à cette taille, elle sera mise à l'échelle en fonction du plus grand côté et l'autre sera défini en fonction de cette taille. la proportion de l'image, puis définie sur le canevas.

miniImage.js

export default async function miniSize(imgData, maxSize = 200*1024){
    // const maxSize = 200 * 1024;

    if(imgData && imgData.files && imgData.files.size < maxSize) {
        return imgData.url;
    }else{
      console.log(&#39;----------------压缩图片-------------------&#39;);
      const canvas = document.createElement(&#39;canvas&#39;);
      let img = new Image();
      img.src = imgData.url;
      let ctx = canvas.getContext(&#39;2d&#39;);
      return new Promise((resolve =>{
        img.addEventListener(&#39;load&#39;, function(){
          //图片原始尺寸
          let originWidth = this.width;
          let originHeight = this.height;
          // 最大尺寸限制
          let maxWidth = 400, maxHeight = 400;
          // 目标尺寸
          let targetWidth = originWidth, targetHeight = originHeight;
          // 图片尺寸超过400x400的限制
          if (originWidth > maxWidth || originHeight > maxHeight) {
            if (originWidth / originHeight > maxWidth / maxHeight) {
              // 更宽，按照宽度限定尺寸
              targetWidth = maxWidth;
              targetHeight = Math.round(maxWidth * (originHeight / originWidth));
            } else {
              targetHeight = maxHeight;
              targetWidth = Math.round(maxHeight * (originWidth / originHeight));
            }
          }
          canvas.width = targetWidth;
          canvas.height = targetHeight;
          ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
          let base64 = canvas.toDataURL(&#39;image/png&#39;, 0.9);
          resolve(base64);
        }, false);
      }))
    }
}

Appel :

test.js

onChangeImg = async (files, type, index) => {
    let previous = this.props.imagePicker.files;
    if(type === "add") {
      let result = miniSize(files[files.length-1]);
      //使用 .then() 调用获得结果
      await result.then(res => {
         previous.push({url: res});
      });
    }else if(type === "remove") {
        previous.splice(index,1);
    }
    await this.props.dispatch({
      type: 'imagePicker/saveImage',
      payload: {
        files: previous
      }
    })
  }

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun !

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!