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

Question

Я загружаю изображение в 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.

Answer 1

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

Access-Control-Allow-Origin: *

Источник определяется доменом и протоколом (например,http и https - это не одно и то же) веб-страницы, а не местоположение сценария.

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

http://localhost/

Answer 2

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

--allow-file-access-from-files

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

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

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>

В противном случае вы должны использовать прокси на стороне сервера.