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

Question

我想使用 VueJS 将 div 元素保存为图像文件。我尝试使用 Canvas 。如何将 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 需要在您的网站中:

All the images that the script uses need to reside under the same origin for it to be able to read them without the assistance of a proxy. Similarly, if you have other canvas elements on the page, which have been tainted with cross-origin content, they will become dirty and no longer readable by html2canvas
Source: https://html2canvas.hertzen.com/documentation