将 Canvas 应用到我的 Vue.js 项目时出错

Question

我想获取我的 vue.js 项目的屏幕截图。因此我将它用于 html2canvas。我使用以下步骤来应用 html2canvas。

第 1 步-：将“html2canvas”安装到我的项目中

npm install html2canvas

步骤2-：在我的项目代码中导入html2 canvas。

项目代码-：

<template>

  <div class="hello">

    <div id="photo">

      <p>This is vue screenshor</p>

    </div>

    <button v-on:click="screenshot">Take Picture</button>

  </div>

</template>

<script>

//import html2canvas from 'vue-html2canvas';

import html2canvas from 'html2canvas';

export default {

  name: 'HelloWorld',

  data () {

    return {

      msg: 'Welcome to Your Vue.js App'

    }

  },

  methods:{

    screenshot(){

      console.log('Function Screenshot');

    html2canvas(document.getElementById('photo')).then(canvas => {

      document.body.appendChild(canvas)

    });

    }

  }

}

</script>

但我正在运行这个项目，它给出以下错误 -：

ReferenceError: html2canvas is not defined

我如何解决这个问题？

Answer 1

我解决了这个错误。从“html2canvas”中删除导入语句并按如下方式更改我的功能&nbsp;screenshot(){&nbsp; &nbsp; &nbsp; const html2canvas = require('html2canvas');&nbsp; &nbsp; &nbsp; console.log('Function Screenshot');&nbsp; &nbsp; &nbsp; html2canvas(document.getElementById('photo')).then(function(canvas){&nbsp; &nbsp; &nbsp; &nbsp; document.body.appendChild(canvas)&nbsp; &nbsp; &nbsp;});&nbsp;}