حل لتلوث اللوحة القماشية عبر النطاقات الناتج عن موارد الصور التي لا تندرج تحت نفس اسم المجال

نريد رسم صورة تتضمن صورة خلفية ورمز الاستجابة السريعة الذي تم إنشاؤه ديناميكيًا. الفرضية هي أن صورة الخلفية هي مورد ثابت للمشروع نفسه، ويتم إنشاء رمز الاستجابة السريعة ديناميكيًا بواسطة الخادم، وكلاهما. ليس تحت نفس اسم المجال.

الحل: إعادة توجيه كافة الصور إلى نفس اسم المجال:

 Let count = 0;let ​​​​bgImg = document.creatElement('img');let qrImg = document.creatElement('img');bgImg.src = redirectUrl('x.png');qrImg.src = redirectUrl( 'y .png');[bgImg, qrImg].forEach((e) => { e.onload = () => { count ++; if (count === 2) { drawImg(bgImg, } }}) function redirectUrl (url) { return 'https://xxx/view?fileUrl=' + encodeURIComponent(url);} drawImg (imgContent, qrContent,scaleBy = 2) { Let {bgImgW, bgImgH} = {375, 800}; {qrx, qry, qrw, qrh} = {20, 700, 50, 50}; Let Canvas = document.createElement('canvas'); Canvas.height= bgImgH *scaleBy; ctx.drawImage(imgContent, 0, 0, bgImgW *scaleBy, bgImgH *scaleBy); ctx.drawImage(qrContent, qrx *scaleBy, qry *scaleBy, qrw *scaleBy, qrh *scaleBy); Canvas.toDataURL(); document.body.appendChild(nodeI)}

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