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

     });

 }