दिलचस्प पोस्ट
मैं कमांड लाइन से एक युद्ध में एक क्लास कैसे चलाऊँ? आदिम प्रकार 'लघु' – जावा में कास्टिंग रोबोट को एक फ़ॉर्म भरने से कैसे रोका जा सकता है? मैं .hprof फ़ाइल का विश्लेषण कैसे कर सकता हूं? एक सरणी में शीर्ष एन तत्वों को ढूंढें जावा में यूआरएल डीकोडिंग कैसे करें? रोबोट-राउटर के साथ ब्राउज़र में कैसे रोकें? डब्ल्यूआईटीएटी का उपयोग करके उस निर्देशिका में मनमाना फाइलों के साथ एक निर्देशिका प्राप्त करें एक उपनिर्देशिका से .htaccess पासवर्ड सुरक्षा कैसे निकालें मैं $ $ .getJSON फ़ंक्शन से एक वैरिएबल कैसे वापस कर सकता हूं सी – एक फंक्शन तर्क के रूप में एक 2d सरणी गुजर रहा है? किसी प्रदीप्ति द्वारा स्ट्रीम को सीमित करें स्विफ्ट के साथ एक सरल संग्रह दृश्य बनाने के लिए जेबस जावा ईई कंटेनर और एक एक्जिक्यूटर्स सर्विस NSURLRequest: डेटा पोस्ट करें और पोस्ट किए गए पृष्ठ को पढ़ें

एचटीएमएल 5 कैनवास में क्रॉस-मूल डेटा

मैं जेएस में एक छवि लोड कर रहा हूं और इसे एक कैनवास में खींचना ड्राइंग के बाद, मैं कैनवास से छवि डेटा पुनर्प्राप्त करता हूं:

var img = new Image(); img.onload = function() { canvas.drawImage(img, 0, 0); originalImageData = canvas.getImageData(0,0,width, height)); //chrome fails } img.src = 'picture.jpeg'; 

यह सफारी और फ़ायरफ़ॉक्स में पूरी तरह से काम करता है, लेकिन क्रोम में निम्न संदेश के साथ विफल रहता है:

कैनवास से छवि डेटा प्राप्त करने में असमर्थ क्योंकि कैनवास को क्रॉस-मूल डेटा द्वारा दूषित किया गया है।

जावास्क्रिप्ट फ़ाइल और छवि एक ही निर्देशिका में स्थित हैं, इसलिए मैं chorme के व्यवहार को समझ में नहीं आया।

वेब के समाधान से एकत्रित समाधान "एचटीएमएल 5 कैनवास में क्रॉस-मूल डेटा"

अपनी छवियों के लिए सीओआरएस ( क्रॉस-ओरिजिन रिसोर्स शेयरिंग ) को सक्षम करने के लिए, एचटीएमएच हेडर को इमेज रिस्पांस से गुजरती हैं:

 Access-Control-Allow-Origin: * 

मूल डोमेन और प्रोटोकॉल द्वारा निर्धारित किया जाता है (उदाहरण के लिए, http और https समान नहीं हैं) और स्क्रिप्ट का स्थान नहीं।

यदि आप स्थानीय रूप से फ़ाइल का उपयोग कर रहे हैं: // यह आम तौर पर हमेशा एक क्रॉस डोमेन समस्या के रूप में देखा जाता है; तो इसके माध्यम से जाने के लिए बेहतर है

 http://localhost/ 
 var img = new Image(); img.onload = function() { canvas.drawImage(img, 0, 0); originalImageData = canvas.getImageData(0,0,width, height)); //chrome will not fail } img.crossOrigin = 'http://profile.ak.fbcdn.net/crossdomain.xml';//crossdomain xml file, this is facebook example img.src = 'picture.jpeg'; 

उम्मीद है की यह मदद करेगा

फ़ाइल के साथ क्रॉस डोमेन समस्या को हल करने के लिए: //, आप पैरामीटर के साथ क्रोम शुरू कर सकते हैं

 --allow-file-access-from-files 
 var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); var img = new Image(); img.crossOrigin = "anonymous"; img.onload = function() { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); originalImageData = ctx.canvas.toDataURL(); } img.src = 'picture.jpeg'; 

उम्मीद है की यह मदद करेगा।

अगर सर्वर प्रतिक्रिया शीर्ष लेख में Access-Control-Allow-Origin: * , तो आप उसे क्लाइंट साइड से ठीक कर सकते हैं: छवि या वीडियो में एक विशेषता जोड़ें

 <img src="..." crossorigin="Anonymous" /> <video src="..." crossorigin="Anonymous"></video>