javascript - origin - Datos de origen cruzado en lienzo HTML5

habilitar cors

Question

Estoy cargando una imagen en js y dibujándola en un lienzo. Después de dibujar, recupero 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 como en Firefox, pero falla en Chrome con el siguiente mensaje:

No se pueden obtener datos de imagen del lienzo porque el lienzo se ha 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 ( Intercambio de recursos de origen cruzado ) para sus imágenes, pase el encabezado HTTP con la respuesta de imagen:

Access-Control-Allow-Origin: *

El origen está determinado por el dominio y el protocolo (por ejemplo, http y https no son lo mismo) de la página web y no por 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

Para resolver el problema del dominio cruzado con file: //, puede iniciar Chrome con el parámetro

--allow-file-access-from-files

Answer 3

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

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

De lo contrario, debe usar un proxy del lado del servidor.

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

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