تقدم هذه المقالة الحل لمشكلة الإبلاغ عن خطأ toDataURL() عند تقديم صور عبر النطاقات في Canvas، وأود مشاركتها معك، والتفاصيل هي كما يلي:
【مشهد】
عندما يفتح مستخدم صفحة ويب، فإنه يطلب الصور على Tencent COS (خادم الصور). الرسم باستخدام القماش.
يمكن للمستخدم بعد ذلك إعادة تحديد الصورة واقتصاصها وتحميلها.
【سؤال】
عند تحميل الصورة لأول مرة، لا توجد مشكلة في القص والرسم بعد تحديد صورة جديدة. ولكن فشل التحميل بسبب الخطأ التالي:
فشل تنفيذ 'toDataURL' على 'HTMLCanvasElement': لا يجوز تصدير اللوحات القماشية الملوثة.
بعد الفهم، تحتاج إلى تعيين الحقل crossOrigin عند الإشارة إلى الصورة لأول مرة:
var c=document.getElementById(cover_show); var img=new Image(); img.src=http://vsqx-cover-xxxxxx.coscd.myqcloud.com/+this.vsqx_uid+.jpg; : img.setAttribute(crossOrigin,'anonymous'); img.onload = function(){ var cxt=c.getContext(2d);ثم قم بتشغيله مرة أخرى. لقد وجدت أن الصورة لم يتم عرضها عند تحميلها لأول مرة. . .
خطأ وحدة التحكم كما يلي:
【الحل النهائي】
قم بتسجيل الدخول إلى Tencent Cloud COS، وابحث عن هذه المجموعة، وقم بإعداد الوصول عبر النطاقات CORS. (وينطبق الشيء نفسه على خوادم PHP/JAVA الأخرى)
الاختبار مرة أخرى: تم عرض الصورة بنجاح وتم تحميل الصورة بنجاح.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.