Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วิธีแก้ไขข้อผิดพลาด getImageData() 'The canvas has been tainted by cross-origin data' ใน HTML


แอตทริบิวต์ crossOrigin อนุญาตให้ภาพที่โหลดจากต้นทางภายนอก (external origins) ถูกใช้ใน canvas เหมือนกับที่โหลดจากต้นทางปัจจุบัน

การใช้ภาพโดยไม่มีการอนุมัติ CORS จะทำให้ canvas ถูกปนเปื้อน (taint) เมื่อ canvas ถูกปนเปื้อนแล้ว คุณจะไม่สามารถดึงข้อมูลกลับออกจาก canvas ได้อีก การโหลด canvas จากโดเมน cross-origin จะทำให้ canvas ถูกปนเปื้อน

คุณสามารถป้องกันได้โดยการตั้งค่า:

img.crossOrigin = "Anonymous";

สิ่งนี้จะทำงานหากเซิร์ฟเวอร์ระยะไกลตั้งค่า header อย่างเหมาะสม:

Access-Control-Allow-Origin "*"