Canvas.toDataURL() एक सुरक्षा अपवाद क्यों फेंकता है?

HTML कैनवस के साथ काम करते समय, आपको एक हैरान करने वाले सुरक्षा अपवाद का सामना करना पड़ सकता है toDataURL() पद्धति का उपयोग करके कैनवास के बेस64 डेटा URL को पुनः प्राप्त करने का प्रयास किया जा रहा है। आइए इस त्रुटि के पीछे के कारण का पता लगाएं और एक समाधान खोजें।

toDataURL() विधि आपको कैनवास सामग्री को बेस64-एन्कोडेड स्ट्रिंग में बदलने की अनुमति देती है, जो किसी छवि को सहेजने या साझा करने के लिए उपयोगी हो सकती है। हालाँकि, यह समझना आवश्यक है कि यदि कैनवास तत्व को "मूल-अशुद्ध" माना जाता है तो यह विधि एक सुरक्षा अपवाद उठाती है। वेब पेज से भिन्न सर्वर से। आपके कोड स्निपेट में, छवि "www.ansearch.com" से लोड की गई है, जो वेब पेज से भिन्न मूल है।

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

इस समस्या को हल करने के लिए, आप यह सुनिश्चित कर सकते हैं कि कैनवास पर उपयोग की गई छवि वेब पेज के समान स्रोत से लोड किया गया है। इसका मतलब है छवि को अपने सर्वर पर होस्ट करना या सीडीएन का उपयोग करना जो छवि को उसी मूल से प्रस्तुत करता है। एक बार जब छवि मेल खाते मूल से लोड हो जाती है, तो toDataURL() विधि बिना किसी त्रुटि के काम करनी चाहिए।