Xalloumokkelos Xalloumokkelos - 1 year ago 103
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

the imge is created and then you click on
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) {
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 Source

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() {