svgのフィルタをcanvasにかけよう…cfe.js

まー，その有用性に気がついてくれる人だけに見てもらえればいいの．

• canvas要素フィルタ拡張モジュール「cfe.js」

通常canvas要素にフィルタ効果を与えるのであれば，面倒だがピクセル操作をするのが常套手段だったのだけれど，こうやってsvgを経由すれば強力なsvgのfilterを自在に扱えるというわけ．

なぜこのような事が可能なのかというと，canvas要素の実装が前より使いやすくなったため．
以前はsvg画像をcanvasに描き込んだだけでorigin cleanフラグ（要はセキュリティフラグ） がfalseに設定されてしまい，ピクセル操作が不可能（＝外部保存不可）となってしまっていたんだ．

それが最近のchromeとfirefoxで同じ事を試してみたらエラーを発しなくなっていたのね．となれば話は簡単．

• canvasでお絵かき
• toDataURLで画像をエクスポートしsvgのimage要素の流しこむ
• このsvg要素をもう一度data scheme形式にエンコードし，htmlのimg要素に読み込ませる
• img要素の内容をcanvasに書き戻す

というサイクルをグルグル回せるようになったのですね．
つまり，canvasの描画を行う上でsvgを補助的に利用することが可能となったということなんだ．
そこで今回svg filterの仕組みに限ってモジュール化したものが拙作「cfe.js」なんですね．

課題

というか制限，それはieで動作しないこと．将来的にどうなるかわからないけれど，現状firefoxとchromeだけ（しかも新しい版のみ）で動作するので，ちっとも汎用的じゃない．
しかも，「今できる」からと言って「今後も利用できる」わけじゃない，そんな不安定な状況でもよければ，どうぞ使っちゃって下さい．けっこう面白いよ．