เอกสารข้อกำหนด 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==;ความเข้ากันได้ของเบราว์เซอร์
เดสก์ท็อป
| คุณสมบัติ | โครเมียม | ไฟร์ฟอกซ์ (ตุ๊กแก) | อินเทอร์เน็ตเอ็กซ์พลอเรอร์ | โอเปร่า | ซาฟารี |
|---|---|---|---|---|---|
| การสนับสนุนขั้นพื้นฐาน | 13 | 8 | ไม่มีการสนับสนุน | ไม่มีการสนับสนุน | - |
มือถือ
| คุณสมบัติ | หุ่นยนต์ | Firefox มือถือ (ตุ๊กแก) | ไออี โมบาย | โอเปร่ามือถือ | ซาฟารีมือถือ |
|---|---|---|---|---|---|
| การสนับสนุนขั้นพื้นฐาน | - | - | - | - | - |
ดูเพิ่มเติม
Chrome: การใช้รูปภาพข้ามแหล่งกำเนิดใน WebGL
แอตทริบิวต์ HTML สเปค-crossorigin
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network