Bildkomprimierungs-Upload auf HTML5-Canvas für mobile Browser_HTML5-Tutorial-Fähigkeiten

Als ich kürzlich die Avatar-Upload-Funktion auf dem mobilen Endgerät entwarf, wurde sie ursprünglich direkt über formData mit hochgeladen. Die tatsächliche Verwendung ist jedoch: für zu große Bilder (aufgenommene Fotos). durch High-Pixel-Mobiltelefone) usw.) Eine zu lange Upload-Zeit führt dazu, dass der Upload fehlschlägt, und jedes Mal, wenn die Originalgröße des Bildes hochgeladen wird (Hintergrundverarbeitungskomprimierung), wird die Benutzererfahrung stark beeinträchtigt, daher habe ich die Komprimierungsmethode untersucht Das Bild durch die Leinwand ziehen und hochladen. Im Folgenden finden Sie einige Ideen und Gedanken:

1. Holen Sie sich das lokale Bild und zeichnen Sie das Bild in die Leinwand. Die Schwierigkeit hierbei ist: Aufgrund des Schutzmechanismus des Browsers kann der Bildpfad der lokalen Datei nicht direkt abgerufen werden. Daher muss das lokale Bild in das Base64-Format kompiliert und dann hochgeladen werden . Der Code lautet wie folgt:

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. var result = document.getElementById("/* Fehlermeldungsanzeigeblock */"); 🎜>
2. var input = document.getElementById("/* Upload file tag */"); >
4. if(typeof FileReader === 'undefiniert'){ result.innerHTML =
5. "

   Leider unterstützt Ihr Browser FileReader nicht

   "; input.setAttribute(
'disabled'
6. ,'disabled'); }
sonst
7. { input.addEventListener(
'change'
8. ,readFile,false); }
Funktion
11. readFile(){
var
12. file = this.files[0]; if
(!/image/w /.test(file.type)){
13. Warnung("Bitte stellen Sie sicher, dass es sich bei der Datei um einen Bildtyp handelt"
);
14. return
false
15. ; } var
reader =
16. new
FileReader();
17. reader.readAsDataURL(file); reader.onload = Funktion
(e){
19. // this.result Die kompilierte Bildkodierung kann direkt mit src angezeigt werden
}
20. }
21. 2. Bildbearbeitung im Canvas
JavaScript-Code

Inhalt in die Zwischenablage kopieren

1. var c=document.getElementById("/* Canvas-Tag-ID */"); >
2. var cxt=c.getContext("2d");
3. var img=new Image();
img.src=
4. /* Erhaltene Bildkodierungsadresse */;
var
5. width = img.width; var
height = img.height;
6. dic = Höhe / Breite; c.width = 200;
//Der Standard für die Bildkomprimierung wird hier auf Basis der Hinterlegung von 200px berechnet
8. c.height = 200 * dic; cxt.clearRect(0,0,200,200*dic); cxt.drawImage(img,0,0,200,200*dic);
9. var
finalURL = c.toDataURL();
// Die erhaltene endgültige URL ist die komprimierte Bildkodierung, die zum Hochladen oder direkten Generieren von IMG-Tags verwendet werden kann
12. Hier sind einige Punkte zu beachten: 1. Beim lokalen Debuggen tritt ein Fehler auf, der auf der Serverseite behoben werden muss 2. Die Methode drawImage() in Canvas verfügt über die Bildzuschneidefunktion, aber wenn die Bilddehnung und das Zuschneiden gleichzeitig geschrieben werden, wird die Zuschneidemethode zuerst ausgeführt;
3. Wenn Sie AJAX zum Hochladen der Bildkodierung verwenden, wird das Pluszeichen in der Kodierung in ein Leerzeichen umgewandelt, was dazu führt, dass die Hintergrundkompilierung fehlschlägt
13. 4. Die Methode zum Auswählen und Hochladen von Bildbereichen befindet sich noch in der Testphase, und ich werde meine Erfahrungen später hinzufügen. Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Originaltext: http://www.cnblogs.com/liaojh/p/5209433.html