Beispielcode für Canvas und Bildkomprimierung

Ich habe bereits einen Artikel über die Canvas-Bildverarbeitung geschrieben. Heute werden wir darüber sprechen, wie man Canvas zum Komprimieren von Bildern verwendet.

Als nächstes werde ich den spezifischen Prozess der Canvas-Bildkomprimierung anhand konkreter Beispiele erläutern.

1. Holen Sie sich lokale Dateien

 <!--HTML--><input type=file id=choose-img />

 // JSvar ChooseImg = document.getElementById(choose-img); ChooseImg.onchange = function(e){ var file = this.files[0]; // ... (Ein Teil des Codes wird weggelassen und wird in angezeigt Sequenz, das gleiche unten)};

Es ist ganz einfach: Rufen Sie einfach die lokale Datei über die Schaltfläche mit dem Typ „Datei“ ab.

 <!--HTML--><div id=result></div>

 // JSvar result = document.getElementById(result); // Wird verwendet, um Bildausgabeergebnisse oder Fehlermeldungen anzuzeigen if(/image/.test(file.type)){ // Bestimmen Sie, ob es sich bei dem Dateityp um ein Bild handelt // ... }else{ result.innerHTML = '<span style=color: red;>Falscher Dateityp! </span>';}

 var img = new Image(), // Erstellen Sie ein Bildobjekt, um das Originalbild zu platzieren. reader = new FileReader();reader.readAsDataURL(file); // Im Base64-Format lesen und im Ergebnisattribut des FileReader-Objekts speichern Reader .onload = function(){ img.src = this.result; Weisen Sie die Base64-Zeichenfolge des Bildes direkt document.body.insertBefore(img,chooseImg) im src des Image-Objekts zu. // Fügen Sie das Ausgabebild vor der Dateischaltfläche ein img.onload = function(){ // ... }; };

 var canvas = document.createElement('canvas');canvas.width = img.clientWidth;canvas.height = img.clientHeight;var context = canvas.getContext('2d');

Hinweis: Die Leinwandgröße entspricht der Breite und Höhe des Eingabebilds.

 context.drawImage(img,0,0,canvas.width,canvas.height);

 <!--HTML-->Bildkomprimierungsverhältnis: <input id=rate type=number min=0 max=100 /> %

 // JSvar rate = document.getElementById(rate).value ||. 100; // Geben Sie das Bildkomprimierungsverhältnis ein, der Standardwert ist 100 % var imgUrl = canvas.toDataURL(file.type,rate/100); Parameter ist der Ausgabebildtyp und der zweite ist das Komprimierungsverhältnis result.innerHTML = 'Nach der Komprimierung: <img src='+ imgUrl +' />'; Das komprimierte Bild im Ergebnis anzeigen img.style.display = 'none' // Das Originalbild ausblenden

Geben Sie das im Canvas gezeichnete Bild erneut im Base64-Format aus.

 <!--HTML-->Bildkomprimierungsverhältnis: <input id=rate type=number min=0 max=100 /> %<input type=file id=choose-img /><div id=result></div >

 // JSvar ChooseImg = document.getElementById(choose-img), result = document.getElementById(result);chooseImg.onchange = function(e){ var file = this.files[0]; file.type)){ var img = new Image(), reader = new FileReader(); reader.readAsDataURL(file); function(){ img.src = this.result; document.body.insertBefore(img,chooseImg); img.onload = function(){ var canvas = document.createElement('canvas'); ; canvas.height = img.clientHeight; var context = canvas.getContext('2d'); context.drawImage(img,0,0,canvas.width,canvas.height); var rate = document.getElementById(rate).value || var imgUrl = canvas.toDataURL(file.type,rate/100); result.innerHTML = 'Nach der Komprimierung: <img src='+ imgUrl +' />'; result.style.display = 'block'; img.style.display = 'none'; }; }; else{ result.innerHTML = '<span style=color: red;>Falscher Dateityp! </span>'; }};

Nach dem Testen wurde festgestellt, dass der Bildkomprimierungseffekt im JPEG-Format über Canvas am besten ist, während der PNG-Komprimierungseffekt nicht offensichtlich ist und manchmal größer wird.

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.