Dati di origine incrociata nell'area di disegno HTML5

Question

Sto caricando un'immagine in js e la disegno su una tela. Dopo aver disegnato, posso recuperare imageData dalla tela:

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

Questo funziona perfettamente sia in Safari e Firefox, ma non riesce a Chrome con il seguente messaggio:

Impossibile ottenere dati di immagine dalla tela, perché il la tela è stata contaminata da dati di origine incrociata.

Il file javascript e l'immagine si trovano nella stessa directory, quindi non capisco il comportamento di chorme.

Answer 1

Per abilitare CORS (Cross-Origin Resource Sharing) per le immagini passano l'header HTTP con la risposta immagine:

Access-Control-Allow-Origin: * 

L'origine è determinata dal dominio e il protocollo (ad esempio http e https non sono gli stessi) della pagina web e non la posizione della sceneggiatura.

Se si esegue localmente utilizzando il file: // questo è generalmente sempre visto come un problema di dominio incrociato; quindi è meglio andare via

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

Spero che questo aiuti

Answer 3

per risolvere la questione del dominio croce con file: //, è possibile avviare Chrome con il parametro

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

spero che questo aiuti.

Answer 5

Se le intestazioni di risposta del server contengono Access-Control-Allow-Origin: *, è possibile correggerlo dal lato client: aggiungere un attributo all'immagine o al video.

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

altrimenti bisogna utilizzare il proxy lato server.