javascript - 如何在 vue.js 中截取特定 html div 元素的屏幕截图

Question

在我的网络应用程序中，我希望允许用户从不同样式签名列表中进行选择。当用户选择一种签名样式时，我想拍摄签名样式的照片并将其保存在服务器中。我尝试过使用 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”)。