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

Question

У меня есть следующий фрагмент кода, и я пытаюсь запустить его с локального хоста (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

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

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

Answer 1

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

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

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

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

Answer 2

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

Answer 3

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

Шаги:

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;
});

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

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