ฟังก์ชั่นอัปโหลดรูปภาพการพัฒนาภาพมือถือ HTML5

กิจกรรม H5 เป็นเรื่องธรรมดามากรูปแบบหนึ่งคือการอนุญาตให้ผู้ใช้อัปโหลดรูปภาพเพื่อเข้าร่วม ผู้ใช้อัพโหลดเทอร์มินัลมือถือ หากการอัปโหลดถูกอัปโหลดโดยตรงมันจะใช้ปริมาณการใช้งานจำนวนมากและประสบการณ์ไม่ดี ดังนั้นก่อนที่จะอัปโหลดคุณต้องบีบอัดพื้นที่ท้องถิ่น

เขต Xiaobai ต้องดู

หากไม่มีแนวคิดเกี่ยวกับการอัปโหลดรูปภาพมือถือคุณจะต้องเสริมแนวคิดสามแนวคิดของ Filereader, Blob และ FormData

คำนิยาม

การใช้วัตถุ filereader แอปพลิเคชันสามารถเป็นแบบอะซิงโครนัสในการอ่านไฟล์ (หรือบัฟเฟอร์ข้อมูลดิบ) ที่เก็บไว้ในคอมพิวเตอร์ผู้ใช้

วิธี

ขั้นตอนการประมวลผลเหตุการณ์

ใช้

 var filereader = new filereader ();

Blob (วัตถุขนาดใหญ่ไบนารี) วัตถุไบนารีเป็นภาชนะที่สามารถเก็บไฟล์ไบนารีได้

การใช้วัตถุ FormData คุณสามารถใช้ชุดของค่าคีย์เพื่อจำลองรูปแบบที่สมบูรณ์จากนั้นใช้ XMLHTTPREQUEST เพื่อส่งแบบฟอร์มนี้

หัวข้อ

1) อินพุตไฟล์อัพโหลดรูปภาพและอ่านรูปภาพที่อัปโหลดโดยผู้ใช้ที่มี filereader;

2) ข้อมูลรูปภาพจะถูกส่งไปยังวัตถุ IMG ดึง IMG ไปยังผืนผ้าใบจากนั้นใช้ canvas.todataurl สำหรับการบีบอัด;

3) รับข้อมูลรูปภาพรูปแบบ Baspressed Base64 ให้เปลี่ยนเป็นไบนารีเสียบเข้ากับ formData และในที่สุดก็ส่ง formData ผ่าน XMLHTTPREQUEST

 fileele.onchange = function () {ถ้า (! this.files.length) return; .test (_simplefile.type)) กลับมา; .getTag (สิ่งนี้ 'การวางแนว');} // 1. อ่านไฟล์, ใช้ filereader เพื่อย่อยไฟล์รูปภาพ .SRC; บีบอัด (_img);

 /** * คำนวณขนาดของภาพบีบอัดขนาดตามขนาด * 1. โทรศัพท์มือถือ iPhone HTML5 อัปโหลดปัญหาทิศทางของภาพใช้ exif.js * 2. เบราว์เซอร์ Android UC ไม่รองรับ Blob ใหม่ () ใช้ blobbuilder* @param {object} _img image* @param {number} _ontation ข้อมูลรูปภาพ* @return {string} รูปภาพรูปภาพในรูปแบบ base64*/ฟังก์ชั่นบีบอัด (_img, _orientation) {// 2. คำนวณค่าความกว้างของค่าความกว้างของค่าความกว้างของค่าความกว้างของค่า ขนาดเป้าหมายหากความสูงของภาพสูงอัปโหลดรูปภาพของรูปภาพทั้งสองนั้นมากกว่าแผนภูมิเป้าหมายและบีบอัดแผนที่เป้าหมายและการบีบอัดอื่น ๆ var _goalwidth = 750, // เป้าหมาย width_goalheight = 750, // target height_imgwidth = _img.naturwidth, // image width_imgheight = _img.naturalheight, // picture height_tempwi dth = _imgwidth, // zoom ความกว้างชั่วคราวหลังการซูมหรือลด _r = 0; กว่าแผนภูมิเป้าหมายและการบีบอัดที่เท่าเทียมกันถูกบีบอัด _r = _imgwidth / _goalwidth; /_imgheight;}} else {ถ้า (_imgwidth <_goalwidth) {// เล็กกว่า _r = _goalwidth/_imgwidth;} else {// ขนาดเล็กน้อยกว่า _r = __r = __r = _ __r = } _tempWidth = Math.ceil (_imgwidth * _r); _tempheight = math.ceil (_imgheight * _r); รับ ('Canvas-clip'); Switch ปัญหาข้อผิดพลาด (_orientation) {// การถ่ายภาพหน้าจอแนวนอนของ iPhone ในเวลานี้คีย์โฮมคือกรณีที่ 3: _degree = 180; ของโทรศัพท์มือถือตามปกติ) กรณีที่ 6: _canvas.width = _imgheight; _canvas.height = _imgwidth; ความสูง = _imgwidth; _degree = 270; PI/180); Mage (_IMG, 0, 0, _TempWidth, _Tempheight);} // วิธี TODATAURL คุณสามารถรับรูปแบบของข้อมูล BASE64 ของรูปแบบ: ภาพ/PNG; = _canvas.todataurl ('image/jpeg');

 /** * อัปโหลดรูปภาพไปยัง nos * @param {object} _blog blob รูปแบบรูปภาพ * @return {void} */function uploadphoto (_data) {// 4 รับข้อมูลรูปภาพใน canvas //window.atob รูปภาพของรูปแบบ Base64 ถูกแปลงเป็นสตริงไบนารี แยก (',') [1]; _data.length); ไม่รองรับ blob ใหม่ (), ใช้ blobbuilder var _blob; window.webkitblobbuilder || window.m ozblobbuilder || window.msblobbuilder; (); _bb.append (_buffer);} var _suffix = 'jpg'; $ requestdwrbyget, param: [_suffix, '', '', '', '1'], onload: function (_tokens) {_tokens = _tokens || []; ||! '); return false;} // อัปโหลดรูปภาพไปยัง nos var _objectname = _token.objectname, _uploadtoken = _token.uploadtoken, _bucketname = _token.bucketname; ); _formdata.append ('x-nos-token', _uploadtoken); (_xhr.readystate === 4) {ถ้า (_xhr.status> = 200 && _xhr.status <300) || _xhr.status === 304) {var _imgurl = http://nos.netease.com/ _bucketName +/ +_objectname +? /taxiu? OP = Effect & OrigimGurl = ' + _Newurl;

กำหนดทิศทางการถ่ายภาพ iPhone: exif

ด้านบนเป็นฟังก์ชั่นการพัฒนาและการอัปโหลดของ HTML5 Mobile ที่แนะนำโดย Xiaobian เพื่อให้ได้ผลของการเข้าสู่ระบบข้อมูลพื้นหลังการจำลองฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคน ทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!