تقدم هذه المقالة ملخصًا لمواقف N لفتح الصور المصدرة عبر المجال من اللوحة القماشية، وأود مشاركتها معك، والتفاصيل هي كما يلي:
DOMException لم يتم اكتشافه: فشل تنفيذ 'toDataURL' على 'HTMLCanvasElement': قد لا يتم تصدير اللوحات القماشية الملوثة.
أعتقد أن الجميع واجهوا الخطأ أعلاه عند استخدام اللوحة القماشية لتنفيذ toDataUrl لتصدير الصور. يختلف اسم مجال خادم الصور عن الاسم الحالي لأن سياسة الأمان لا تسمح بتصدير الصور عبر النطاقات.
هناك طرق عديدة لحل مشكلة الامتداد هذه 1. تحويل الصورة إلى base64عندما تصبح الصورة base64، ليست هناك حاجة للحديث عن اسم المجال، وبطبيعة الحال لا يوجد مجال مشترك
ملاحظة: قم بتحويل الصورة إلى base64 وزيادة حجم ملف الصورة، إذا كانت الصورة كبيرة نسبيًا، فلا يُنصح بالتحويل إلى base64، وإلا فسيؤدي ذلك إلى زيادة وقت تحميل صفحة الويب والتأثير على سرعة موقع الويب للصور الصغيرة.
2. تسمح إعدادات خادم الصور بالتقاطع بين المجالات أي أن رأس الاستجابة الذي يتم إرجاعه عن طريق طلب الصورة يحتوي Access-Control-Allow-Origin مع تعيين القيمة على * (السماح بالطلبات عبر النطاقات من جميع مواقع الويب) أو اسم مجال موقع الويب الحالي (السماح فقط بالطلبات عبر النطاقات ضمن أسماء النطاقات الثابتة)، ثم تقوم الواجهة الأمامية بتحميل الصورة بتعيين سمة الأصل المشترك للصورة img.crossOrigin=anonymous。 الكود المحدد هو كما يلي
var Canvas = document.getElementById('myCanvas') var ctx = Canvas.getContext('2d') var img = document.createElement('img') img.crossOrigin=anonymous img.src = 'https://p4-q.mafengwo.net/s12/M00/CA/3B/wKgED1w8fL6ADk16AAXyDaz2bdU61.jpeg' img.onload = function() { ctx.drawImage(img,0,0,500,300); console.log(canvas. toDataURL()) }وبهذه الطريقة، يمكن حل المشكلات عبر النطاقات بسهولة من خلال الجمع بين كل من الأمام والخلف
3. ضع الصورة تحت اسم المجال الحاليسامحني على الضحك غير اللطيف، فهذا بالفعل حل للمشكلة.
ولكن في المشاريع الفعلية، يتم تخزين الصور بشكل عام على CDN، لذا فإن هذه الطريقة غير واقعية.