みなさん、こんにちは。どんぶラッコです。
今日は、html2canvasの使い方についてまとめていこうと思います。
みなさん、Webブラウザ上で書き出されているものをそのまま画像にしたいと思ったことはありませんか？
今回の私の場合、画像の上にJSONファイルを基に枠線を合成したHTMLを生成しており、それを枠線ごと画像化させたいという要望がありました。
ということで、なんとかHTMLを画像化できないかと探していたところ、 html2canvas という神様ライブラリを見つけてしまいましった。
https://html2canvas.hertzen.com/
これ、私とても感動しました。
ということで、今回は上記のセットアップ方法と私がちょっと詰まった箇所があったのでそのご紹介をしていきます。
セットアップ・実装
まずは npm または yarn を通じて html2canvas をインストールします。
npm i html2canvas
# または
yarn add html2canvasそしたら、キャプチャしたい要素にidを振ります。今回は 単純に capture とします。
ついでに、画像保存用のボタンを作っておきます。
<div>
<v-btn
id="save-btn"
@click="captureImage"
>
画像を保存
</v-btn>
<div id="capture">
</div>
</div>そして、キャプチャするメソッドを実装していきます。
先ほどボタンに付与した captureImage() メソッドを作りましょう。
import html2canvas from 'html2canvas'
export default {
// ...中略
methods: {
captureImage () {
html2canvas(document.querySelector('#capture')).then((canvas) => {
const link = document.createElement('a')
link.href = canvas.toDataURL()
link.download = `export_image.png`
link.click()
})
}
}
}これだけです！非常にわかりやすいですね。
html2canvas(要素).then((canvas) => {}) が肝です。要素に先ほど書き出したいと指定した capture を指定しています。すると、戻り値としてcanvas要素を返してくれます。
今回はダウンロードをさせたいので、それ以降の行でダウンロード用のaタグを作り、それをクリックしてダウンロードさせています。
今回は私がchromeで利用できればOKなので、特に気にせず実装を進めてしまいます。
windowからはみ出してしまった要素もキャプチャしたい場合は？
しかし、これだけでは不十分な場合があります。
私の場合、ウィンドウからはみ出した画像を全てキャプチャしたいという希望があったのですが、ウィンドウ幅で切られてしまっていました。
そんな場合は、 html2canvas() にオプションを渡して上げてウィンドウ幅とキャプチャ幅を変更してあげましょう。
import html2canvas from 'html2canvas'
export default {
// ...中略
methods: {
captureImage () {
html2canvas(document.querySelector('#capture'), {
// キャプチャ幅を変更する
width: this.captureWidth,
// html2canvas のウィンドウ幅を変更する
windowWidth: this.captureWidth,
// キャプチャ長さを変更する
height: this.captureHeight
}).then((canvas) => {
const link = document.createElement('a')
link.href = canvas.toDataURL()
link.download = `export_image.png`
link.click()
})
}
}
}他のオプションについては公式サイトを参照してください。
https://html2canvas.hertzen.com/configuration
これで解決します！
みなさんも使ってみてください♪
