How to convert HTML to HTML5 canvas and download it as PNG file

Question

Whenever I type something in input box it'll will reflect and can drag and drop that text. Now it is HTML format.

I have to convert the HTML content to image file and download it.

Here is the

<a href="http://codepen.io/vengreat/pen/pgROpr">CodePen</a>

Please check it out.

Refer this: https://html2canvas.hertzen.com/ – Rayon Jan 05 '16 at 05:19 — Rayon, Jan 05 '16 at 05:19

Snazzy Sanoj · Answer 1 · 2016-01-05T05:46:41.170

0

You can create a button that will create image of the "then-generated" image, and use the following code to capture the text as image using HTML5 Canvas.

function Capture() { 
        html2canvas(document.body, {
        onrendered: function(canvas) {
        document.body.appendChild(canvas);
      },
       width: 500,
       height: 500
    });
};

Since it's not possible to invoke SaveAs directly from HTML, you can Right-click and click Save As button to download the image.

P.S. Don't forget to add the html2canvas reference in your webpage.

Working CodePen.

Hope this helps. :)

edited Jan 05 '16 at 05:46

answered Jan 05 '16 at 05:23

Snazzy Sanoj

804
1
11
28

1

can you give sample button and how to set height and width please. – Venkadesh S Jan 05 '16 at 05:29
Hi snazzy sanoj thank you. but background image is not shown in canvas fromat why ? – Venkadesh S Jan 05 '16 at 06:18
You can read about that [here](http://stackoverflow.com/questions/6775767/how-can-i-draw-an-image-from-the-html5-file-api-on-canvas) Please upvote and mark my answer as accepted if it worked for you. :) – Snazzy Sanoj Jan 05 '16 at 06:29
Did you try saving it as `.png` file? – Snazzy Sanoj Jan 05 '16 at 06:36
There are ways to force-download the image. Refer this: http://jsfiddle.net/AbdiasSoftware/7PRNN/ – Rayon Jan 05 '16 at 06:40
@RayonDabre Thank you so much. I never knew I was able to invoke the `Save As` dialog. :) – Snazzy Sanoj Jan 05 '16 at 06:48

How to convert HTML to HTML5 canvas and download it as PNG file

1 Answers1