كيفية تجنب الخطأ "تلوث اللوحة القماشية ببيانات مشتركة الأصل" في getImageData ()

عند استخدام getImageData ( ) لاسترداد بيانات البكسل من اللوحة القماشية، قد تواجه الخطأ "لقد تلوثت اللوحة القماشية ببيانات مشتركة الأصل." يحدث هذا الخطأ عند محاولتك الوصول إلى بيانات البيكسل الموجودة على لوحة تأثرت بالبيانات المحملة من مجال آخر.

لفهم سبب هذا الخطأ، ضع في اعتبارك وضع الحماية الأمني ​​المطبق في معظم المتصفحات. بشكل افتراضي، تقوم المتصفحات بتقييد الاتصال بين مصادر مختلفة، مما يعني أن البيانات المحملة من مجال واحد لا يمكن استخدامها بواسطة مجال آخر. إذا كان عنصر لوحة الرسم ملوثًا ببيانات من أصل مختلف، فسيتم اعتباره "ملوثًا".

إحدى الطرق الشائعة لتلويث لوحة الرسم هي تحميل صورة من عنوان URL للنطاق الفرعي، كما ذكرت في التعليمات البرمجية الخاصة بك. ولمنع حدوث هذا الخطأ هناك عدة خيارات:

1. قم بتعيين سمة "crossOrigin"

قم بتعيين سمة "crossOrigin" لعنصر الصورة بالقيمة المناسبة:

يسمح هذا للبرنامج النصي الخاص بك بالوصول إلى بيانات البكسل من الصورة، على افتراض أن الخادم البعيد يقوم بتعيين رؤوس CORS المناسبة.

2. تأكد من تعيين رؤوس CORS

على الخادم البعيد الذي يخدم الصورة، تأكد من أنه يرسل رؤوس CORS التالية:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: Content-Type

تمنح هذه الرؤوس إمكانية الوصول عبر الأصل إلى البرنامج النصي الخاص بك وتسمح له باسترداد بيانات الصورة من اللوحة القماشية.

3. استخدم خادم وكيل

إذا لم يكن تعيين رؤوس CORS على الخادم البعيد ممكنًا، فيمكنك استخدام خادم وكيل لتجاوز القيود عبر الأصل. يعمل الخادم الوكيل كوسيط بين البرنامج النصي الخاص بك والخادم البعيد، مما يسهل نقل البيانات بين مصادر مختلفة.

من خلال تنفيذ أحد هذه الحلول، يمكنك منع "تلويث اللوحة القماشية من خلال خطأ في بيانات الأصل" في getImageData() والوصول إلى بيانات البكسل من الصور المحملة من مجالات مختلفة.