المتطلبات: حفظ محتوى HTML5 كصور
الفكرة: قم بإنشاء صور base64 من خلال الرسم على القماش، اضغط لفترة طويلة للحفظ على المستوى المحلي
المشكلة: يحظر Canvas عبر النطاقات، ولا يمكن للضغط الطويل على Android WeChat حفظ صور base64، ويتم ضغط الصور التي يسحبها الخادم
2. قضايا محددةالسؤال 1: يُحظر استخدام Canvas عبر النطاقات. إذا كانت الصورة تأتي من نطاقات أخرى، فسيؤدي الاتصال بـ toDataURL() إلى حدوث خطأ.
الحل: يمكن للعلامة <img> حل المشكلات عبر النطاقات عن طريق تقديم سمة crossOrigin، أي crossOrigin=Anonymous أو crossOrigin=*. يرجى ملاحظة أن إعداد "Anonymous" في بيئة Q للجوال غير مدعوم ويجب تعيينه إلى '*' إذا تم استخدام crossorigin=anonymous، فسيكون ذلك مكافئًا لـ CORS المجهول
المشكلة الثانية: لا يمكن لعلامة <img> مع مجموعة crossOrigin سحب الصور عبر النطاقات ولا يمكن تشغيل img.onload.
الحل: لإعادة التوجيه في الخلفية أو وكيل nigix، قم بتعيين Access-Control-Allow-Origin: wx.qlogo.cn للسماح لصور خادم الموارد الثابتة بعبور المجالات. يحل هذا الإعداد مشكلة الحصول على صور عبر المجال. (الصورة هنا هي اسم المجال الرمزي للمستخدم wx.qlogo.cn، الذي يحتوي على مشكلات عبر النطاقات)
السؤال 3: لا يمكن حفظ صور Base64 بالضغط لفترة طويلة على WeChat h5 على هاتف Android
الحل: قم بتحميل صورة base64 المرسومة بواسطة اللوحة القماشية إلى الخادم، ثم احصل على صورة png (jpg) من الخادم. وهذا النهج أكثر إزعاجا، ويتعين علينا إيجاد سبل لتحسينه لاحقا.
المشكلة 4: الصور التي تم تحميلها على الخادم مضغوطة بشدة
الحل: ستحتوي الصور التي تم تحميلها على عدة موارد على الخادم، بمستويات ضغط مختلفة. يمكنك الحصول على صور ذات وحدات بكسل أكثر وضوحًا من الدليل "http://img10.360buyimg.com/promotepic/".
السؤال 5: الضغط لفترة طويلة على رابط رمز الاستجابة السريعة المرسوم (//wqs.jd.com/xxx) لا يمكن الدخول مباشرة إلى الصفحة.
الحل: عند تحديد رابط رمز QR المراد رسمه، يجب عليك إضافة http: وإلا سيتم التعرف على رمز QR كنص.
// رسم جزء من الكود على القماش: var picurl = http://wx.qlogo.cn/mmopen/OicsrgN57fqDxImI3icnMeSXRfVUQRueHcxRRuWG0O1Ea1bNyBPKKKLeq5FiaXFWOdsltVe1R1PtJ2EtsDHYDjHgQ/0; var img = new Image, Canvas = document.createElement(canvas)، ctx = Canvas.getContext(2d)، // راجع السؤال 2 لمعرفة وكيل nigix في الخلفية src = picurl.replace(http://wx.qlogo.cn,//wq.jd.com) // لحل مشكلة عدم إمكانية قراءة toDataURL عبر المجال، راجع السؤال 1 img.crossOrigin = Anonymous; // التحميل المسبق لموارد الصورة img.onload = function() { Canvas.width = img.width; سرك;جزء من كود تحميل الصور:
// راجع السؤال 3 لتحميل الصور $.ajax({ type: 'POST', url:loadJs.addToken('http://wq.jd.com/activetmp/promotepic/promoteaddpic', j132), data: { filename : new Date().getTime()+''+Math.floor(Math.random()*10000) + '.jpg'، المحتوى: base64pic، نشط: shotpic20160901 }, نوع البيانات: 'json', xhrFields: { withCredentials: true }, Success: function(data) { if (picdata.id == 1 && picdata.msg) { // مسار الصورة لمسار البادئة هذا هو الأكثر مشاهدة للسؤال 4 من أجل الوضوح var imgPre = 'http://img10.360buyimg.com/promotepic/'; // رابط العنوان الكامل لربط عنوان الصورة var photo = imgPre + picdata.msg; $(#cardImg)[0].onload = function() { // للقيام بمنطق الأعمال}; $(#cardImg).attr(src ,photo } }, error:function(data){ }});ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.