Question

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

我搜索了可以为特定元素拍照的vue-libaries，但是只有整个网页的屏幕截图。

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

Answer 1

我尝试使用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();
}

Live Example

如果您已经在使用vue-html2canvas，则可以这样做：

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

Live Example

注意：看来vue-html2canvas的babel有问题，请参见Babel 6 regeneratorRuntime is not defined来解决它（在我的示例中，我只是导入“ regenerator-runtime / runtime”）。

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

1 个答案: