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

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

そもそも「html2canvas」とは?


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

出典: techblog.kayac.com



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

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

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

Vue.jsで「html2canvas」を使う!

html2canvas公式サイト にドキュメントが載っております。
NPM npm install --save html2canvas Yarn yarn add html2canvas
ターミナルからプロジェクトへ移動して
コマンドを入力しライブラリをインストールします。

私は、npmからインストールをしました。
そして、使用するページへ
import html2canvas from 'html2canvas' を入力します。

私の場合、

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

画像にしたい範囲の要素(今回の場合はid)を指定して
Canvasに描画した後、画像を生成している流れです。
スポンサーリンク


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

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

 

コメント

タイトルとURLをコピーしました