html2canvas
nuxt.js

nuxt+html2canvasで画面キャプチャのメモ


やりたいこと

nuxtをベースにhtml2canvasにて画面キャプチャをする

html2canvas

https://html2canvas.hertzen.com/


つまづいたところ


発火タイミング

html2canvasはDOMが描画されたあとに発火させないといけない。methodで定義しておいて、mountedで発火させる。

  mounted: function () {

this.capturecanvas()
},
methods: {
capturecanvas: function () {
html2canvas(document.body).then(function (canvas) {
var imgData = canvas.toDataURL()
document.getElementById('result').src = imgData
})
}
}


エラー

Syntax Error: Unexpected token, expected {

参照

https://qiita.com/you8/items/e8a2631b615ef4ff5685#syntax-error-unexpected-token-expected-

上記のエラーが出たのでfunction()を追記。


コード

<template>

<img src="" id="result" />
</template>
<script>
export default {
mounted: function () {
this.capturecanvas()
},
methods: {
capturecanvas: function () {
html2canvas(document.body).then(function (canvas) {
var imgData = canvas.toDataURL()
document.getElementById('result').src = imgData
})
}
}
}
</script>