Данные перекрестного происхождения в холсте HTML5

Я загружаю изображение в js и рисую его в холст. После рисования я получаю 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';

Это отлично работает как в Safari, так и в Firefox, но в Chrome не работает следующее сообщение:

Невозможно получить данные изображения из холста, потому что холст был испорчен данными перекрестного происхождения.

Файл javascript и изображение находятся в одном каталоге, поэтому я не понимаю поведение chorme.

Ответ 1

Чтобы включить CORS (Совместное использование ресурсов для разных источников), ваши изображения передают HTTP-заголовок с ответом на изображение:

Access-Control-Allow-Origin: *

Происхождение определяется доменом и протоколом (например, http и https не совпадают) веб-страницы, а не местоположением script.

Если вы работаете локально с помощью файла://это обычно всегда рассматривается как проблема с перекрестным доменом; поэтому его лучше пройти через

http://localhost/

Ответ 2

Чтобы решить проблему с перекрестным доменом с файлом://, вы можете запустить chrome с параметром

--allow-file-access-from-files

Ответ 3

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

Надеюсь, что это поможет

Ответ 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';

надеюсь, что это поможет.

Ответ 5

Если заголовки ответов сервера содержат Access-Control-Allow-Origin: *, вы можете исправить их с клиентской стороны: добавьте атрибут к изображению или видео.

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