2009-06-23

canvasとjavascriptによる赤目補正処理

redeye.7z

canvasとJavascriptで赤目補正をするサンプル。赤目の部分だけをぐりぐりと塗りつぶせば、補正完了。なんと修正した画像の保存機能まで付いているというスグレモノ。こんなことがHTMLとJavascriptだけでできるなんて、いい時代になった物だ。

クロスドメイン問題から、このブログで動かすことはできないので、こういう形を取った。落として、解凍して、実行できる。もはやこれは本物のプログラムだから、実行という言葉は正しいと思う。

動作確認は、Chrome 3 、Opera 10、Safari 4で行った。Firefoxでは、前述の通り、ローカル上のoriginを違うと判定する他のブラウザとは違った挙動があるので使えない。一応、修正後のプレビュー表示をやめれば、修正自体はできるのだが、何にせよ画像保存ができないので、意味はない。

参考:http://disruptive-innovations.com/zoo/demos/eyes.html

追記:Firefoxで動かすには、二つ方法がある。まずひとつは、どこかのサーバー上からアクセスすることだ。(試していないが、ローカルサーバーでもいいと思う)。今ひとつは、security.fileuri.strict_origin_policyをfalseにすることである。Firefoxの思想では、ローカル上のファイルとはいえ、originは同じではないらしい。実際、それは間違いではない。

3 comments:

齊藤 said...

Firefox でも security.fileuri.strict_origin_policy を false にすれば制限はなくなります。 設定項目にしている以上は現行の挙動は意図的な選択でしょう。
例えば私はダウンロードするときにとりあえずいつも同じフォルダに保存するような運用をしています。 (これが少数派だとは思えません。) そういった事情を考慮するとローカルにおいては同じフォルダにあるというだけでは出自が同じと判断しないというのも合理的な選択だと思えます。
もちろん、何に重みを置いて判断するかによって意見が分かれることもあるでしょうが、定義されていないことを認識した上でバグと呼ぶのはどうかと…。

江添亮 said...

私もバグと呼ぶのには抵抗があったので、最初は「不思議な挙動」と書きました。
結局、バグと書いてしまいましたが。やはり戻しておいた方がいいのでしょう。

実際、HTML5のドラフト規格では、schemeがfileの場合は、originは実装依存なので、
どう実装していても間違いではないのは、前述の通りです。

江添亮 said...

security.fileuri.strict_origin_policyをfalseにしてみたところ、このコードはfirefoxでも正しく動きました。
ふーむ。