时间戳

首页 > 解决方案 > 将 Canvas 应用到我的 Vue.js 项目时出错

javascript - 将 Canvas 应用到我的 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>

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

ReferenceError: html2canvas is not defined

我如何解决这个问题？

标签： javascriptvue.jshtml2canvas

解决方案

我解决了这个错误。从'html2canvas'中删除导入语句并将我的功能更改为如下

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

推荐阅读