Beispielcode für HTML5 mit Canvas zum Komprimieren von Bildern

In diesem Artikel werden hauptsächlich relevante Informationen zum Beispielcode für die Verwendung von Canvas zum Komprimieren von Bildern in HTML5 vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden.

Ich habe vor zwei Tagen eine Funktion zum Konvertieren von Bildern in Base64 zum Hochladen erstellt. Ich habe festgestellt, dass die Anfrage sehr langsam wird und es zu einer ernsthaften Zeitüberschreitung kommt Denken Sie daran, das Bild vor dem Hochladen zu komprimieren und es dann im Hintergrund hochzuladen, was die Effizienz erheblich verbessern kann. Hier sind einige Fallstricke, die bei der Verwendung von Canvas zum Komprimieren von Bildern auftreten. Der vollständige Code wird am Ende des Artikels angegeben.

Die erste Gefahr besteht darin, dass beim Komprimieren des Bildes die Breite und Höhe des Bildes selbst nicht ermittelt werden und eine feste Breite und Höhe von 600 * 480 angegeben wird Das Hochladen des Bildes ist immer mehrere Megabyte groß, daher ist dies kein Problem. Das Problem trat beim Ändern des Avatars auf. Die während des Tests hochgeladenen Bilder wurden nicht vollständig angezeigt und die meisten davon waren leer. Dies liegt daran, dass sie bei der Komprimierung nicht berücksichtigt wurden und Höhe des Bildes.

Der zweite Fallstrick. Der Weg, den ersten Fallstrick zu lösen, besteht darin, die Breite und Höhe des Bildes selbst zu ermitteln, nachdem das Bild geladen wurde (Onload), es dann der Leinwand zuzuweisen und auf diese Weise vorzugehen , aber es gibt eine Falle: Das Laden von Bildern erfolgt asynchron. Wenn Sie zurückkehren, ist das, was zurückgegeben wird, möglicherweise undefiniert und nicht das benötigte komprimierte Base64. Die Lösung hier besteht darin, ein neues Versprechen zu erstellen, dann „resolve()“ das Ergebnis zurückzugeben und .then() das Ergebnis beim Aufruf abzurufen.

Wissenspunkte:

• canvas' toDataURL('image/png', 0.9); Konvertieren Sie das von Canvas gezeichnete Bild in base64, Nr . Ein Parameter repräsentiert die Art des Bildes und der zweite Parameter repräsentiert die Klarheit des Bildes.

• Gibt eine maximale Größe an. Wenn die Breite und Höhe des Bildes selbst größer als diese Größe sind, wird es entsprechend der größten Seite skaliert und die andere wird entsprechend eingestellt die Proportion des Bildes und dann auf die Leinwand einstellen.

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

Aufruf:

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein. Lernen hilft!

Das obige ist der detaillierte Inhalt vonBeispielcode für HTML5 mit Canvas zum Komprimieren von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!