Die H5 -Aktivität ist sehr häufig. In einem Formular können Benutzer Bilder zur Teilnahme hochladen. Das mobile Terminal lädt Bilder im Allgemeinen im Handy -Album hoch. Wenn das Hochladen direkt hochgeladen wird, verbraucht es viel Verkehr und die Erfahrung ist nicht gut. Daher müssen Sie vor dem Hochladen die Region komprimieren.
Fassen Sie als Nächstes die hochgeladene Komprimierungsfunktion in der Entwicklung der H5 -Aktivität zusammen und markieren Sie einige Gruben, die aufgenommen wurden, und teilen Sie sie mit Ihnen:Der Bezirk Xiaobai muss sich wenden
Wenn es kein Konzept des Hochladens des mobilen Bildes gibt, müssen Sie die drei Konzepte von FileReader, Blob und FormData ergänzen.
1. FileraderDefinition
Mit dem FilereAder -Objekt kann die Webanwendung asynchron sein, um die auf dem Benutzer Computer gespeicherte Datei (oder Rohdatenpuffer) zu lesen.
Verfahren
Ereignisverarbeitungsverfahren
verwenden
Var fileReader = new FileReader ();2. Blob
Blob (binäres großes Objekt), ein binäres Objekt, ist ein Container, der binäre Dateien speichern kann.
3.FormdataMithilfe von FormData -Objekt können Sie eine Reihe von Schlüsselwerten verwenden, um ein vollständiges Formular zu simulieren, und dann XMLHTTPREQUEST zum Senden dieses Formulars verwenden.
Thema
Bewegungsbildkomprimierung und Upload -Prozess:1) Geben Sie die Datei ein und lesen Sie Bilder hoch und lesen Sie das von Benutzern mit FileReader hochgeladene Bild.
2) Die Bilddaten werden in das IMG -Objekt übertragen, IMG auf Leinwand zeichnen und dann für die Komprimierung Canvas.todataurl verwendet.
3) Nutzen Sie die komprimierten Base64 -Format -Bilddaten, verwandeln Sie sie in binär, stecken Sie sie in FormData und senden
1. Holen Sie sich Bilddaten Fileele.onchange = function () {if (! This.files.length) return; .Test (_SimpleFile.Type)) return; .gettag (this, 'orientation');} // 1. Lesen Sie Dateien, verwenden Sie FileReader, um die Bilddatei zu unterwerfen. .Src; Komprimierung (_img); 2. Komprimiertes Bild /** * Berechnen Sie die Größe des Bildes, komprimieren Sie die Größe gemäß der Größe * 1. iPhone Mobiltelefon HTML5 Das Problem der Bildrichtung hochladen, verwenden Sie exif.js * 2. Android UC -Browser unterstützt den neuen Blob () nicht. Verwenden Sie Blobbuilder* @param {Objekt} _img Bild* @param {number} _ontation foto Informationen* @return {String} Bild Bilder in Basis64 -Format*/Funktion compress (_img, _orientation) {// 2. Berechnen Sie den Breitenwert des Breitenwerts des Zielgröße, wenn die hohe Höhe des Bildes hochgeladen wird, ist das Bild des Bildes größer als das Zieldiagramm und komprimiert die Zielkarte und eine andere Komprimierung. VAR _GoalWidth = 750, // Target width_goalheight = 750, // Target height_Imgwidth = _img.naturWidth, // Image width_imgheight = _img.naturalHeight, // Picture height_Tempwi dth = _imgwidth, // zoom or shrink Temporary width_tempheight = _Imgheight, // Die vorübergehende Breite nach Zoomen oder Reduktion _r = 0; als das Zieldiagramm und die gleiche Komprimierung werden komprimiert _r = _imgwidth / _goalwidth; /_imgHeight;}} else {if (_imgwidth <_goalwidth) {// klein als _r = _goalwidth/_imgwidth;} else {// klein ist weniger als _r = __r = __r = __r = __gheight/_ imgheight; } _tempwidth = math.ceil (_imgwidth * _r); Get ('Canvas-Clip'); Richtungsfehlerschalter (_orientation) {// iPhone Horizontaler Bildschirmaufnahmen, zu diesem Zeitpunkt ist der Home -Taste Fall 3: _Degree = 180; des Mobiltelefons) Fall 6: _canvas.width = _imgheight; Höhe = _imgwidth; pi/180); = _Canvas.todataurl ('Bild/jpeg'); 3. Laden Sie Bilder hoch /** * Laden Sie das Bild in nos * @param {Objekt} _blog Blob Format Bild * @return {void} */Funktion uploadphoto (_data) {// 4. Holen Sie sich die Bildinformationen in Canvas //window.atob -Methode ab. Das Bild des Basis64 -Formats wird in eine Binärstrahlung konvertiert. Split (',') [1]; _data.length); NICHT NEU BLOB () unterstützen, verwenden Sie Blobbuilder var _blob; try {_blob = new Blob ([_ Buffer], {type: 'image/jpeg'});} catch (ee) {window.blobBuilder = window.blobbuilder || Fenster.Webkitblobuilder ||. (); $ requestdwrbyget, Param: [_suffix, '', '', '1'], Onload: Funktion (_tokens) {_tokens = _tokens ||; ||! '); ); (_xhr.ReadyState === 4) {if (if (_xhr.status> = 200 && _xhr.status <300) || _xhr.status === 304) {var _imgurl = http://nos.netase.com) / + _bucketname +/ + _ObjectName +? /Act/Taxiu? Op = Effekt & origimgurl = ' + _newurl;Bestimmen Sie die Bildrichtung des iPhone -Shootings: EXIF
Das obige ist die von Xiaobian eingeführte HTML5 -Bild -Bild -Bildung, um die Auswirkung von Simulations -Hintergrunddaten zu erreichen. jeder pünktlich. Vielen Dank für Ihre Unterstützung für die VEVB Wulin -Website!