How to force a download instead of opening the file?

Question

So basically, I am using a simple library called HTML2Canvas

This is my current code working great and is being called from an onclick event from a button:

function saveForm()
{
    html2canvas(document.body, {
            onrendered: function(canvas) {
                document.body.appendChild(canvas);
            }
        });
}

Basically, all it does is take a screen shot and append it to the bottom of the page.

There was already a question similar to this, although the answer did not work and the download is always a corrupt jpg file: html2canvas saving as a jpeg without opening in browser

Would there be a way to force a download within this function instead of appending it to the bottom of the page?

Answer 1

1. Use canvas.toDataURL to get the canvas content as an image src
2. open a window/popup
3. add an <img> to the popup
4. assign the image src as src for the image

---

function saveForm() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
            var img = canvas.toDataURL("image/png");
            var open = window.open('','','width=500,height=500')
            open.document.write('<img id="img" style="width="400">');
            open.document.getElementById('img').setAttribute('src', img);
        }
    });
}

Tested the code inside onrendered, and it works for sure - but not along with html2canvas.

If you right click on the image in the popup -> save image as, the saved image is valid.

The reason why I am using setAttribute and not simply src="..." is that if you assign the data src as string the image get corrupted.

---

Edit
I know :( I think you have to set HTTP Headers to force a download, and this can only be done by the server (correct me if I am wrong). I think of a "proxy" on the server like this mockup, download.php :

<?
$src=$_POST['src'];
header('Content-Type: image/png');
header('Content-Disposition: inline; filename="download.png"');
header('Content-Length: '.count($src));
echo $src;
?>

and call it by

var img = canvas.toDataURL("image/png");
window.open('download.php?src='+img);

But then you will face a lot of Request-URI Too Large-messages, unless all your canvas-images is in icon-size.

A second way - and probably the one that would work - would be to save img in a table on the server through ajax, eg calling a script with img src that saves it. When this call is finished, you could call another server script with the correct headers for image download, including the img src saved just before. But this is a more extensive approach you could try yourself..?

Answer 2

Here is a solution that builds on the accepted one to enable a download button without server-side code using jQuery.

https://codepen.io/nathansouza/pen/OXdJbo

function download(url){
  var a = $("<a style='display:none' id='js-downloder'>")
  .attr("href", url)
  .attr("download", "test.png")
  .appendTo("body");

  a[0].click();

  a.remove();
}

function saveCapture(element) {
  html2canvas(element).then(function(canvas) {
    download(canvas.toDataURL("image/png"));
  })
}

$('#btnDownload').click(function(){
  var element = document.querySelector("#capture");
  saveCapture(element)
})