最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to take screen shot of a particular html div element in vue.js - Stack Overflow

programmeradmin1浏览0评论

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
Add a ment  | 

1 Answer 1

Reset to default 6

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").

发布评论

评论列表(0)

  1. 暂无评论