こんにちは、
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に描画した後、画像を生成している流れです。
スポンサーリンク
非常に簡単にできますよね。
正直、驚きました・・・
ありがとうございました。
コメント