مقدمة: لقد صنعت مؤخرًا صورًا متنقلة مع Canvas Synthetic Pictures. تلخص الطريقة على النحو التالي:
1.وصف المشكلة: نظرًا لأن عرض Canvas وارتفاعه يمكن أن يضعوا قيم PX فقط ولا يدعم وحدات REM ، فمن الصعب الوصول إلى تأثير القماش المغطى بشاشات كاملة عندما تكون دقة شاشة الجهاز المحمول معقدة. الحل: احصل على قيمة عرض العميل لشاشة الهاتف المحمول من خلال JS واعطها إلى قماش لتحقيق تأثير تكييف الشاشة الكاملة ؛
var clientwidth = document.documentElement.clientwidth ؛ px ') ؛2. صورة تخليق قماش الظاهرة ظاهرة ضبابية
وصف المشكلة: هناك مشكلة غامضة مع الصور التي تم إنشاؤها بواسطة قماش ، خاصة إذا كانت هناك رموز QR على الصورة ، والتي تحتاج إلى التعرف عليها ، لا يمكن للمستخدمين التعرف عليها ؛
الحل: 1) يمكنك اقتباس المكون الإضافي hidpi-canvas.js لحل هذه المشكلة ؛
2) يمكنك أيضًا تعيين قيم العرض والارتفاع في نمط القماش لتعيين الحجم الذي تريده ، ثم تضخيم قيمة عرض وارتفاع القماش على التوالي.
3. عندما تكون الصور الاصطناعية اصطناعية ، تكون بعض الصور النموذجية فوضويةوصف المشكلة: عندما يقوم بعض هواتف Android بتصدير صورة Base64 من القماش ، يمكنها فقط عرض نصف صورة تأثير التأثير.
الحل: احصل على نسبة Pixel PR ، أحكم على النموذج. الحجم الأصلي.
// hidpi-canvas يوسع سمات القماش والارتفاع.4. مشكلة دوران صورة تحميل الهاتف المحمول iPhone
وصف المشكلة: أثناء الاختبار ، تبين أن هاتف iPhone المحمول الذي تم تحميله من الصور للتناوب ، ولن تحدث الصورة التي تم تحميلها من الإنترنت ، وأن Android طبيعي.
الحل: يمكن حل هذه المشكلة باستخدام سد exif.js.
ملف var = $ (this) [0]. files [0] ؛ ) ؛؛5. قماش يرسم صورًا متقاطعًا ولا يمكن تصدير BASE64 صور
وصف المشكلة: عندما تكون هناك صور لطلبات CrossDomain في القماش ، فإن صورة Base64 تفشل.
الحل: يجب حل هذا الخطأ مع الظهر والخلف.
var pageqrcodeimg = qrcodecanvas.todaurl ('image/jpg') ؛ 6. ستظهر الشاشة البيضاء عند رسم صور من قماشوصف المشكلة: يظهر حالة الشاشة البيضاء أحيانًا عندما ترسم القماش صورة.
الحل: أضف وظيفة ONLOAD إلى IMG ، ثم تنفيذ عملية الرسم بعد قراءة الصورة.
qrcodeimg.onload = function () {// ارسم صورة} 7 ، متصفح WeChat ، اضغط لفترة طويلة على الصورة ، لا يمكن حفظهاوصف المشكلة: لا يمكن حفظ الصورة التي تم إنشاؤها بواسطة Canvas.
الحل: اضغط على جودة الصورة عند تصدير صورة Base64.
var mycanvas = document.getElementById (main) ؛
PostScript: المشكلات الحالية التي واجهتها هي في الأساس.
ما سبق هو كل محتويات هذا المقال.