Fungsi Upload Kompresi Gambar Pengembangan Seluler HTML5

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.

Distrik Xiaobai harus -see

Jika tidak ada konsep pengunggahan gambar seluler, Anda perlu melengkapi tiga konsep filereader, gumpalan, dan formdata.

definisi

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 ();

BLOB (Objek Biner Besar), objek biner, adalah wadah yang dapat menyimpan file biner.

Menggunakan objek FormData, Anda dapat menggunakan serangkaian nilai kunci untuk mensimulasikan formulir lengkap, dan kemudian menggunakan XMLHTTPREQUEST untuk mengirim formulir ini.

Topik

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

 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);

 /** * 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');

 /** * 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!