दिलचस्प पोस्ट
नाम के जावास्क्रिप्ट चर के एक्सेस का मान? कुल गिनती पाने के लिए मोंगोडीबी में कुल योग कैसे करें? पायथन से जावा कॉलिंग मेरी JLabel क्यों नहीं दिख रहा है नेविगेशन नियंत्रक में वापस बटन के लिए कार्रवाई सेट करना निजी अंतिम स्थिर विशेषता बनाम निजी अंतिम विशेषता डीएलएल के x64 या x32 संस्करण को लोड करने के लिए साइड-बाय-साउन्ड असेंबलियों का उपयोग करना गेरिट और हडसन के लिए एसएसएच कुंजी बनाना क्यों करता है। जेएसन () एक आक्षेप में वापस आ जाता है अगर वस्तु में शाब्दिक? प्रोग्रामिंग भाषा के रूप में आर कैसे सीखें? फ़्लोटिंग मान प्रिंट करने के लिए printf का उपयोग करना कैसे PHP में कोड इंजेक्शन हमलों को रोकने के लिए? कैसे मोंगोज़ के साथ एक डेटाबेस को छोड़ सकता है? JTable में एक पंक्ति का पृष्ठभूमि रंग बदलें कोरडेटा: चेतावनी: नामांकित वर्ग लोड करने में असमर्थ

क्रॉस-मूल डेटा द्वारा दूषित कैनवास

मैं तृतीय-पक्ष साइट से एक गति jpeg लोड कर रहा हूं, जिस पर मैं विश्वास कर सकता हूं। मैं getImageData() को getImageData() करने का प्रयास कर रहा हूं getImageData() लेकिन ब्राउज़र (क्रोम 23.0) शिकायत करता है कि:

 Unable to get image data from canvas because the canvas has been tainted by cross-origin data. 

SO पर कुछ समान प्रश्न हैं, लेकिन वे स्थानीय फ़ाइल का उपयोग कर रहे हैं और मैं तृतीय पक्ष मीडिया का उपयोग कर रहा हूं मेरी स्क्रिप्ट साझा सर्वर पर चलती है और मेरे पास रिमोट सर्वर नहीं है I

मैंने कोशिश की है img.crossOrigin = 'Anonymous' या img.crossOrigin = '' ( img.crossOrigin = '' बारे में क्रोमियम ब्लॉग पर यह पोस्ट देखें), लेकिन इससे मदद नहीं मिली। क्रॉस-मूल डेटा के साथ एक कैनवास पर मैं कैसे getImageData कर सकता हूं? धन्यवाद!

Solutions Collecting From Web of "क्रॉस-मूल डेटा द्वारा दूषित कैनवास"

एक बार दूषित होने के बाद आप क्रॉस ऑग्रीिन फ्लैग को रीसेट नहीं कर सकते, लेकिन यदि आप पहले से जानते हैं कि छवि क्या है तो आप इसे एक डेटा यूआरएल में बदल सकते हैं, देखें एक कैनवास में डेटा यूआरएल से एक चित्र खींचना

लेकिन नहीं, आप सीओआरएस का समर्थन नहीं करते हैं, जो बाहरी स्रोतों से getImageData () का उपयोग नहीं कर सकते हैं और नहीं करना चाहिए

हालांकि सवाल बहुत बूढ़ा है, समस्या बनी हुई है और वेब पर इसे हल करने के लिए बहुत कम है। मैं एक समाधान के साथ आया जिसे मैं साझा करना चाहता हूं:

आप पहली बार crossorigin एट्रिब्यूट के बिना इमेज (या वीडियो) का उपयोग कर सकते हैं और अगर आप crossorigin द्वारा उसी संसाधन के माध्यम से एक सिर अनुरोध प्राप्त कर सकते हैं। यदि वह विफल रहता है, तो आप संसाधन का उपयोग नहीं कर सकते। यदि यह सफल होता है तो आप उस विशेषता को जोड़ सकते हैं और छवि / वीडियो के स्रोत को पुन: सेट कर सकते हैं, जो एक टाइमस्टैम्प संलग्न करता है जो इसे पुनः लोड करता है।

यह समाधान आपको उपयोगकर्ता को अपना संसाधन दिखाने की अनुमति देता है और यदि सीओआरएस समर्थित नहीं है तो कुछ फ़ंक्शंस को छूटे।

HTML:

 <img id="testImage" src="path/to/image.png?_t=1234"> 

जावास्क्रिप्ट:

 var target = $("#testImage")[0]; currentSrcUrl = target.src.split("_t=").join("_t=1"); // add a leading 1 to the ts $.ajax({ url: currentSrcUrl, type:'HEAD', withCredentials: true }) .done(function() { // things worked out, we can add the CORS attribute and reset the source target.crossOrigin = "anonymous"; target.src = currentSrcUrl; console.warn("Download enabled - CORS Headers present or not required"); /* show make-image-out-of-canvas-functions here */ }) .fail(function() { console.warn("Download disabled - CORS Headers missing"); /* ... or hide make-image-out-of-canvas-functions here */ }); 

परीक्षण और IE10 + 11 और वर्तमान क्रोम 31, एफएफ 25, सफारी 6 (डेस्कटॉप) में काम कर रहे हैं। आईई 10 और एफएफ में आपको एक समस्या आ सकती है अगर और केवल अगर आप http-files को https-script से एक्सेस करने का प्रयास करते हैं मुझे इसके लिए एक वैकल्पिक हल के बारे में नहीं पता है

जनवरी 2014 का अद्यतन करें:

इसके लिए आवश्यक CORS हेडर निम्नानुसार होना चाहिए (अपाचे कॉन्फ़िग सिंटैक्स):

 Header set Access-Control-Allow-Origin "*" Header set Access-Control-Allow-Headers "referer, range, accept-encoding, x-requested-with" 

एक्स-हेडर केवल एजेक्स अनुरोध के लिए आवश्यक है। यह सभी के द्वारा उपयोग नहीं किया जाता है, लेकिन जितने दूर मैं बता सकता हूं

इसके अलावा यह भी ध्यान देने योग्य है कि अगर सीओआरएस स्थानीय रूप से काम कर रही है तो सीओआरएस लागू होगा यदि संसाधन उसी निर्देशिका में है जिसकी आप index.html फ़ाइल के साथ काम कर रहे हैं। मेरे लिए इसका मतलब यह है कि सीओआरएस समस्याएं गायब हो गईं जब मैंने इसे अपने सर्वर पर अपलोड किया, क्योंकि उसके पास एक डोमेन है।

आप कैनवास पर छवि के बेस 64 का उपयोग कर सकते हैं, बेस64 में परिवर्तित करते समय आप क्रॉस-मूल समस्या से बचने के लिए अपनी छवि पथ से पहले एक प्रॉक्सी यूआरएल ( https://cors-anywhere.herokuapp.com/ ) का उपयोग कर सकते हैं।

पूर्ण विवरण यहां देखें

https://stackoverflow.com/a/44199382/5172571

 var getDataUri = function (targetUrl, callback) { var xhr = new XMLHttpRequest(); xhr.onload = function () { var reader = new FileReader(); reader.onloadend = function () { callback(reader.result); }; reader.readAsDataURL(xhr.response); }; var proxyUrl = 'https://cors-anywhere.herokuapp.com/'; xhr.open('GET', proxyUrl + targetUrl); xhr.responseType = 'blob'; xhr.send(); }; getDataUri(path, function (base64) { // base64 availlable here })