عند رسم صورة رابط خارجي في اللوحة القماشية، سنواجه مشكلة عبر المجالات.
الأمثلة هي كما يلي:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>crossorigin</title></head><body> <canvas width=600 height=300 id=canvas>< /canvas> <img id=image <script> var Canvas = document.getElementById('canvas'); var image = new Image(); image.onload = function() { ctx.drawImage(image, 0, 0); document.getElementById('image').src = Canvas.toDataURL('image/png' }); ; الصورة.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg'; </script></body>عند فتح هذه الصفحة في المتصفح ستجد هذه المشكلة:
DOMException لم يتم اكتشافه: فشل تنفيذ 'toDataURL' على 'HTMLCanvasElement': قد لا يتم تصدير اللوحات القماشية الملوثة.
هذا مقيد بسياسة CORS، وستكون هناك مشكلات عبر المجالات، على الرغم من إمكانية استخدام الصور، إلا أن الرسم على اللوحة القماشية سيؤدي إلى تلويث اللوحة القماشية، على سبيل المثال، لا يمكن استخراج البيانات من اللوحة القماشية. لا يمكن استخدام قماش toBlob() toDataURL() أو طريقة getImageData()؛ سيتم طرح خطأ الأمان أعلاه عند استخدام هذه الطرق
هذه مشكلة مزعجة، ولكن لحسن الحظ أضاف img السمة crossorigin، التي تحدد ما إذا كانت وظيفة CORS ممكّنة أثناء عملية الحصول على الصور:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>crossorigin</title></head><body> <canvas width=600 height=300 id=canvas>< /canvas> <img id=image <script> var Canvas = document.getElementById('canvas'); var image = new Image(); image.setAttribute('crossorigin', 'anonymous'); image.onload = function() { ctx.drawImage(image, 0, 0); = Canvas.toDataURL('image/png' }; image.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg'; </script></body>بمقارنة الجزأين أعلاه من كود JS، ستجد هذا السطر الإضافي:
image.setAttribute('crossorigin', 'anonymous');الأمر بهذه البساطة، الحل الأمثل!
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.