قم بتنظيم المستند ، وابحث عن رمز مثيل لـ H5 للاتصال بالكاميرا لالتقاط الصور وضغط الصورة ، وفرزها وتبسيطها.
خلفيةفي الآونة الأخيرة ، أريد إنشاء صفحة H5.
نقاط الوظيفة الرئيسية في الواجهة الأمامية هي:
أسهل طريقة للاتصال بالكاميرا هي استخدام خاصية ملف الإدخال [الكاميرا]:
<type type = file capture = Carera ACCESS = Image/*> // camera <type type = file accough = image/*> // ullug
لا يزال توافق هذه الطريقة مشكلة. لقد بحثت في الكثير من الحلول الجيدة على الإنترنت ، ويمكنني الاستمرار في الكتابة. جوهر جوهر
ضغط الصورة يتم استخدام ضغط الصورة لاستخدام FileReader و <canvas> .
يسمح كائن FileReader لتطبيقات الويب بقراءة محتويات الملف المخزن على الكمبيوتر بشكل غير متزامن ، واستخدام ملف أو كائن Blob لتحديد الملف أو البيانات التي تريد قراءتها.
<Canvas> هو عنصر HTML يمكنه استخدام البرامج النصية لرسم الرسومات ، والتي يمكن أن ترسم الرسومات والرسوم المتحركة البسيطة.
يجب أن يضغط ضغوط الصورة على الدقة وجودة الصورة. من الصورة.
var max_wh = 800 ؛ ؛ / Dataurl تم الحصول عليها من خلال Filerereader
ثم هناك جودة ضغط الصورة. قم بإنشاء علامة <Canvas> ديناميكيًا ثم ضغط الصورة:
var Quality = 80 ؛ ، 0 ، Image.width ، Image.Height) ؛
ثم نتيجة التحميل على الخادم وعرض الخادم ، ولكن الأمور ليست سلسة. جوهر جوهر بعد ضغط الهاتف المحمول iOS ، يتم تدوير الصورة بشكل غير مفهوم وتستمر في حل المشكلة.
حل دوران صورة iOSأول اقتباس exif.js ، والحصول على معلومات اتجاه الصورة من خلال exif.getData و exif.gettg.
// file الحصول على exif.getData (ملف ، function () {extrientation = exif.gettg (file ، 'الاتجاه') ؛}) ؛معنى كل قيمة اتجاه يتوافق مع هاتف iPhone المحمول لالتقاط الصور:
| توجيه | يصف |
|---|---|
| 3 | في هذا الوقت ، يكون زر الصفحة الرئيسية على الشاشة الأفقية لـ iPhone ، في هذا الوقت على اليسار ، تدور الصورة 180 درجة مقارنة بالموضع الأصلي |
| 6 | يطلق على iPhone عموديًا ، في هذا الوقت يكون زر الصفحة الرئيسية أدناه (اتجاه الهاتف المحمول) ، ويمكن أن تدور الصورة 90 درجة مقارنة بالموضع الأصلي. |
| 8 | يطلق iPhone على الشاشة الرأسية ، في هذا الوقت زر الصفحة الرئيسية أعلاه ، وتدور الصورة 90 درجة في اتجاه عقارب الساعة مقارنة بالموضع الأصلي. |
التبديل (الاتجاه) {الحالة 6: CVS.WIDTH = ارتفاع في هذا الوقت مفاتيح المنزل على اليسار 3: // 180 درجة إلى السياق اليسرى. اتباع الاتجاه الطبيعي للهاتف المحمول): السياق. 8: / / عكس الوقت في اتجاه عقارب الساعة 90 درجة.ثم قم بتحميل الصورة وابحث عن أن الصورة تحت iOS طبيعية.
يرد الرمز الكامل أدناه:
$ ('input [type = file]'). /i max_wh = 800 ؛ ؛ 80 ؛ .HIGHT = العرض ؛ 180 درجة إلى اليسار متصل. للهاتف. Context. Image/jpeg '، Question/100) ؛ )}}) ؛ما سبق هو كل محتويات هذا المقال.