Javascript 将画布应用于我的Vue.js项目时出错

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

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

npm install html2canvas

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

项目代码-：

<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>

我如何解决这个问题？

我解决了这个错误。 从“html2canvas”中删除导入语句并将我的函数更改为以下内容

 screenshot(){
      const html2canvas = require('html2canvas');
      console.log('Function Screenshot');
      html2canvas(document.getElementById('photo')).then(function(canvas){
        document.body.appendChild(canvas)
     });
 }

---

您可以尝试执行

npm安装--改为保存html2canvas

？

 screenshot(){
      const html2canvas = require('html2canvas');
      console.log('Function Screenshot');
      html2canvas(document.getElementById('photo')).then(function(canvas){
        document.body.appendChild(canvas)
     });
 }