Error to Apply Canvas in to my Vue.js Project

Question

I want to get screenshot on my vue.js project. hence I used it to html2canvas. I used following step to apply html2canvas.

step 1-: Install 'html2canvas' into my project

npm install html2canvas

step 2-: import html2 canvas in my project code.

project code -:

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

but i'm running this project it gives following error -:

ReferenceError: html2canvas is not defined

How I solve this?

Answer 1

I solve this error. remove import statement from 'html2canvas' & change my function as bellow

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