1

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 component.
        });
      }
Sidra Tariq
  • 71
  • 1
  • 7
  • What is the actual issue? That code works fine to copy the container element and recreate it on a canvas. – Steven B. Apr 08 '19 at 16:37
  • i have tried using https://github.com/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 Apr 08 '19 at 16:50

1 Answers1

5

I try html2canvas library and it seems work fine.

First make sure you already install the library:

npm install html2canvas

And in component:

async mounted () {
  let el = this.$refs.hello.$el; // You have to call $el if your ref is Vue component
  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").

User 28
  • 4,863
  • 1
  • 20
  • 35
  • Thank you!!! https://codesandbox.io/s/r7n9qmlxmo is working for me. async mounted () { let el = this.$refs.hello.$el; console.log(this.$refs+"i am refs value") console.log(el+"i am el value") } can you tell me why we are using async mount lifecycle hook. I have multiple signatures from which user can choose from so i will have multiple refs. when ever i access one ref from multiple refs. the ref give me undefined. – Sidra Tariq Apr 09 '19 at 15:57
  • I use `async mount` only for example. I create https://codesandbox.io/s/31z1vj7815 that based on user click. The $ref could be undefined because of that moment the element is not render yet (maybe because of condition rendering like v-if). – User 28 Apr 09 '19 at 17:19