Vuejsで要素を画像に変更する方法！「html2canvas」を使用！

こんにちは、
Vue.jsでdivなどの要素をシェアさせたいと思い、
実際にやってみたら、かなり簡単にできたのでまとめます。

そもそも「html2canvas」とは？

[bq uri=”https://techblog.kayac.com/html2canvas”]
html2canvasは、WebページをレンダリングしてCanvasエレメント上に描画することで、画像化してくれるJSライブラリです。 Niklas von Hertzen氏によって開発されたもので、ライセンスはMITとなっています。[/bq]

言い換えれば、ページで表示されているコンテンツを
簡単に画像にできるライブラリということです。

以前は、このようなライブラリを使わずに再現してたのですが、
かなり面倒で辛かった思い出が。

もっと早く知っていればよかったのですが笑

Vue.jsで「html2canvas」を使う！

html2canvas公式サイト

にドキュメントが載っております。
NPM
npm install --save html2canvas
Yarn
yarn add html2canvas

ターミナルからプロジェクトへ移動して
コマンドを入力しライブラリをインストールします。

私は、npmからインストールをしました。

そして、使用するページへ
import html2canvas from 'html2canvas'
を入力します。

私の場合、

<template>
<div id='html2canvas_img'>このdiv要素を画像にします。</div>
</template>

<script>
import html2canvas from 'html2canvas'
export default {
    mounted: function () {
        html2canvas(document.getElementById('html2canvas_img')).then(canvas => {
            var ctx = canvas.getContext('2d');
            var img = new Image();
            img.src = "image.jpg";
            document.body.appendChild(img)
            ctx.drawImage(img, 0, 0);
        });
    }
}
</script>

このように指定しました。

画像にしたい範囲の要素（今回の場合はid）を指定して
Canvasに描画した後、画像を生成している流れです。

非常に簡単にできますよね。
正直、驚きました・・・

ありがとうございました。