วิธีแก้ปัญหามลพิษข้ามโดเมนของผืนผ้าใบที่เกิดจากทรัพยากรรูปภาพที่ไม่อยู่ภายใต้ชื่อโดเมนเดียวกัน

เราต้องการวาดภาพซึ่งรวมถึงภาพพื้นหลังและโค้ด QR ที่สร้างขึ้นแบบไดนามิก หลักฐานก็คือภาพพื้นหลังเป็นทรัพยากรแบบคงที่ของโปรเจ็กต์นั้นเอง และโค้ด QR จะถูกสร้างขึ้นแบบไดนามิกโดยเซิร์ฟเวอร์ และทั้งสองนั้น ไม่อยู่ภายใต้ชื่อโดเมนเดียวกัน

วิธีแก้ไข: เปลี่ยนเส้นทางรูปภาพทั้งหมดไปยังชื่อโดเมนเดียวกัน:

 ให้นับ = 0;let ​​​​bgImg = document.creatElement('img');let qrImg = document.creatElement('img');bgImg.src = เปลี่ยนเส้นทางUrl('x.png');qrImg.src = เปลี่ยนเส้นทางUrl( 'y .png');[bgImg, qrImg].forEach((e) => { e.onload = () => { นับ ++; if (นับ === 2) { DrawerImg(bgImg, qrImg); DrawerImg (imgContent, qrContent, scaleBy = 2) { ให้ {bgImgW, bgImgH} = {375, 800}; {qrx, qry, qrw, qrh} = {20, 700, 50, 50}; ให้ Canvas = document.createElement('canvas'); ให้ ctx = Canvas.getContext(2d); Canvas.width = bgImgW * scaleBy; 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 Network