在vuejs中将div另存为图片文件

Question

I want to save div element as an image file using VueJS. I tried using canvas. How can I convert and save div element as an image file?

Answer 1

You can use 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 need to be in your website :

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

Answer 2

vue.js 有一个包装器，可以在 vue 中更轻松地使用 html2canvas： https : //github.com/mycurelabs/vue-html2canvas