Datos de origen cruzado en canvas HTML5

Question

Estoy cargando una imagen en js y dibujándola en un lienzo. Después de dibujar, recupero propiedad imageData del lienzo:

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

Esto funciona perfectamente tanto en Safari y Firefox, pero no en Chrome con el siguiente mensaje:

No es posible obtener datos de imagen de la lona porque el lienzo ha sido contaminado por datos de origen cruzado.

El archivo javascript y la imagen se encuentran en el mismo directorio, por lo que no entiendo el comportamiento de chorme.

Answer 1

Para habilitar CORS (Cross-Origin Resource Sharing) para sus imágenes pasan a la cabecera HTTP con la respuesta de la imagen:

Access-Control-Allow-Origin: * 

El origen está determinado por dominio y el protocolo (por ejemplo, http y https no son los mismos) de la página web y no la ubicación del script.

Si está ejecutando localmente usando el archivo: // esto generalmente siempre se ve como un problema de dominio cruzado; así que es mejor ir a través de

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

espero que esto ayude

Answer 3

para resolver el problema dominios con file: //, puede comenzar cromo con el parámetro

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

espero que esto ayude.

Answer 5

Si los encabezados de respuesta del servidor contienen Access-Control-Allow-Origin: *, entonces puede solucionarlo desde el lado del cliente: Agregue un atributo a la imagen o video.

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

lo contrario tendrá que usar de proxy del lado del servidor.