getImageData ошибка кросс-оригинала

Question

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

Так что я побежал в эту ошибку, когда я пытаюсь получить данные пикселей из холста, используя нечто вроде context.getImageData(), мой точный код можно было увидеть here или ниже:

<canvas id="imageCanvas" width="600" height="800"></canvas> 

// Load Image 
var canvas = document.getElementById('imageCanvas'); 

var image = new Image(); 
image.src = 'http://emoticons.pw/emoticons/emoticon-faces-002-medium.png'; 
image.onload = function() { 

    width=image.width; 
    height=image.height; 

    var context = canvas.getContext('2d'); 
    context.fillStyle="#024359"; // canvas background color 
    context.fillRect(0, 0, width, height); 
    context.drawImage(this,0,0); 

    imageData = context.getImageData(0,0,width, height); // PROBLEM HERE 

    context.putImageData(imageData, 0, 0); 
} 

I получите следующие ошибки в Chrome:

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

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

Использование только локальных изображений не является проблемой, но при попытке этого я получил ту же ошибку!

Я пытаюсь сделать это без сервера, если я поместил это на свой «по умолчанию» веб-сервер godaddy, все мои проблемы решены? Я слышал, слухи, что Dropbox может также достаточно симулировать сервер?

Answer 1

Вы не можете использовать file://, если вы используете это (Chrome позволяет вам переопределить это, но я не буду рекомендовать его).

Для локального тестирования используйте легкий сервер, такой как Mongoose, который позволяет использовать http://localhost в качестве домена для проверки ваших локальных страниц. Таким образом, вы избегаете проблем с CORS.

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

DropBox и ImgUrl (я рекомендую последний для просто изображений) поддерживают использование CORS, но вы должны запросить такое использование, добавив свойство crossOrigin к своему изображению перед установкой источника (или включите его в тег HTML, если вы «повторно использовать это):

var img = new Image; 

img.onload = myLoader; 
img.crossOrigin = '';    ///=anonymous 
img.src = 'http://imgur.com/....'; 

или в HTML:

<img src="..." alt="" crossOrigin="anonymous" />