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

 この記事は約1分で読めます。
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に描画した後、画像を生成している流れです。

スポンサーリンク
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-1641002068098735"
data-ad-slot="2959651477">



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



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

 

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

コメントを残す

jsファイルかvue呼び出す
Laravel
【最終手段】PHPでTwitterOauthを使ってTwitterに画像のアップロードをする方法

こんにちは、 私は、LaravelとVueでWebアプリを作成していますが TwitterOauth …

jsファイルかvue呼び出す
Vue
外部JavaScriptファイルからVueファイルのメソッド呼び出す方法!

こんにちは、 久しぶりのVue記事です。 今回は、外部のJavaScriptファイルから Vueファ …

プログラミング
Vue
「Vue.js」onload内でthisを使えないときの対処法!クロージャのときについても

こんにちは。 「Vue.js」でdata値を参照するときに「this.」は欠かせませんよね。 しかし …