context.getImageData() на локальном хосте?

У меня есть следующий фрагмент кода, и я пытаюсь запустить его с локального хоста (OSX, работает XAMPP):

var canvas = document.getElementById('mycanvas');
    var cx = canvas.getContext('2d');

    var myImg = new Image();
    myImg.src = 'images/lion.jpg';

    $(myImg).load(function() {
        cx.drawImage(myImg, 0, 0);
        var imgData = cx.getImageData(0,0,150,150);
    });

Но когда я запускаю его, я получаю эту ошибку из консоли:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
site.js:11Uncaught Error: SECURITY_ERR: DOM Exception 18

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

У меня вопрос, как я могу заставить это работать в локальной среде разработчика?

Источник

3 ответа

Решение

Служите вашему HTML с помощью HTTP-сервера, например, Apache или Nginx.

Mac OSX поставляется с установленным Python, поэтому вы можете просто запустить HTTP-сервер, открыв терминал, а затем ввести:

cd /path/to/my/work/
python -m SimpleHTTPServer

Тогда открой http://localhost:8000/ в вашем браузере. Это должно работать.

Источник

Попытка другого браузера может помочь. Это случилось со мной в Chromium, и просто переключившись на Firefox, я смог продолжить отладку локально.

Источник

Я закончил тем, что использовал комбинацию решений (см. Эту другую проблему)

шаги:

  1. Преобразуйте изображение в строку base64.
  2. Назначьте это в качестве источника объекта Image js.
  3. Рисовать на холсте

Код:

// helper to transform to base64
// see other question for more help
function toDataUrl(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    };
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.send();
}

var canvas        = document.querySelector("canvas");
var ctx           = canvas.getContext("2d");
var png           = new Image();
var backgroundSrc = ".....";

png.onload = function () {
  ctx.drawImage(png, 0, 0);
};

toDataUrl(backgroundSrc, function(base64Img) {
  png.src = base64Img;
});

Я знаю, что это решение НЕ оптимально, но оно сработало для меня и помогает, когда изображение не из того же источника.

Я публикую это для всех, кто сталкивается с той же проблемой.

Источник
Другие вопросы по тегам