Холст был испорчен данными локального происхождения.

1

Этот вопрос задавали много, но я просто не понимаю, почему это происходит со мной.

В принципе, у меня есть холст и изображение, и когда я пытаюсь это сделать:

var canvas = document.getElementById('somecanvas');
var ctx = canvas.getContext('2d');
var someimage = document.createElement('img');
someimage.setAttribute('src', 'img/someimage.png');
someimage.onload = function(){
    ctx.drawImage(someimage, 0, 0, canvas.width, canvas.height);
    data = ctx.getImageData(0,0,canvas.width,canvas.height);
}

Я получаю неприглядный:

"Uncaught DOMException: не удалось выполнить" getImageData "в" CanvasRenderingContext2D ": холст был испорчен данными перекрестного происхождения. HTMLImageElement.someimage.onload"

Я должен упомянуть, что я довольно новичок в pogramming, и даже moreso для javascript. Если это происходит, когда я запускаю его из файла: \\?

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

  • 0
    Привет, Эндрю - спасибо большое, но вместо того, чтобы редактировать свой вопрос, прокомментируйте свою благодарность . Ваша репутация слишком низкая для комментирования в целом, однако вы можете комментировать ответы в собственной ветке вопросов. :)
  • 0
    Привет, Фриц. Спасибо за внимание. Я хотел поблагодарить через комментарий, однако, когда я завис над ссылкой на комментарий, я заметил, что там написано «избегайте комментариев типа« спасибо »», поэтому я запутался и отредактировал вместо этого.
Показать ещё 1 комментарий
Теги:
canvas
cors
getimagedata

2 ответа

4
Лучший ответ

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

Вы действительно должны обслуживать как страницу, так и изображения с локального HTTP-сервера, чтобы избежать этих ограничений.

Поделиться
2

Ах, вы попали в ограничение CORS, и я предполагаю, что вы столкнулись с этим в Google Chrome, который известен тем, что является самым агрессивным разработчиком этого. Я видел это много.

CORS - это протокол, позволяющий помещать содержимое кросс-исходного контента в веб-страницу. Это не только влияет на файлы сценариев (как и следовало ожидать, потому что вы не хотите, чтобы кто-либо мог вводить вредоносные скрипты на вашу веб-страницу), но также влияет на такие ресурсы, как изображения и шрифты.

Причина, по которой это влияет на изображения, заключается в том, что злонамеренные люди обнаружили, что они могут использовать объект canvas HTML5 для копирования содержимого вашей веб-страницы в файл PNG и получения персональных данных от пользователя по желанию. Вы можете себе представить, что произойдет, если вы участвуя в транзакциях интернет-банкинга, пока это случилось с вами!

Но, и это досадная часть, с которой вы сталкиваетесь, прекращение такой злонамеренной деятельности также влияет на законное использование ресурсов кросс-происхождения (например, сохранение всех ваших изображений в отдельном репозитории).

Итак, как вы обходите это?

В Firefox у вас не должно быть проблем. Firefox применяет некоторый интеллект к этому вопросу и признает, что изображения, поступающие из одного и того же файла://спецификация в качестве вашей веб-страницы, на самом деле не являются перекрестными. Это позволяет им, пока они находятся в том же каталоге на вашем жестком диске, что и ваша веб-страница.

Хром, с другой стороны, гораздо менее разрешительный. Он рассматривает все такие обращения как кросс-происхождение и реализует остановки безопасности в тот момент, когда вы пытаетесь использовать getImageData() и putImageData() на холсте.

Существует обходной путь, если вы не хотите идти на трудную установку и настройку собственного локального веб-сервера, но все же хотите использовать Chrome и его приятный дружественный отладчик. Вам нужно создать ярлык, который указывает на исполняемый файл Chrome, и запускает его, когда вы дважды щелкаете по нему, но который запускает Chrome с помощью специального флага командной строки:

--allow-доступ к файлам, из файлов

Сохраните этот ярлык, называя его чем-то вроде "Chrome Debug Version", чтобы напомнить вам ТОЛЬКО использовать это для отладки вашего собственного кода (вы никогда не должны обращаться к Интернету с ослабленной безопасностью!), И вы должны иметь возможность отлаживать свой код без проблем с этого момента.

Но, если вы собираетесь делать такую отладку такого рода, лучшим долгосрочным решением является установка веб-сервера и настройка его для обслуживания кода из ваших желаемых каталогов каждый раз, когда вы используете "localhost" "URL. Это, я знаю, утомительно и требует много времени, и отвлекает ваше желание получить кодировку, но как только это будет сделано, это будет сделано и вычищено, и решит ваши проблемы навсегда.

Если вы действительно хотите применить свои навыки программирования к тестированию, вы можете даже написать свой собственный веб-сервер для выполнения этой работы, используя что-то вроде рамки на стороне сервера node.js, но если вы новичок в JavaScript, это задача, которую вы "Лучше уходите, пока у вас не будет много опыта! Но как только ваши навыки достигнут этого момента, это будет хорошим образовательным упражнением, которое также решит некоторые ваши другие проблемы, как только вы выработаете, как работает веб-сервер.

Если вы запускаете с установленным веб-сервером, вам, конечно же, будет весело решать, какой из них связан с наименьшими головными болями. Apache мощный, но большой. Hiawatha является как легким, так и безопасным, и это был бы мой первый выбор, если бы не тот факт, что 64-битная версия все еще недоступна (вздох), потому что 32-разрядная версия, которая запускалась на моем старом поле XP, была радость использовать. Nginx Я мало знаю, но некоторым нравится. Предостережение emptor и все такое.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню