将 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' 中删除导入语句并将我的函数更改为波纹管

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

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

Error to Apply Canvas in to my Vue.js Project

javascript

html2canvas

vue.js