2

Not a duplicate as I need to convert to a html canvas, not from one

I am developing a site that puts some elements on the screen.

I need to be able to capture the content of a <div> in a png

I have tried some chrome extensions but none worked unfortunately

            <style type="text/css">
            * {
                margin: 0px 0px;
                padding: 0px 0px;
            }
            #box {
                background: #FFFF00;
                width: 100px;
                height: 50px;
            }
            </style>
            <div id="box">
            This is my box :)
            </box>
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Morgan Stephen
  • 23
  • 1
  • 4
  • Possible duplicate of [Capture HTML Canvas as gif/jpg/png/pdf?](http://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf) – Jongware Apr 24 '16 at 19:57

1 Answers1

4

html2canvas can help you.

From official web site:

This script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

html2canvas(document.getElementById('box'), {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  },
  width: 400,
  height: 400
});

Click here to see some live examples.

Ali Mamedov
  • 5,116
  • 3
  • 33
  • 47
  • This does the basic job but when I use it with Google Charts I get a message up version of the image. What I am looking for is a sort of snipping tool that can clip on to elements and turn them into a canvas. – Morgan Stephen Apr 24 '16 at 15:25
  • html2canvas is very buggy. Not all elements get saved. There has to be a better way. – Joshua Robison Jun 09 '23 at 07:38