Как нарисовать изображение непосредственно в массив ImageData - HTML5 / Javascript

Question

Моя проблема:
Я делаю игру на HTML5 и пытаюсь сделать ее быстрее, рисуя фон один раз, а не перерисовывая каждый кадр.
Для этого я нарисовал фон на холсте, а затем попытался получить из него ImageData. К сожалению, меня остановила ошибка безопасности. Невозможно, потому что изображение из внешнего источника.
Я исследовал это, и кажется, что это «особенность», которая не дает плохим людям красть контент с жесткого диска пользователя. Хотя эти изображения, которые я загружал, не с жесткого диска.

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

(Примечание: я не хочу связываться с несколькими холсты, чтобы сделать работу)

Спасибо, Ган

Answer 1

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

Но, честно говоря, getImageData и putImageData довольно медленные, я не понимаю, как это может ускорить вашу игру.Мне кажется, что вы думаете, что рисовать данные изображения быстрее, чем просто с помощью drawImage, это , а не .

Вам придется перерисовывать все, если вы хотите, чтобы анимация выглядела в любом случае хорошоТак работает анимация.