html2canvasとVue.jsでつくるコラ画像ジェネレータ

以前CreateJSによるコラ画像ジェネレータを作成しましたが、html2canvasというライブラリの使い勝手がよさそうだったので試してみました。
あわせて最近勉強中のVue.jsで入力内容の制御もやってみました。

DEMO

AD

html2canvasとは何か

HTMLの要素をcanvasとして生成するJavascriptライブラリです。
<body>を対象とすればページのスクリーンショットを生成できますし、div#hogeのような指定の要素のみを対象とすることも可能です。

html2canvas自体がHTMLやCSSを解釈してcanvasへと変換する仕組みのようで、いわばJS製レンダリングエンジンです。作者の人すごい。

1.html2canvasとvue.jsの読み込み

</body>の直前でVue.jsとhtml2canvasを読み込みます。
ちゃんとしたものを作るときはvue-cliを使うほうがいいと思いますが、今回は単一ページで完結する簡単なものなのでCDNから直接読み込みます。

注意:CDNjsのhtml2canvasは古いバージョンなので使わない

html2canvasはCDNjsでも配信されていますが、現行1.0.0αなのに0.4.1という古いバージョンしか配信されていないため、jsDelivrを使うかファイルをダウンロードして使用しましょう。

2.HTMLとCSSでコラ画像のベースをつくる

html2canvasはhtmlの要素をcanvasで画像化するライブラリです。ですのでHTMLとCSSでレイアウトを作成すれば、その要素がそのまま画像になります。
今回は以下のように画像+吹き出しをHTMLとCSSで作成し、吹き出し部分に入力値が反映されるというものにしました。

{{ message }} という部分がありますが、この部分にユーザーが入力したテキストが表示されます。

3.入力値をHTML内に反映させる

入力した内容に手を加えなくてもいい場合、textareaにv-modelを指定するだけで入力値がリアルタイムに反映されるフォームができあがります。Vue.jsすごい。

4.HTMLをcanvasにして出力する

あとはhtml2canvasでcanvasを生成すればできあがりです。
ボタンをクリックしたらdiv#preview_innerの中身をdiv#resultの中にcanvasとして生成する、という処理にしました。

できあがったcanvasは右クリックや長押しタップで保存して使ってもらうということにしてます。
File APIを使えばボタンをクリックしてダウンロードさせる処理も多分できると思います。

参考:
JavaScriptでファイルダウンロード処理を実現する

できあがり

DEMO

見た目を整えるのでBootstrapを使いましたが、実際のコードは数行です。CreateJSのときはもっと苦労したのに…。

今回は画像の上に文字をかぶせるパターンですが、FileReader APIを使って画像をアップロードするようなジェネレータも簡単に作成できそうです。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。