CODEWITHSUNDEEP
javascripthtmlvuejs2
Sushil
Sushil

Reputation: 105

Save div as image file in vuejs

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?

Upvotes: 6

Views: 11535

Answers (2)

stritti
stritti

Reputation: 51

There is a wrapper for vue.js to use html2canvas easier within vue: https://github.com/mycurelabs/vue-html2canvas

Upvotes: 2

user2226755
user2226755

Reputation: 13183

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

Upvotes: 6

Related Questions