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.
});
}
Share
Improve this question
asked Apr 8, 2019 at 15:47
Sidra TariqSidra Tariq
711 silver badge7 bronze badges
2
- 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
Reset to default 6I 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").