kazu22002の技術覚書

PHPer, Golang, AWS エンジニアの日々

html5のcanvas機能で保存処理失敗

html5のキャンバスで画像を用いていろいろやってみています。

表示するだけならなんとかできました。

 

移動や拡大がopenglの概念と同じだから理解しやすかったです。

 

しかし、canvasの表示を保存する機能を実装しようとしてエラーが出てしまった。

 

「SECURITY_ERR」

javascript上にエラーが出ていたけど、はじめてみたからわからなかった。

できているソースを持ってきてやってみたけど、同じエラーがでます。

 

なぜだ??

 

調べてみるとcanvasはorigin-cleanフラグが入っているらしい。

canvas.toDataURL()メソッドは、origin-cleanフラグがtrueでないとSECURITY_ERR例外を投げる。らしい。

同じ環境の場所以外から画像を持ってくるとorigin-cleanフラグを強制的にfalseにするようだ。

Security with canvas elements

 

ローカル環境でやってるのに、別環境(オリジン)扱いですかー。

 

Linuxサーバーにアップしたら、動いた。

WEBサーバーが影響してるんですかね。

 

ブラウザ機能でのファイル閲覧ではだめですかねぇー