GetImageData() में त्रुटि "कैनवास क्रॉस-ओरिजिन डेटा द्वारा दूषित हो गया है" से कैसे बचें

getImageData का उपयोग करते समय( ) कैनवास से पिक्सेल डेटा पुनर्प्राप्त करने की विधि, आपको त्रुटि का सामना करना पड़ सकता है "कैनवास क्रॉस-ऑरिजिन डेटा द्वारा दूषित हो गया है।" यह त्रुटि तब होती है जब आप किसी कैनवास पर पिक्सेल डेटा तक पहुंचने का प्रयास करते हैं जो किसी अन्य डोमेन से लोड किए गए डेटा से प्रभावित होता है।

इस त्रुटि के कारण को समझने के लिए, अधिकांश ब्राउज़रों में लागू सुरक्षा सैंडबॉक्स पर विचार करें। डिफ़ॉल्ट रूप से, ब्राउज़र विभिन्न स्रोतों के बीच संचार को प्रतिबंधित करते हैं, जिसका अर्थ है कि एक डोमेन से लोड किया गया डेटा किसी अन्य डोमेन द्वारा उपयोग नहीं किया जा सकता है। यदि कोई कैनवास तत्व किसी भिन्न मूल के डेटा से दूषित है, तो इसे "दागी" माना जाता है। इस त्रुटि को रोकने के लिए, कई विकल्प हैं:

उचित मान के साथ छवि तत्व को "क्रॉसऑरिजिन" विशेषता निर्दिष्ट करें:

छवि परोसने वाले दूरस्थ सर्वर पर, सुनिश्चित करें कि यह निम्नलिखित CORS हेडर भेजता है:

एक्सेस-कंट्रोल-अनुमति-उत्पत्ति: * पहुंच-नियंत्रण-अनुमति-तरीके: प्राप्त करें एक्सेस-कंट्रोल-अनुमति-हेडर: सामग्री-प्रकार

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: Content-Type

यदि रिमोट सर्वर पर CORS हेडर सेट करना संभव नहीं है, तो आप क्रॉस-ऑरिजिन प्रतिबंध को बायपास करने के लिए प्रॉक्सी सर्वर का उपयोग कर सकते हैं। एक प्रॉक्सी सर्वर आपकी स्क्रिप्ट और रिमोट सर्वर के बीच मध्यस्थ के रूप में कार्य करता है, जो विभिन्न स्रोतों के बीच डेटा के हस्तांतरण की सुविधा प्रदान करता है। getImageData() में मूल डेटा" त्रुटि और विभिन्न डोमेन से लोड की गई छवियों से पिक्सेल डेटा तक पहुंच।