कैनवास toDataURL() में क्रॉस-ओरिजिनल समस्या

पर्याप्त आराम सुनिश्चित करने के बावजूद, कैनवास.toDataURL() का उपयोग करते समय उपयोगकर्ताओं को सुरक्षा अपवादों का सामना करना पड़ सकता है। . निम्नलिखित कोड पर विचार करें:

var frame = document.getElementById("viewer");
frame.width = 100;
frame.height = 100;

var ctx = frame.getContext("2d");
var img = new Image();
img.src = "http://www.ansearch.com/images/interface/item/small/image.png"

img.onload = function() {
    // Draw image
    ctx.drawImage(img, 0, 0)

    // Security exception occurs here:
    window.open(frame.toDataURL("image/png"));
}

यह कोड एक अलग सर्वर से एक छवि को एक नई विंडो में बेस64 डेटा के रूप में खोलने का प्रयास करता है, लेकिन यह एक SECURITY_ERR अपवाद उठाता है।

विनिर्देशों के अनुसार, toDataURL() विधि यदि कैनवास तत्व का मूल-स्वच्छ ध्वज गलत पर सेट है तो वह SECURITY_ERR अपवाद फेंकता है। जब कोई छवि किसी भिन्न सर्वर से लोड की जाती है, तो कैनवास दूषित हो जाता है और उसका मूल-स्वच्छ ध्वज गलत पर सेट हो जाता है।

इसलिए, यहां से प्राप्त छवियों के लिए बेस64 डेटा प्राप्त करने के लिए सीधे toDataURL() का उपयोग करना संभव नहीं है विभिन्न सर्वर. क्रॉस-ओरिजिनल छवियों को संभालने के लिए वैकल्पिक तकनीकें, जैसे CORS या प्रॉक्सी, आवश्यक हो सकती हैं।