Download html2canvas image to desktop

后端未结

关注

 2  1334

I found this https://jsfiddle.net/8ypxW/3/ and I would like to know how to download image to desktop. I only see save png but no download if it\'s possible can you give me t

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 (plain 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.

0 讨论(0)

后悔当初

2021-01-01 06:00

The problem was the wrong url of canvas2image.js script in your fiddle. I created a fiddle with the proper one for you to have a look. In the code below you can see 2 "Save PNG" buttons. One is using Canvas2Image.saveAsPNG function, but the little issue with this method is the fact you cannot give the name of the saved image. The second button is using HTML download attribute, but it is not supported by all browsers.

$(function() {
  $("#btnSave").click(function() {
    html2canvas($("#widget"), {
      onrendered: function(canvas) {
        Canvas2Image.saveAsPNG(canvas);
      }
    });
  });

  $("#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);
    }
  }
});

fiddle

Best regards
Krzysztof

0 讨论(0)