Xalloumokkelos Xalloumokkelos - 6 months ago 30
jQuery Question

How to bind the behavior of second script to the first "on click"?

The following code works like this. You click first on

#btn-Preview-Image
the imge is created and then you click on
#btn-Convert-Html2Image
to download it.

What I want to achieve is to download the image with one button, the first one. How to do this?

JS fiddle example: https://jsfiddle.net/8ypxW/

$(document).ready(function() {
var element = $(".jumbotron"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function() {
html2canvas(element, {
onrendered: function(canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function() {
var imgageData = getCanvas.toDataURL("image/png");
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
});

Answer

You can create an <a> element with download attribute set to data URI; alternatively, you can use window.open() to open new window in a with location set to data URI, which should download file

$(function() {
  $("#btnSave").click(function() {
    html2canvas($("#widget"), {
      onrendered: function(canvas) {
        theCanvas = canvas;
        var imgageData = theCanvas.toDataURL("image/png");
        var newData = imgageData.replace(/^data:image\/png/
                      , "data:application/octet-stream");
        $("<a>", {
            href: newData,
            download: "your_pic_name.png",
            on: {
              click: function() {
                $(this).remove()
              }
            }
          })
          .appendTo("body")[0].click()
      }
    });
  });
});

https://jsfiddle.net/8ypxW/3589/