Bildkomprimierungs-Upload auf HTML5-Canvas für mobile Browser_HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 15:45:33

Original

2240 Leute haben es durchsucht

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

var result = document.getElementById("/* Fehlermeldungsanzeigeblock */"); 🎜>
var input = document.getElementById("/* Upload file tag */"); >
if(typeof FileReader === 'undefiniert'){ result.innerHTML =
"
Leider unterstützt Ihr Browser FileReader nicht
"; input.setAttribute(
,'disabled'); }
{ input.addEventListener(
,readFile,false); }
readFile(){
file = this.files[0]; if
Warnung("Bitte stellen Sie sicher, dass es sich bei der Datei um einen Bildtyp handelt"
return
; } var
new
reader.readAsDataURL(file); reader.onload = Funktion
// this.result Die kompilierte Bildkodierung kann direkt mit src angezeigt werden
}
2. Bildbearbeitung im Canvas

Inhalt in die Zwischenablage kopieren

var c=document.getElementById("/* Canvas-Tag-ID */"); >
var cxt=c.getContext("2d");
var img=new Image();
/* Erhaltene Bildkodierungsadresse */;
width = img.width; var
dic = Höhe / Breite; c.width = 200;
c.height = 200 * dic; cxt.clearRect(0,0,200,200*dic); cxt.drawImage(img,0,0,200,200*dic);
var
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;
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