DE-TEIUです。

力強くブログを108記事アウトプットする日 投稿記事 その1です。

成果物

スマホで写真を撮った時、被写体のガラスやモニターなどに撮影者が映り込むことがありますよね。 ああいう画像を作れる「映り込みジェネレータ」なるクソアプリを作成しました。

使ってみよう

例① ショーウィンドウ

こういう写真があります。

これを映り込みジェネレータに食わせてちょっと調整するとこうなります。

見事に映り込んでますね。

例② モニター2

いい感じのモニターがありますね。

こうなります。

いますね。

Fabric.js

このクソアプリはFabric.jsを使って作りました。

Fabric.jsはHTMLのCanvasの機能をいい感じに拡張してくれるJavaScriptライブラリです。 これを使うと、図形やテキストの描画、移動、拡大縮小などの実装が簡単にできます。便利。

今回のアプリでは以下のような機能の実装に使っています。

• 元画像の読み込みと表示
• 映り込む人物の配置・移動・拡大縮小・回転
• 透明度の調整
• 完成した画像のエクスポート

特にドラッグ&ドロップで画像の移動や拡大縮小をできるのがいい感じです。自分で実装すると結構めんどくさいやつ。

おわりに

使い道あったら教えて下さい

---