สิทธิ์ทรัพยากรรูปภาพข้ามโดเมน (รูปภาพที่เปิดใช้งาน CORS)

เอกสารข้อกำหนด HTML จะแนะนำแอตทริบิวต์ crossorigin สำหรับรูปภาพ ด้วยการตั้งค่าข้อมูลส่วนหัวที่เหมาะสม CORS ทำให้สามารถโหลดรูปภาพ img จากไซต์อื่นและใช้ในแคนวาสได้ เช่นเดียวกับการดาวน์โหลดโดยตรงจากไซต์ปัจจุบัน (ที่มาปัจจุบัน)

สำหรับรายละเอียดเกี่ยวกับการใช้แอตทริบิวต์ Crossorigin โปรดดูที่แอตทริบิวต์การตั้งค่า CORS

แม้ว่าจะเป็นไปได้ที่จะใช้รูปภาพบนผืนผ้าใบโดยไม่ได้รับอนุญาตจาก CORS แต่การทำเช่นนี้จะทำให้ผืนผ้าใบเสีย ตราบใดที่ผืนผ้าใบมีการปนเปื้อน จะไม่สามารถดึงข้อมูลออกจากผืนผ้าใบได้อีกต่อไป ซึ่งหมายความว่าจะไม่สามารถเรียกใช้เมธอด เช่น toBlob(), toDataURL() และ getImageData() ได้ ไม่เช่นนั้นจะเกิดข้อผิดพลาดด้านความปลอดภัย

จริงๆ แล้วนี่เป็นเพื่อปกป้องข้อมูลส่วนบุคคลของผู้ใช้และหลีกเลี่ยงการโหลดข้อมูลรูปภาพของผู้ใช้จากเว็บไซต์ระยะไกลโดยไม่ได้รับอนุญาต ทำให้เกิดการรั่วไหลของความเป็นส่วนตัว

(หมายเหตุผู้แปล: หากผู้ใช้ลงชื่อเข้าใช้เว็บไซต์โซเชียลเน็ตเวิร์ก เช่น QQ หากไม่มีการป้องกัน เว็บไซต์อาจใช้ Canvas เพื่อรับและอัปโหลดข้อมูลรูปภาพของผู้ใช้หลังจากเปิดเว็บไซต์ จึงทำให้เกิดการรั่วไหล)

ขั้นแรก เซิร์ฟเวอร์รูปภาพจะต้องตั้งค่าส่วนหัวการตอบสนอง Access-Control-Allow-Origin ที่สอดคล้องกัน เพิ่มแอตทริบิวต์ crossOrigin ขององค์ประกอบ img ลงในส่วนหัวของคำขอ ตัวอย่างเช่น เซิร์ฟเวอร์ Apache สามารถคัดลอกข้อมูลการกำหนดค่าในการกำหนดค่าเซิร์ฟเวอร์ Apache HTML5 Boilerplate เพื่อตอบสนอง:

 <IfModule mod_setenvif.c> <IfModule mod_headers.c> <FilesMatch /.(cur|gif|ico|jpe?g|png|svgz?|webp)$> SetEnvIf Origin : IS_CORS Header set Access-Control-Allow-Origin * env=IS_CORS </FilesMatch> </IfModule></IfModule>

หลังจากการตั้งค่าเหล่านี้มีผล คุณสามารถบันทึกรูปภาพจากไซต์อื่นไปยังที่เก็บข้อมูล DOM (หรือที่อื่น ๆ ) ได้เช่นเดียวกับแหล่งข้อมูลของไซต์นี้

 var img = รูปภาพใหม่, canvas = document.createElement(canvas), ctx = canvas.getContext(2d), src = http://example.com/image; // ที่อยู่รูปภาพเฉพาะ img.crossOrigin = Anonymous;img = function() { canvas.width = img.width; canvas.height = img.height; 0 ); localStorage.setItem( SavedImageData, canvas.toDataURL(image/png) );}img.src = src;// ตรวจสอบให้แน่ใจว่าอิมเมจที่แคชไว้ทริกเกอร์เหตุการณ์การโหลดด้วย หาก ( img.complete || img.complete == = ไม่ได้กำหนด ) { img.src = ข้อมูล: image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==;

ความเข้ากันได้ของเบราว์เซอร์

เดสก์ท็อป

มือถือ

ดูเพิ่มเติม

Chrome: การใช้รูปภาพข้ามแหล่งกำเนิดใน WebGL

แอตทริบิวต์ HTML สเปค-crossorigin

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