在Vue.js中将div保存为图像文件

Question

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

- Sushil

---

你尝试使用Canvas2Image.saveAsPNG(canvas)将图像保存为png格式了吗？ - fruitjs

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

- user2226755

Answer 2

有一个vue.js的封装，可以更轻松地在vue中使用html2canvas：

https://github.com/mycurelabs/vue-html2canvas

- stritti

---

鼓励提供外部资源链接，但请添加上下文说明该链接的内容和目的。在引用重要链接时，请引用最相关的部分，以防目标站点无法访问或永久离线。 - jasie