How to save img to user's local computer using HTML2canvas

NOTE: this answer is from 2015 and the library has been updated.
Check the answers below for alternate implementations.

Try this (Note that it makes use of the download attribute. See the caniuse support table for browsers that support the download attribute)

<script>

  $('#save_image_locally').click(function(){
    html2canvas($('#imagesave'), 
    {
      onrendered: function (canvas) {
        var a = document.createElement('a');
        // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
        a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
        a.download = 'somefilename.jpg';
        a.click();
      }
    });
  });

</script>

update 2018

Notice that in the new versions of Html2Canvas the onrendered option is deprecated and replaced with promises.

To be able to download the image to the user computer, you may use something like this:

Html

<html>
    <head></head>
    <body>
        <div id="boundary">
            <div class="content">
                <p>My content here</p>
            </div>
        </div>

        <button id="download">Download</button>

    </body>
</html>

Javascript

Based on Krzysztof answer

document.getElementById("download").addEventListener("click", function() {

    html2canvas(document.querySelector('#boundary')).then(function(canvas) {

        console.log(canvas);
        saveAs(canvas.toDataURL(), 'file-name.png');
    });
});


function saveAs(uri, filename) {

    var link = document.createElement('a');

    if (typeof link.download === 'string') {

        link.href = uri;
        link.download = filename;

        //Firefox requires the link to be in the body
        document.body.appendChild(link);

        //simulate click
        link.click();

        //remove the link when done
        document.body.removeChild(link);

    } else {

        window.open(uri);

    }
}

Issue encountered

Indeed i was able to download the image, but it was blank ...the possible cause for this (at least in my case) was that the content wrapper (id="#boundary") has no width or height defined, so specifying a height and a width to the content wrapper did the trick for me.

hope this helps


This is the latest code that convert to PNG.

      $("#btnSave2").click(function() {
        html2canvas($("#widget"), {
          onrendered: function(canvas) {
            saveAs(canvas.toDataURL(), 'canvas.png');
          }
        });
      });

      function saveAs(uri, filename) {
        var link = document.createElement('a');
        if (typeof link.download === 'string') {
          link.href = uri;
          link.download = filename;

          //Firefox requires the link to be in the body
          document.body.appendChild(link);

          //simulate click
          link.click();

          //remove the link when done
          document.body.removeChild(link);
        } else {
          window.open(uri);
        }
      }

Tags:

Html2Canvas

Recent Posts