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>

Answer 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();