คำอธิบายโดยละเอียดของการฝึกหลบหนีข้ามโดเมนของ Canvas

วิธีแก้ปัญหาข้ามโดเมน Canvas? ที่นี่เราบันทึกปัญหาข้ามโดเมนและแนวทางแก้ไขที่พบในระหว่างการวาดภาพโดยใช้ Canvas

มาดูวิธีการนำไปใช้กันก่อน

รูปภาพเป้าหมายโดยทั่วไปจะประกอบด้วยรูปภาพ + ข้อความ ไม่ว่าจะเป็นรูปภาพขนาดต่างๆ หรือข้อความที่คาดเดาไม่ได้ ก็สามารถทำได้โดยใช้เมธอด canvas api DrawImage และ fillText

กระบวนการพื้นฐานมีดังนี้:

1. รับบริบทแคนวาส--ctx

 const canvas = document.querySelector(ตัวเลือก)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 มี 3 วิธีในการใช้พารามิเตอร์ สำหรับการใช้งานเฉพาะ คุณสามารถตรวจสอบเอกสารประกอบ MDN

3. รับข้อมูลรูปภาพ

เพียงเรียกเมธอด toBlob(), toDataURL() หรือ getImageData() ที่จัดทำโดยวัตถุ HTMLCanvasElement DOM

 canvas.toBlob(blob => { // the blob you want}, mimeType, encoderOptions)

ค่าเริ่มต้นของ mimeType ที่นี่คือ image/png encoderOptions ระบุคุณภาพของภาพและสามารถใช้สำหรับการบีบอัดได้ แต่รูปแบบ mimeType ต้องเป็น image/jpeg หรือ image/webp

ภายใต้สถานการณ์ปกติ หากเราต้องการส่งออกภาพที่วาด เราสามารถเรียกเมธอด toBlob(), toDataURL() หรือ getImageData() ของ canvas เพื่อรับข้อมูลรูปภาพได้ อย่างไรก็ตาม จะน่าอายเล็กน้อยเมื่อต้องเจอกับภาพข้ามโดเมน ข้อผิดพลาดต่อไปนี้อาจถูกรายงาน:

ไม่สามารถดำเนินการ '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 = รูปภาพใหม่ () image.crossOrigin = 'Anonymous'image.src = src

ด้วยวิธีนี้ คุณสามารถรับข้อมูลรูปภาพได้ หากคุณไม่พบ ให้ใช้ทรัพยากรจากโดเมนเดียวกัน~

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network