Beispielcode für HTML5 mit Canvas zum Komprimieren von Bildern

Vor zwei Tagen habe ich 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, also habe ich darüber nachgedacht, das Bild zu komprimieren Vor dem Hochladen und dann im Hintergrund hochladen, 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. Da es sich beim Hochladen des Bildes um ein Mobiltelefon handelt ist mehrere Megabyte groß, also 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.

Die zweite Gefahr besteht darin, die Breite und Höhe des Bildes selbst zu ermitteln, nachdem das Bild geladen wurde, und es dann der Leinwand zuzuweisen Die Gefahr besteht darin, dass das Laden des Bildes asynchron erfolgt. 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 das Ergebnis „resolve()“ zurückzugeben und das Ergebnis beim Aufruf von .then() abzurufen.

• Canvas's toDataURL('image/png', 0.9); Konvertiert das von Canvas gezeichnete Bild in base64. Der erste Parameter repräsentiert den Typ des Bildes und der zweite Parameter repräsentiert die Klarheit des Bildes.
• Geben Sie eine maximale Größe an. Wenn die Breite und Höhe des Bildes selbst größer als diese Größe sind, wird die größte Seite skaliert und die andere Seite entsprechend den Proportionen des Bildes festgelegt und dann auf die Leinwand festgelegt.

miniImage.js

 exportieren Sie die standardmäßige asynchrone Funktion miniSize(imgData, maxSize = 200 * 1024){ // const maxSize = 200 * 1024; if(imgData && imgData.files && imgData.files.size < maxSize) { return imgData.url }else{ console .log('----------------Komprimiertes Bild------------------'); const canvas = document.createElement('canvas'); let img = new Image(); img.src = imgData.url; let ctx = canvas.getContext((resolve =>{ img.addEventListener( 'load', function(){ //Originalgröße des Bildes let originWidth = this.width; let originHeight = this.height; // Maximale Größenbeschränkung let maxWidth = 400, maxHeight = 400; // Zielgröße let targetWidth = originWidth, targetHeight = originHeight; // Bildgröße überschreitet die Grenze von 400x400 if (originWidth > maxWidth || originHeight > maxHeight) { if (originWidth / originHeight > maxWidth / maxHeight) { // Breiter, Größe entsprechend der Breite begrenzen targetWidth = maxWidth; = Math.round(maxWidth * (originHeight / originWidth)); } else { targetHeight = maxHeight; targetWidth = Math.round(maxHeight * (originWidth / originHeight)); ctx.drawImage(img, 0, 0, targetWidth, targetHeight); let base64 = canvas.toDataURL('image/png', 0.9); restart(base64 }, false);

Anruf:

test.js

 onChangeImg = async (files, type, index) => { let previous = this.props.imagePicker.files; if(type === add) { let result = miniSize(files[files.length-1]); Verwenden Sie .then(), um das Ergebnis zu erwarten.then(res => { previous.push({url: res}); }); previous.splice(index,1); } waiting this.props.dispatch({ type: 'imagePicker/saveImage', payload: { files: previous } }) }

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.