เมื่อวาดภาพลิงก์ภายนอกใน Canvas เราจะประสบปัญหาข้ามโดเมน
ตัวอย่างมีดังนี้:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>crossorigin</title></head><body> <canvas width=600 height=300 id=canvas>< /canvas> <img id=image <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var image = รูปภาพใหม่ (); image.onload = function () { ctx.drawImage (รูปภาพ, 0, 0); document.getElementById('image').src = canvas.toDataURL('image/png'); ; image.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg'; </script></body>เมื่อเปิดหน้านี้ในเบราว์เซอร์ คุณจะพบปัญหานี้:
DOMException ที่ไม่ถูกตรวจจับ: ไม่สามารถดำเนินการ 'toDataURL' บน 'HTMLCanvasElement': ผืนผ้าใบที่มีมลทินอาจไม่ถูกส่งออก
สิ่งนี้ถูกจำกัดโดยนโยบาย CORS และจะเกิดปัญหาข้ามโดเมน แม้ว่าจะสามารถใช้รูปภาพได้ แต่การวาดภาพลงบนผืนผ้าใบจะทำให้ผืนผ้าใบเสียหาย เมื่อผืนผ้าใบถูกปนเปื้อน ข้อมูลของผืนผ้าใบจะไม่สามารถแยกออกมาได้ ไม่สามารถใช้ canvas toBlob() ได้ toDataURL() หรือ getImageData() ข้อผิดพลาดด้านความปลอดภัยข้างต้นจะถูกส่งออกไปเมื่อใช้วิธีการเหล่านี้
นี่เป็นปัญหาที่น่าหนักใจ แต่โชคดีที่ img ได้เพิ่มแอตทริบิวต์ crossorigin ซึ่งกำหนดว่าฟังก์ชัน CORS ถูกเปิดใช้งานในระหว่างกระบวนการรับภาพหรือไม่:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>crossorigin</title></head><body> <canvas width=600 height=300 id=canvas>< /canvas> <img id=image <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var image = รูปภาพใหม่ (); image.setAttribute('crossorigin', 'anonymous'); image.onload = function() { ctx.drawImage(image, 0, 0); document.getElementById('image').src = canvas.toDataURL('image/png'); }; image.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg'; </script></body>เมื่อเปรียบเทียบโค้ด JS สองส่วนข้างต้น คุณจะพบบรรทัดพิเศษนี้:
image.setAttribute('crossorigin', 'anonymous');มันง่ายมาก เป็นโซลูชั่นที่สมบูรณ์แบบ!
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network