ImageData配列に画像を直接描画する方法 - HTML5/Javascript

Question

私の問題：
私はHTML5ゲームを作っています。毎回フレームを再描画するのではなく、一度バックグラウンドを描画して高速化しようとしています。
これを行うには、キャンバスに背景を描画してからImageDataを取得しようとしました。残念ながら私はセキュリティエラーによって停止しました。画像が外部ソースからのものであるため、できません。
これについて調査したところ、悪意のあるユーザーがユーザーのハードドライブからコンテンツを盗むのを防ぐ「機能」と思われます。私がロードしたこれらのイメージはハードドライブからではありません。

私は自分のゲームをスピードアップできるのが大好きです。セキュリティエラーを回避したり、画像を画像データに直接ロードしてピクセルをルーピングすることで描画できるソリューションはありますか？

（注：私は、複数の仕事を得るためにキャンバスを台無しにしたくない）

おかげで、ガンをその周りに方法はありません

Answer 1

、あなたが別のドメインの使用からイメージを描くことができますがgetImageDataは常にその状況でセキュリティエラーが発生します。これは、WebサイトがCookieやIPアドレスに基づいてプライベートユーザ情報を含む動的イメージを生成できるため、機密情報の盗用を防ぐためです。ただし、サーバー側のスクリプトを使用してイメージをプロキシすることもできます。

正直なところ、getImageDataとputImageDataはかなり遅いですが、ゲームのスピードアップの仕方はわかりません。画像データの描画は、単にdrawImageを使用するよりも速いと思われます。ではなく、です。

アニメーションがうまく見えるようにするには、すべてを再描画する必要があります。これがアニメーションの仕組みです。