Question

我想使用VueJS将div元素保存为图像文件。我尝试使用画布。如何将div元素转换并保存为图像文件？

Answer 1

您可以使用html2canvas：

JS：

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

HTML：

<script src="html2canvas.min.js"></script>
<div id="capture" style="padding: 10px; background: #f5da55">
  <h4 style="color: #000; ">Hello world!</h4>
</div>

html2canvas.min.js需要在您的网站上：

脚本使用的所有图像都需要位于相同的源下，以便能够在没有代理帮助的情况下读取它们。同样，如果页面上有其他画布元素，这些元素已被污染了跨源内容，它们将变得脏，并且不再被html2canvas读取
来源： https://html2canvas.hertzen.com/documentation

Answer 2

有一个html2canvas的vue.js包装器： https://github.com/mycurelabs/vue-html2canvas

将div保存为vuejs中的图像文件

2 个答案: