एचटीएमएल 5 कैनवास

Question

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

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'; 

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

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

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

Answer 1

CORS (Cross-Origin Resource Sharing) को सक्षम करने के लिए अपनी छवियों को छवि प्रतिक्रिया के साथ HTTP हेडर पारित:

Access-Control-Allow-Origin: * 

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

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

http://localhost/ 

Answer 2

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'; 

आशा जाने के लिए इस

Answer 3

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

--allow-file-access-from-files 

Answer 4

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'; 

साथ क्रोम शुरू कर सकते हैं

उम्मीद है कि यह मदद करता है।

Answer 5

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

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

नहीं तो आप सर्वर साइड प्रॉक्सी का उपयोग करने के लिए है।