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

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