दिलचस्प पोस्ट
सेलेनियम वेब ड्रिवर और ड्रॉपडाउन बॉक्स PHPUnit परीक्षणों के लिए "वेब इंटरफ़ेस"? तेज़ स्ट्रिंग में डेटा को स्विफ्ट में कैसे परिवर्तित करें सीएमवाइके से आरजीबी में सही ढंग से कैसे परिवर्तित करें? कैसे सी # का उपयोग कर HTML टैग को साफ करने के लिए कैसे पता लगाया जा सकता है कि जब एक विंडोज़ फार्म कम किया जा रहा है? पायथन: रेगेक्स के साथ नेस्टेड कोष्ठक से मिलान कैसे करें? मैं JFileChooser को एक निर्देशिका में कैसे प्रतिबंधित कर सकता हूं? PDOException SQLSTATE ऐसा कोई फ़ाइल या निर्देशिका नहीं है पायथन 2 और पायथन 3 में exec फ़ंक्शन का व्यवहार शैल स्क्रिप्ट एन्कोडिंग और रेखा के अंत के प्रति संवेदनशील हैं? एक क्वेरी में एएनएसआई 1992 के जॉन्स और कमांड्स को मिलाते हुए ऑब्जेक्ट और कैमरे के बीच की दूरी जानने के लिए, किसी छवि से वास्तविक वस्तु का आकार कैसे प्राप्त करें? 'का प्रयोग' कथन नामस्थान के अंदर या बाहर होना चाहिए? एंड्रॉइड संवाद, बटन दबाए जाने पर संवाद को खुले रखें

एचटीएमएल 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 के व्यवहार को समझ में नहीं आया।

Solutions Collecting From Web of "एचटीएमएल 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>