前回のJavaScriptでHarrisオペレータによるコーナー検出に引き続きJavaScriptで画像処理を。今回は難しいことはせずにカジュアルな画像加工を楽しみます。
ちょっと昔に、宙玉(そらたま)写真というのが流行ったような気がするんですけど、画像処理的には簡単ですのでちょっと試してみました。
参考: 宙玉 – Google 検索
作成手順は以下の通り
- 1. 元画像を円周魚眼レンズ風に射影変換した画像を作る
- 2. 元画像にボックスフィルタを掛けて反転した画像を作る
- 3. 1,2で作った2枚の画像を合成
- 4. 合成した箇所の境界をぼかす
ただ座標変換してぼかして重ねるだけです。素材画像を入力にしてあとは全てJavaScriptによる画素操作のみで作成できます。円周魚眼変換する際の補間手法はいろいろあると思いますが、ここでは簡易的な重み付き平均値補間を施しているだけですので、処理時間を犠牲にして良いのであればさらに高品質な補間手法を採用するのも良いかと。もちろん光学処理ではないので粗が目立ちますが、ブラウザの処理性能がさらに向上して動画に適用することができれば、低画質でも人間の目くらいはごまかすことができるんじゃないかなと思います(適当)。
以下、デモを載せます。スマートフォン(Galaxy S2 LTE, AndroidのMobile Safari)でも動作確認はしましたがやはり重いです。ただ、PC向けとスマートフォン向けに画像サイズをそれぞれ変えてやれば、処理速度的にも許容範囲内に収めることはできそうです。
Demo: SORA-TAMA Transform (Fish-Eye)
(IE9.0, Firefox15.0, Chrome21.0, Safari6.0, Opera12.0で動作確認済み)
魚眼変換処理はモジュールとして作りましたのでもし興味があれば。補間処理は関数に分離してあるので入れ替えやすくなっているかと思います。
cv/fisheye_transform at master from wellflat/javascript-labs – GitHub
使い方は以下の通り。
|
1 2 3 4 5 |
// 第一引数には対象のImageDataオブジェクトを渡す // 第二引数は焦点距離 // 第三引数はレンズ半径 // 戻り値は変換後のImageDataオブジェクト var result = Fisheye.transform(img, 55, 80); |
画像を扱うプラットフォームはうちの社内でもたくさんありますけど、HTTPでリクエストを受けてからサーバ側で画像処理してクライアントに返す昔ながらの構成というのはこれから減ってくるんだろうなぁと思ってます。ブラウザのみで全ての処理を完結させるというのは僕はピンとこないというか懐疑的になってしまいますけど、そういう感覚はきっと老いた証拠なのでしょう。。実際にフロントエンドエンジニアの活躍できる分野が増えているのを目の辺りにし、いろいろ悩んでしまう今日この頃です。30代の人達だとこの現状の受け止め方は違ってくるんでしょうか。
来期から別部門に異動になるので忙しくなりそうです。がんばろう。