يعد نشاط H5 شائعًا جدًا ، أحد الأشكال هو السماح للمستخدمين بتحميل الصور بالمشاركة. يقوم مستخدمي المحطة المحمولة بتحميل الصور بشكل عام في ألبوم الهاتف المحمول. إذا تم تحميل التحميل مباشرة ، فإنه يستهلك الكثير من حركة المرور والخبرة ليست جيدة. لذلك ، قبل التحميل ، تحتاج إلى ضغط المنطقة المحلية.
بعد ذلك ، يلخص الوظيفة التي تم تحميلها في تطوير نشاط H5 ، وتمييز بعض الحفر التي تم تنفيذها ، ومشاركتها معك:يجب أن يرى مقاطعة شياووبياي
إذا لم يكن هناك مفهوم لتحميل صور الهاتف المحمول ، فأنت بحاجة إلى استكمال المفاهيم الثلاثة لـ Filereader و Blob و FormData.
1.filereaderتعريف
باستخدام كائن FileReader ، يمكن أن يكون تطبيق الويب غير متزامن لقراءة الملف (أو المخزن المؤقت للبيانات الخام) المخزنة على كمبيوتر المستخدم.
طريقة
إجراء معالجة الأحداث
يستخدم
var fileReader = new FileReader () ؛2. Blob
Blob (كائن كبير ثنائي) ، كائن ثنائي ، عبارة عن حاوية يمكنها تخزين الملفات الثنائية.
3.formdataباستخدام كائن FormData ، يمكنك استخدام سلسلة من قيم المفاتيح لمحاكاة نموذج كامل ، ثم استخدام XMLHTTPrequest لإرسال هذا النموذج.
عنوان
عملية ضغط صورة الحركة وتحميلها:1) يقوم إدخال ملفات بتحميل الصور وقراءة الصورة التي تم تحميلها بواسطة المستخدمين باستخدام FileReader ؛
2) يتم إرسال بيانات الصورة إلى كائن IMG ، ويرسم IMG إلى قماش ، ثم يستخدم canvas.todataurl للضغط ؛
3) احصل على بيانات صورة تنسيق BASE64 المضغوطة ، وقم بتحويلها إلى ثنائي ، وتوصيلها في FormData ، وأخيراً إرسال FormData من خلال XMLHTPRequest
1. احصل على بيانات الصورة fileele.onchange = function () {if (! this.files.length) return ؛ .Test (_simplefile.type)) . .src ؛ ضغط (_IMG) ؛ 2. صورة مضغوطة /** * احسب حجم الصورة ، وضغط الحجم وفقًا لحجم * 1. الهاتف المحمول iPhone HTML5 قم بتحميل مشكلة اتجاه الصورة ، واستخدم exif.js * 2. لا يدعم متصفح Android UC blob () الجديد ، استخدم blobbuilder* param {object} _img image* param {number} _ontation معلومات الصور* @string} صور الصور بتنسيق base64*/الوظيفة ضغط (_img ، _orientation) {// 2. الحجم الهدف ، إذا كان الارتفاع العالي للصورة يحمل صورة الصورة كلاهما أكبر من الرسم البياني المستهدف ، وضغط الخريطة المستهدفة وغيرها من الضغط ؛ var _goalwidth = 750 ، // target width_goalheight = 750 ، // target height_imgwidth = _img.naturwidth ، // image width_imgheight = _img.naturalheight ، // picture height_tempwi dth = _imgwidth ، // ZoMe. العرض المؤقت بعد التكبير أو التخفيض _r = 0 ؛ من الرسم البياني المستهدف ، وضغط متساوٍ يتم ضغط _r = _imgwidth / _goalwidth ؛ /_imgheight ؛}} آخر {if (_imgwidth <_goalwidth) {// small من _r = _goalwidth/_imgwidth ؛} آخر {// small أقل من _r = __r = __r = _ __r = __goalheight/_ _ imgheight ؛ } _tempwidth = math.ceil (_imgwidth * _r) ؛ احصل على (Canvas-Clip ') ؛ مفتاح خطأ في الاتجاه (_orientation) {// iPhone screen اطلاع أفقي ، في هذا الوقت مفتاح المنزل هو الحالة 3: _degree = 180 ؛ للهاتف المحمول بشكل طبيعي) _canvas. الارتفاع = _imgwidth ؛ PI/180) ؛ = _canvas.todataurl ('Image/jpeg') ؛ 3. تحميل الصور /** * قم بتحميل الصورة إلى NOS * param {object} _blog صورة تنسيق blob * return {void} */function eploadphoto (_data) {// 4. يتم تحويل صورة BASE64 إلى سلسلة ثنائية ؛ تقسيم ('،') [1] ؛ _data.length) ؛ لا تدعم new Blob () ، استخدم blobbuilder var _blob ؛ window.webkitblobbuilder || () ؛ $ requestDwrbyget ، [_suffix ، '' ، '' ، '1'] ||! ') ؛ ) ؛ (_xhr.readyState === 4) {if (_xhr.status> = 200 && _xhr.status <300) || _bucketname +/ +_objectname +؟ /تاكسي؟حدد اتجاه صورة iPhone: EXIF
ما ورد أعلاه هو صورة تطوير HTML5 والتحميل التي قدمها Xiaobian لتحقيق تأثير بيانات خلفية المحاكاة. الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع VEVB Wulin!