شرح تفصيلي لممارسة الهروب عبر النطاقات Canvas

كيفية حل مشكلة Canvas عبر المجال؟ نسجل هنا المشكلات والحلول عبر المجالات التي تمت مواجهتها أثناء الرسم باستخدام Canvas.

دعونا نلقي نظرة أولاً على طريقة التنفيذ.

تتكون الصورة المستهدفة عمومًا من صورة + نص. سواء كانت صورًا بأحجام مختلفة أو نصوصًا غير متوقعة، يمكن تحقيق ذلك باستخدام طريقتي Canvas API drawImage وfillText.

العملية الأساسية هي كما يلي:

1. احصل على سياق اللوحة القماشية-ctx

 قماش const = document.querySelector(selector)const ctx = Canvas.getContext('2d')

2. الرسم

تجاهل محتوى الصورة واستخدم drawImage مباشرةً لرسمه على اللوحة القماشية.

 const image = new Image()image.src = srcimage.onload = () => { ctx.save() // هنا نستخدم المعلمات التالية لاستدعاء this.ctx.drawImage(image, dx, dy, dWidth, dHeight ) هذا .ctx.restore()}

لدى drawImage ثلاث طرق لاستخدام المعلمات، لاستخدام محدد، يمكنك التحقق من وثائق MDN.

3. الحصول على بيانات الصورة

ما عليك سوى استدعاء الأسلوب toBlob() أو toDataURL() أو getImageData() الذي يوفره كائن HTMLCanvasElement DOM.

 Canvas.toBlob(blob => { // blob الذي تريده}، mimeType، encoderOptions)

القيمة الافتراضية لـ mimeType هنا هي image/png. تحدد encoderOptions جودة الصورة ويمكن استخدامها للضغط، ولكن تنسيق mimeType يجب أن يكون image/jpeg أو image/webp.

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

فشل تنفيذ 'toBlob' على 'HTMLCanvasElement': قد لا يتم تصدير اللوحات القماشية الملوثة.

أو

تم حظر الوصول إلى الصورة على "https://your.image.src" من الأصل "https://your.website" بواسطة سياسة CORS: لا يوجد رأس "Access-Control-Allow-Origin" على المورد المطلوب .

دعونا ننظر إلى الوضع الثاني أولا.

التحكم في الوصول-السماح-الأصل

إذا كنت تستخدم موارد صور معينة عبر المجالات ولم تستجيب الخدمة بشكل صحيح لرأس Access-Control-Allow-Origin، فسيتم الإبلاغ عن رسالة الخطأ التالية:

تم حظر الوصول إلى الصورة على "https://your.image.src" من الأصل "https://your.website" بواسطة سياسة CORS: لا يوجد رأس "Access-Control-Allow-Origin" على المورد المطلوب .

هذا يعني أن الوصول عبر النطاقات غير مسموح به، ثم يمكنك محاولة السماح للخلفية بتعديل قيمة Access-Control-Allow-Origin إلى * أو your.website، أو استخدام نفس مورد المجال بدلاً من ذلك (فكر في الأمر؟) .

بعد ذلك، دعونا نحل الوضع الأول.

 img.crossOrigin = 'مجهول'

من أجل تجنب تسرب خصوصية المستخدم الناتج عن سحب معلومات موقع الويب البعيد دون إذن (مثل نظام تحديد المواقع العالمي (GPS) والمعلومات الأخرى، يمكنك البحث في Exif للحصول على التفاصيل)، سيتم ظهور خطأ أمني عند الاتصال بـ toBlob() أو toDataURL() أو getImageData() من القماش:

فشل تنفيذ 'toBlob' على 'HTMLCanvasElement': قد لا يتم تصدير اللوحات القماشية الملوثة.

إذا كانت خدمة الصور الخاصة بك تسمح بالاستخدام عبر الأصل (إذا لم يكن الأمر كذلك، راجع المقالة السابقة)، فيجب عليك التفكير في إضافة سمة crossOrigin إلى عنصر img، أي:

 const image = new Image()image.crossOrigin = 'Anonymous'image.src = src

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

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