[Javascript + css] 静的HTMLの限界を超えた画像を台形変換するツールを作ったよ。

HTML、CSS、Javascript、３つそろって、WEBレンジャー！ この３種の神器をもってすれば、もはやできないことはないんじゃないか？と言わんばかりのツールを作ってしまいました。 いや〜３日ぐらい関連学習をしながら、作ってみたらなかなかおもしろいものができたので、公開して紹介したいと思います。

MYNT-Deformation

https://mynt-deform.netlify.app/ まず、このURLにアクセスしてもらうと、いきなり無機質な画面が現れます。 画面下に設置してある「image」ボタンをクリックすると、画像ファイルを選択するダイアログが表示されるので、画像を選択します。 ※jpegとpngのフォーマットで確認しています。 画像を選択すると、そのまま画面に現れるので、画像の四隅についているポイントマーカーをマウスで動かすと・・・ こんな風に画像がポインタに沿った形で自由変型します。

どうやってるの？

これまで、CSS3を使っても、平行四辺形でしか画像の変形はできないと思っていたんですが、 リファレンスサイトを見ていると、matrixという機能があることを知って、もしかしたら、台形変型が可能なのではないかとトライしてみることにしました。 そもそもmatrixというのは、行列計算というのを行う必要があり、その数学知識がなかったため、まずはそれらの学習を行い、やってみたところ、平行四辺形でしか変型しない・・・orz こうした、平行四辺形での画像変換の事を、アフィン変換という風に言うという事を知ったんですが、これは2D画像変換で行う処理で、今回やりたいことは台形変換で「ホモグラフィ」という3D変換方式で行わないと行けないということがわかりました。 CSS3もよくできた仕様で、matrix3dというちゃんと3D対応できる機能が備わっていてくれたので、それに対応することにしました。 もはやここまで来ると、プログラミングもライブラリを導入せずには、計算ができないと思い、解説サイトなどに書いてある計算ライブラリを片っ端からDLして試してみたところ、 運良く計算式方式とライブラリがマッチするものがあり、無事に正常動作するようになりました。

何に使うの？

実はこのツールを作るのがゴールではなく、この技術を使って、HTMLだけで、画像ファイルを自由な形に変型させることが可能になります。 ちょっと説明が難しくなりますが、１つの画像を、部分的にクリッピングして、複数の四角形の塊で画像表示をします。 このときに４分割した場合は、４つの四角ができますよね。 それを、それぞれのくっついている頂点を同時にいどうすれば、画像の形状を自由に変換することが可能になるという事で、 １枚の画像ファイルから、形状を変換して使えるようになるため、ネットで軽量なサイトを作ることが可能になります。 少し難しく聞こえますが、3Dポリゴンで頂点を移動してテクスチャが変型するのと同じ原理ですね。 いろいろなビジネス展開も考えているので、興味のある人がいたらぜひお声がけください。