Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’ エラーになったら

Google Chromeで、file:///~/index.htmlにアクセスしていると、次のようなエラーが表示された。

Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

ローカルファイルへのアクセスは、セキュリティのため、制限があるようだ

Webサーバーを起動して、http://localhost/~/index.htmlにアクセスすると、エラーは発生しない。

Webサーバーを起動するには、node.jsがインストールされている環境であれば、「http-serverがお勧めだ。

次のコマンドでインストールする。

npm install http-server -g

Webサーバーを起動するには、次のコマンドを実行する。

http-server

publicフォルダーがあればpublicフォルダーが、なければカレントディレクトリがルートになる。

あとは下記のURLにアクセスすれば良い。

http://127.0.0.1:8080/

使用するポート変更するには-pオプションを使用する。
例えば、8000にするなら

http-server -p 8000

とすれば、

http://127.0.0.1:8000/

で、アクセスできるようになる。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です