Wood-Roots:blogHOMEVue.js201811/15html2canvasとVue.jsでつくるコラ画像ジェネレータVue.js以前CreateJSによるコラ画像ジェネレータを作成しましたが、html2canvasというライブラリの使い勝手がよさそうだったので試してみました。あわせて最近勉強中のVue.jsで入力内容の制御もやってみました。DEMOADshtml2canvasとは何かHTMLの要素をcanvasとして生成するJavascriptライブラリです。<body>を対象とすればページのスクリーンショットを生成できますし、div#hogeのような指定の要素のみを対象とすることも可能です。html2canvas自体がHTMLやCSSを解釈してcanvasへと変換する仕組みのようで、いわばJS製レンダリングエンジンです。1.html2canvasとvue.jsの読み込み</body>の直前でVue.jsとhtml2canvasを読み込みます。したものを作るときはvue-cliを使うほうがいいと思いますが、今回は単一ページで完結する簡単なものなのでCDNから直接読み込みます。src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-alpha.12/dist/html2canvas.min.js"></script>注意:CDNjsのhtml2canvasは古いバージョンなので使わないhtml2canvasはCDNjsでも配信されていますが、現行1.0.0αなのに0.4.1という古いバージョンしか配信されていないため、jsDelivrを使うかファイルをダウンロードして使用しましょう。2.HTMLとCSSでコラ画像のベースをつくるhtml2canvasはhtmlの要素をcanvasで画像化するライブラリです。HTMLとCSSでレイアウトを作成すれば、その要素がそのまま画像になります。今回は以下のように画像+吹き出しをHTMLとCSSで作成し、吹き出し部分に入力値が反映されるというものにしました。いう部分がありますが、この部分にユーザーが入力したテキストが表示されます。3.入力値をHTML内に反映させる入力した内容に手を加えなくてもいい場合、textareaにv-modelを指定するだけで入力値がリアルタイムに反映されるフォームができあがります。v-model="message"></textarea>4.HTMLをcanvasにして出力するあとはhtml2canvasでcanvasを生成すればできあがりです。ボタンをクリックしたらdiv#preview_innerの中身をdiv#resultの中にcanvasとして生成する、という処理にしました。'';result.appendChild(canvas)});}}})できあがったcanvasは右クリックや長押しタップで保存して使ってもらうということにしてます。APIを使えばボタンをクリックしてダウンロードさせる処理も多分できると思います。参考:JavaScriptでファイルダウンロード処理を実現するできあがりDEMO見た目を整えるのでBootstrapを使いましたが、実際のコードは数行です。CreateJSのときはもっと苦労したのに...。APIを使って画像をアップロードするようなジェネレータも簡単に作成できそうです。コメントをキャンセルメールアドレスが公開されることはありません。2Archive2020年92019年182018年102017年172016年202015年212014年312013年552012年50SearchSocialAboutWeb制作会社ではたらく社畜のアウトプットです。Web制作技術のほか、雑記など。当ブログと運営者についてもっと詳しく見るプライバシーポリシーContactお問い合わせは下記フォームをご利用ください。お時間がございましたらお問い合わせの前にこちらをご一読いただけますと幸いです。Wood-Roots:blog。