6

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 the script? 

     $(function() { 
     $("#btnSave").click(function() { 
       html2canvas($("#widget"), {
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);

            // Convert and download as image 
            Canvas2Image.saveAsPNG(canvas); 
            $("#img-out").append(canvas);
            // Clean up 
            //document.body.removeChild(canvas);
        }
      });
    });
});
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
xcalliber
  • 305
  • 2
  • 6
  • 16

2 Answers2

18

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

Enlico
  • 23,259
  • 6
  • 48
  • 102
Krzysztof Kaźmierczak
  • 1,401
  • 1
  • 11
  • 15
  • im sorry for responding so late i just looked at it it works great. thank you, but i have another problem i have an image in my div i can also upload new images into my div when i try to download i cant see the images that i uploaded can you help me? all i get is a black image with some text that was already thieir – xcalliber Dec 15 '16 at 23:13
  • Hi! Sure, I'll try to help. I believe that the problem could be related to image transparency and a format you're trying to save it. Is it possible for you to share the image which causing the issue and your current code? Best! – Krzysztof Kaźmierczak Dec 16 '16 at 13:05
  • This is the code I'm working on this is a past question I asked a few days ago. The only difference is that I can upload an image from my desktop hope this helps http://stackoverflow.com/questions/41150999/downloading-image-from-website-to-desktop/41152133?noredirect=1#comment69508151_41152133 – xcalliber Dec 16 '16 at 14:58
  • Hi! I'm bit confused ;) I noticed that on this page: https://torcdesign.com/mom.php you are not setting "download" element href property. Can you try to add this code after download.style.display = "inline";line? download.href = result.children[0].toDataURL(); – Krzysztof Kaźmierczak Dec 16 '16 at 16:29
  • Thanks for your fiddle. There's another problem with this code. Your images are pointing into a different domain than jsfiddle, so the code is not going to work correctly. But if you update your site torcdesign.com with the download.href = result.children[0].toDataURL(); it is going to work i believe. Check this one: https://jsfiddle.net/oLksyvan/ – Krzysztof Kaźmierczak Dec 16 '16 at 17:25
  • im sorry for the inconvenience i already tryied the code you gave me it works great only on Fire Fox but not on IE and Chrome . why would that happen? – xcalliber Dec 17 '16 at 15:47
  • Hi! Unfortunately, download attribute is not supported by every browser. Please check - http://caniuse.com/#feat=download – Krzysztof Kaźmierczak Dec 17 '16 at 17:06
  • Is it possible to prevent the screen from jumping to the top? I tried e.preventDefault but it does not work inside html2canvas – kusflo Jan 28 '18 at 11:54
  • At first it was not working. Then I noticed that I didn't add the other js file canvas2image.js . So I downloaded it and it works fine now – Md. Amanur Rahman Feb 14 '21 at 16:22
11

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.

chebaby
  • 7,362
  • 50
  • 46