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>

次がこのキャプチャをcloudstoreに保存。