Javascript 如何在vue.js中拍摄特定html div元素的屏幕截图

在我的web应用程序中，我希望允许用户从不同样式的签名列表中进行选择。当用户选择一种签名样式时，我希望拍摄签名样式的照片并将其保存在服务器中。我试过使用canvas2html库，但似乎不起作用

我搜索了可以拍摄特定元素的vue库，但只有整个网页的截图

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.
        });
      }

---

我尝试了

html2canvas

library，它似乎工作得很好

首先确保已安装库：

npm install html2canvas

在组件中：

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();
}

如果您已经在使用vue-html2canvas，可以执行以下操作：

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

---

注意：似乎

vue-html2canvas

与babel有问题，请参阅以了解如何修复它（在我的示例中，我只是导入了“再生器运行时/运行时”）。

我尝试了

html2canvas

库，它似乎工作正常

首先确保已安装库：

npm install html2canvas

在组件中：

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();
}

如果您已经在使用vue-html2canvas，可以执行以下操作：

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

---

注意：似乎

vue-html2canvas

与babel有问题，请参阅以了解如何修复它（在我的示例中，我只是导入了“再生器运行时/运行时”）。

实际问题是什么？这段代码可以很好地复制容器元素并在画布上重新创建它。每当我从“vue-html2canvas”添加导入VueHtml2Canvas时；Vue.use（VueHtml2Canvas）-----------------这导致网页中出现此错误------------------未捕获引用错误：未定义regeneratorRuntime实际问题是什么？这段代码可以很好地复制容器元素并在画布上重新创建它。每当我从“vue-html2canvas”添加导入VueHtml2Canvas时；Vue.use（VueHtml2Canvas）-----------------这导致网页中出现此错误------------------未捕获引用错误：未定义regeneratorRuntime谢谢！！！他为我工作。异步挂载（）{let el=this.$refs.hello.$el；console.log（this.$refs+“i am refs value”）console.log（el+“i am el value”）}您能告诉我为什么要使用异步挂载生命周期挂钩吗。我有多个签名，用户可以从中选择，因此我将有多个引用。当我从多个引用中访问一个引用时。ref给了我未定义的值。我仅使用

异步装载

作为示例。我是根据用户点击创建的。$ref可能是未定义的，因为此时元素还没有渲染（可能是因为像v-if这样的条件渲染）。谢谢！！！他为我工作。异步挂载（）{let el=this.$refs.hello.$el；console.log（this.$refs+“i am refs value”）console.log（el+“i am el value”）}您能告诉我为什么要使用异步挂载生命周期挂钩吗。我有多个签名，用户可以从中选择，因此我将有多个引用。当我从多个引用中访问一个引用时。ref给了我未定义的值。我仅使用

异步装载

作为示例。我是根据用户点击创建的。$ref可能是未定义的，因为此时元素尚未渲染（可能是因为像v-if这样的条件渲染）。