Need two clicks to download image from browser

Question

I am creating an image using html2canvas on a button click event. But I have to click the button twice to get the image to download to my system. Is it possible for me to do this on the first click? I am new to javascript/jquery and so any pointers are greatly appreciated.

<script>
    $("#btn").on('click', function () {
       html2canvas($("#maintag"), {
       onrendered: function (canvas) {
            var myCanvas = canvas;
            var initImage = myCanvas.toDataURL("image/png");
            var dnldImage = initImage.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
            $("#btn").attr("download", "test.png").attr("href", dnldImage);
         }
       });
     });
</script>

Possible duplicate of [How to save img to user's local computer using HTML2canvas](https://stackoverflow.com/questions/31656689/how-to-save-img-to-users-local-computer-using-html2canvas) — Andreas, Aug 08 '18 at 16:05

score 2 · Answer 1 · answered Aug 08 '18 at 16:05

you could simulate the second button click inside your code:

<script>
$("#btn").on('click', function () {
   html2canvas($("#maintag"), {
   onrendered: function (canvas) {
        var myCanvas = canvas;
        var initImage = myCanvas.toDataURL("image/png");
        var dnldImage = initImage.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
        $("#btn").attr("download", "test.png").attr("href", dnldImage);
        $("#btn").click();
     }
   });
 });

score 1 · Accepted Answer · answered Aug 08 '18 at 16:03

1

You can trigger it on page load. Add this trigger to the closing of event:

}).click(); // .trigger('click');

$("#btn").on('click', function () {
   html2canvas($("#maintag"), {
   onrendered: function (canvas) {
        var myCanvas = canvas;
        var initImage = myCanvas.toDataURL("image/png");
        var dnldImage = initImage.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
        $("#btn").attr("download", "test.png").attr("href", dnldImage);
     }
   });
 }).click();

answered Aug 08 '18 at 16:03

Jai

74,255
12
74
103

1

why would the click() call be in this position? wouldn't that trigger the click event directly after it has been defined? – Heiner Früh Aug 08 '18 at 16:07
@HeinerFrüh It is because at the page load click event gets bind on the button. So you first click on the button to set the download attribute and on the second click it downloads the image. So, `.click();` triggers when page loads, in the result download attribute get set then you click on the button and download the image. That is the idea. – Jai Aug 09 '18 at 06:05

score 0 · Answer 3 · answered Aug 08 '18 at 16:23

<script type="text/javascript">
$("#btn").on('click', function () {
   html2canvas($("#maintag"), {
   onrendered: downloadCanvas
   });
 });
function downloadCanvas(canvas) {
    var link = document.createElement('a');
    link.setAttribute('download', 'test.png');
    link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
</script>

Need two clicks to download image from browser

3 Answers3