In my web-application i want to allow user to choose from list of different style signature.When ever user chooses one signature style i want to take picture of the signature style and save it in server. I have tried using canvas2html library it don't seem to work.

I have searched for vue-libaries that can take picture of particular element however there are only screenshot of whole web page.

mounted() {
    // Element might not have been added to the DOM yet
    this.$nextTick(() => {
        // Element has been definitely added to the DOM
        // is there any way to acces the div element via el element???
    html2canvas(document.getElementById('container')).
        then(function(canvas) {
        document.body.appendChild(canvas);
       });
       console.log(this.$el.textContent); // I'm text inside the ponent.
        });
      }

In my web-application i want to allow user to choose from list of different style signature.When ever user chooses one signature style i want to take picture of the signature style and save it in server. I have tried using canvas2html library it don't seem to work.

I have searched for vue-libaries that can take picture of particular element however there are only screenshot of whole web page.

mounted() {
    // Element might not have been added to the DOM yet
    this.$nextTick(() => {
        // Element has been definitely added to the DOM
        // is there any way to acces the div element via el element???
    html2canvas(document.getElementById('container')).
        then(function(canvas) {
        document.body.appendChild(canvas);
       });
       console.log(this.$el.textContent); // I'm text inside the ponent.
        });
      }

• javascript
• vue.js

• What is the actual issue? That code works fine to copy the container element and recreate it on a canvas. – Steven B. Commented Apr 8, 2019 at 16:37
• i have tried using github./mycure-inc/vue-html2canvas this library. whenever i add import VueHtml2Canvas from 'vue-html2canvas'; Vue.use(VueHtml2Canvas); -----------------This results in this error in webpack----------------------------Uncaught ReferenceError: regeneratorRuntime is not defined – Sidra Tariq Commented Apr 8, 2019 at 16:50

1 Answer 1

I try html2canvas library and it seems work fine.

First make sure you already install the library:

npm install html2canvas

And in ponent:

async mounted () {
  let el = this.$refs.hello.$el; // You have to call $el if your ref is Vue ponent
  this.output = (await html2canvas(el)).toDataURL();
}

Live Example

If you already using vue-html2canvas, you can do like:

async mounted() {
  let el = this.$refs.hello.$el;
  let options = { type: "dataURL" };
  this.output = await this.$html2canvas(el, options);
}

Live Example

Note: It seems vue-html2canvas has a problem with babel, see Babel 6 regeneratorRuntime is not defined for how to fix it (in my example I simply import "regenerator-runtime/runtime").