Aktivitas H5 sangat umum, satu formulir adalah untuk memungkinkan pengguna mengunggah gambar untuk berpartisipasi. Terminal seluler mengunggah gambar. Jika mengunggah diunggah secara langsung, ia mengkonsumsi banyak lalu lintas dan pengalamannya tidak baik. Karena itu, sebelum mengunggah, Anda perlu mengompres area lokal.
Selanjutnya, rangkum fungsi yang diunggah kompresi dalam pengembangan aktivitas H5, dan tandai beberapa lubang yang telah diinjak, dan bagikan dengan Anda:Distrik Xiaobai harus -see
Jika tidak ada konsep pengunggahan gambar seluler, Anda perlu melengkapi tiga konsep filereader, gumpalan, dan formdata.
1.Filereaderdefinisi
Menggunakan Objek FileReader, aplikasi Web dapat tidak sinkron untuk membaca file (atau buffer data mentah) yang disimpan di komputer pengguna.
metode
Prosedur pemrosesan acara
menggunakan
Var filereader = new filereader ();2. Blob
BLOB (Objek Biner Besar), objek biner, adalah wadah yang dapat menyimpan file biner.
3.FormdataMenggunakan objek FormData, Anda dapat menggunakan serangkaian nilai kunci untuk mensimulasikan formulir lengkap, dan kemudian menggunakan XMLHTTPREQUEST untuk mengirim formulir ini.
Topik
Proses kompresi gambar dan unggahan gambaran:1) input file mengunggah gambar dan membaca gambar yang diunggah oleh pengguna dengan filereader;
2) Data gambar ditransmisikan ke objek IMG, menarik IMG ke kanvas, dan kemudian menggunakan Canvas.todataurl untuk kompresi;
3) Dapatkan data gambar format base64 terkompresi, ubah menjadi biner, colokkan ke formdata, dan akhirnya kirimkan formdata melalui xmlhttpRequest
1. Dapatkan data gambar Fileele.onchange = function () {if (! This.files.length) return; // Pertimbangkan situasi gambar tunggal var penilaian apakah itu gambar if (! /// (? .test (_SimpleFile.type)) kembali; // plugin exif.js untuk mendapatkan gambar iOS var _orientation; .GETTAG (ini, 'Orientasi');} // 1. Baca file, gunakan filereader untuk menaklukkan file gambar. .src; var _r_reader = new filereader (), _img = gambar baru (), _reader.onload = function (). Compress (_IMG); 2. Gambar terkompresi /** * Hitung ukuran gambar, kompres ukuran sesuai dengan ukuran * 1. Ponsel iPhone HTML5 Unggah masalah arah gambar, gunakan exif.js * 2. Browser Android UC tidak mendukung Blob baru (), Gunakan blobbuilder* @param {objek} _IMG gambar* @param {number} _ Informasi foto foto* @return {string} gambar gambar dalam format base64*/fungsi kompres (_img, _orientation) {// 2. Hitung nilai lebar dari the the Ukuran target, jika tinggi gambar mengunggah gambar gambar keduanya lebih besar dari bagan target, dan mengompres peta target dan kompresi lainnya; jika ada satu sisi lebih kecil, rasio gambar pengunggahan diperbesar. Var _goalwidth = 750, // target width_goalheight = 750, // target height_imgwidth = _img.naturwidth, // width_imgheight = _img.naturalheight, // pucuk height_tempwi dth = _Imgwidth, / /oroms /orom ornoom /orom oroms /oroms /oroms /oroms /oroms /oromfore, / /oromf, /oromf, / /oromgwi dth = oMGWITHETHEIGHTE /IMGWITHE, /PICHRINGTH, /IMGRIGHETHE. Lebar sementara setelah zooming atau reduksi _r = 0; // rasio kompresi if (_imgwidth === _ goalwidth && imgheight === _ goalheight) {} lain i f (_imgwidth> _goalwidth && _imgheight> _imgwidth> _goalwidth && _imgheight> _mgwidth> _goAlwidth && _imgheight> _mgogo) dari bagan target, dan kompresi yang sama dikompresi _r = _imgwidth / _goalwidth; if (_imgheight / _goalheight <t;} _tempwidth = math.ceil (_imgwidth / _r); imgwidth; /_imgheight;}} else {if (_imgwidth <_goalwidth) {// kecil dari _r = _goalwidth/_imgwidth;} else {// kecil kurang dari _r = __r = __r = _ __r = __rgoGoGo dari _r = __r = __r = __r = __r = __r = __r = __r = __r = __r = __r = __r = __r = __r = __r = __r = __r = __r = __r = __r = __r = } _tempwidth = math.ceil (_imgwidth * _r); _templeight = Math.ceil (_imgheight * _r);} // 3. Gunakan kanvas untuk memotong gambar, dan setelah penyamaan atau pengurangan cut var_canvas = E._ $ $ Get ('Canvas-Clip'); sakelar masalah kesalahan (_orientation) {// pemotretan layar horizontal iPhone, pada saat ini kunci rumah adalah Kasus 3: _Degree = 180; dari ponsel secara normal) Kasus 6: _canvas.width = _imgheight; Tinggi = _imgwidth; _degree = 270; pi/180); = _Canvas.todataurl ('gambar/jpeg'); 3. Unggah gambar /** * Unggah gambar ke nos * @param {object} _blog format format gambar * @return {void} */function unggahphoto (_data) {// 4. Dapatkan informasi gambar di canvas //window.atob Metode akan Gambar format Base64 dikonversi menjadi string biner; split (',') [1]; _data.length); tidak mendukung new blob (), gunakan blobbuilder var _blob; Window.webkitblobbuilder || (); _bb.append (_buffer); $ requestDwrbyget, Param: [_Suffix, '', '', '', '1'], onload: function (_tokens) {_tokens = _tokens || ||! _Token.objectName ||! '); ); (_xhr.readyState === 4) {if (_xhr.status> = 200 && _xhr.status <300) || _bucketname +/ +_ObjectName +? /Taxiu? Op = Effect & Origimgurl = ' + _newurl;Tentukan arah gambar pemotretan iPhone: exif
Di atas adalah fungsi pengembangan seluler HTML5 yang dikompresi dan mengunggah yang diperkenalkan oleh Xiaobian untuk mencapai efek login latar belakang simulasi. semua orang tepat waktu. Terima kasih banyak atas dukungan Anda untuk situs web VEVB Wulin!