أذونات موارد الصور عبر المجال (صورة ممكّنة لـ CORS)

يقدم مستند مواصفات HTML سمة crossorigin للصور من خلال تعيين CORS لمعلومات الرأس المناسبة، ويمكن تحميل صور img من مواقع أخرى واستخدامها في اللوحة القماشية، تمامًا كما تم تنزيلها مباشرة من الموقع الحالي (الأصل الحالي).

للحصول على تفاصيل حول استخدام سمات crossorigin، يرجى الرجوع إلى سمات إعدادات CORS.

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

وهذا في الواقع لحماية المعلومات الشخصية للمستخدمين وتجنب تحميل معلومات صور المستخدمين من مواقع الويب البعيدة دون إذن، مما يتسبب في تسرب الخصوصية.

(ملاحظة المترجم: إذا قام المستخدم بتسجيل الدخول إلى مواقع الشبكات الاجتماعية مثل QQ، وإذا لم يتم توفير الحماية، فقد يستخدم موقع الويب Canvas للحصول على معلومات صورة المستخدم وتحميلها بعد فتح موقع ويب، مما يتسبب في التسرب.)

أولاً، يجب أن يقوم خادم الصور بتعيين رأس الاستجابة Access-Control-Allow-Origin المقابل. أضف سمة crossOrigin لعنصر img إلى رأس الطلب. على سبيل المثال، يمكن لخادم Apache نسخ معلومات التكوين في تكوينات خادم HTML5 Boilerplate Apache للاستجابة:

 <IfModule mod_setenvif.c> <IfModule mod_headers.c> <FilesMatch /.(cur|gif|ico|jpe?g|png|svgz?|webp)$> SetEnvIf Origin: IS_CORS مجموعة الرأس Access-Control-Allow-Origin * env=IS_CORS </FilesMatch> </IfModule></IfModule>

بعد تفعيل هذه الإعدادات، يمكنك حفظ الصور من مواقع أخرى إلى وحدة تخزين DOM (أو أماكن أخرى) تمامًا مثل موارد هذا الموقع.

 var img = new Image, Canvas = document.createElement(canvas), ctx = Canvas.getContext(2d), src = http://example.com/image; // عنوان الصورة المحدد img.crossOrigin = Anonymous;img = function() { Canvas.width = img.width; 0 ); localStorage.setItem( saveImageData, Canvas.toDataURL(image/png) );}img.src = src;// تأكد من أن الصورة المخزنة مؤقتًا تؤدي أيضًا إلى تشغيل حدث التحميل if ( img.Complete || img.complete == = غير محدد ) { img.src = data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==; img.src = src;}

توافق المتصفح

سطح المكتب

متحرك

أنظر أيضا

Chrome: استخدام الصور ذات الأصل المشترك في WebGL

سمة مواصفات HTML-crossorigin

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.