1

When i try to download my canvas as PNG image the browser open the image in a new page but don't download it... my code for download : 

$("#btnScaricaEtichetta").click(function(){
    console.log("Download... ");

    location.href = document.getElementById("latoSinistro").toDataURL();
    this.download = "filename";
});

there is a way to simply download it? sorry for bad english, i'm italian

Alessandro Zago
  • 793
  • 3
  • 12
  • 33
  • `canvas.toDataURL("image/png")` ? Are you sure `location.href` is correctly grabbing the canvas? Also look at `image/png` argument. – zipzit May 02 '16 at 16:02
  • i have add "image/png" to toDataURL function but the results don't change.... the browser open a window and show the img with this url : data:image/png;base64,iVBORw0KGgoA ecc ecc (so long) – Alessandro Zago May 02 '16 at 16:09
  • In the line `this.download = "filename";` Its not clear what `this` is pointing to. – zipzit May 02 '16 at 16:13
  • Check out [the answers at this link.](http://stackoverflow.com/questions/11112321/how-to-save-canvas-as-png-image?rq=1) – zipzit May 02 '16 at 16:16
  • It's not location's but the anchor's href you want to change (probably "this") also you may be better set the download attribute first, and I'm not sure setting it on the fly like this will work everywhere. – Kaiido May 02 '16 at 16:25
  • @alex Let me build up a jsfiddle (hint. way easier if you did this.) – zipzit May 02 '16 at 16:29
  • Frick. `document.write is disallowed in JSFiddle environment and might break your fiddle.` Aaaargh! – zipzit May 02 '16 at 16:33
  • ok @zipzit thanks a lot (: – Alessandro Zago May 02 '16 at 16:35
  • I just have to save the image , how can it be so complicated? :( – Alessandro Zago May 02 '16 at 16:36
  • A couple of thoughts: (1) In Chrome & FF you can `right-click-save` the canvas as an image. (2) In IE, the anchor download attribute is not supported. – markE May 02 '16 at 16:39
  • i need to download by button because this project is for school. i have a node.js server, con it helps? – Alessandro Zago May 02 '16 at 16:45
  • Check out [this link, and the answer by Tomas Zato](http://stackoverflow.com/questions/23223718/failed-to-execute-btoa-on-window-the-string-to-be-encoded-contains-characte) I've seen a few other sites where they've used `fileSaver.js` as well. The issue, of course, is finding a solution that works on the largest number of current browsers. – zipzit May 02 '16 at 17:02
  • @markE, to be fair, Edge does support the `download` attribute, but Safari still doesn't. Also, IE>10 have a `navigator.msSaveBlob` method. – Kaiido May 03 '16 at 01:16
  • 1
    @Kaiido ... just thoughts ... these are just thoughts. :-P – markE May 03 '16 at 01:38
  • @Kaiido. Agreed. This question has already been asked and well answered. :-) – markE May 03 '16 at 03:00

1 Answers1

4

Because it uses external functions, this is sort of a hack, but it does seem to work on any browser. I'm using the tool FileSaver.js to do the file download work, and canvas-toBlob.js to perform the toBlob functioning on Chrome and other browsers.

<script src="https://rawgit.com/eligrey/FileSaver.js/master/FileSaver.js"></script>
<script src ="https://rawgit.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"></script>

<h1 onclick="download_image()">Click Here to download image</h1>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

<script>
  // lets put something on a canvas.. 
  // reminder this works without jQuery .ready() only because this script is the last element in the document.
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();

    function download_image(){
        // Dump the canvas contents to a file.
        var canvas = document.getElementById("myCanvas");
        canvas.toBlob(function(blob) {
            saveAs(blob, "output.png");
        }, "image/png");
    };
</script>
zipzit
  • 3,778
  • 4
  • 35
  • 63