如何調用另一個函數內的一個函數Jquery

Question

我有一個保存按鈕，通過單擊此按鈕它應該做的功能，如轉換爲畫布，需要下載圖像。

 $(document).ready(function(){ \t 
 
      var element = $("#bgcolor"); // global variable 
 
      var getCanvas; // global variable 
 
       
 
       $("#save_btn").on('click', function() { 
 
        html2canvas(element, { 
 
        onrendered: function (canvas) { 
 
          getCanvas = canvas; 
 
         } 
 
        }); 
 
       }); 
 
      
 
      \t $("#save_btne").on('click', function() { 
 
       var imgageData = getCanvas.toDataURL("image/png"); 
 
       
 
       var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream"); 
 
       $("#save_btne").attr("download", "revbay.png").attr("href", newData); 
 
      \t });   
 
      }); 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="save_btn">Save</a>

如何調用該另一個功能席力圖召的內部，但是我需要點擊兩次上保存按鈕，這是不正確的，請讓我知道，通過點擊它會執行這兩個功能。

Answer 1

你可以做一個單一的點擊事件，在頁面加載初始化html2canvas，追加的URL保存畫布被保存後，使用隱藏的鏈接，並觸發其上的點擊：

html2canvas(document.body, { 
    onrendered: function(canvas) { 
    getCanvas = canvas; 
    $("body").append('<a id="save_btn">save</a><a id="hidden">save</a>'); 
    } 
}); 
$("body").on('click',"#save_btn", function() { 
    var imgageData = getCanvas.toDataURL("image/png"); 

    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream"); 
    $("#hidden").attr("download", "revbay.png").attr("href", newData); 
    $("#hidden")[0].click();//trigger the download 
}); 

演示：https://jsfiddle.net/yxmv1rmu/1/

另一種解決方案將在點擊事件來觸發html2canvas：

$("body").on('click', "#save_btn", function() { 
    html2canvas(document.body, { 
    onrendered: function(canvas) { 
     getCanvas = canvas; 
     var imgageData = getCanvas.toDataURL("image/png"); 

     var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream"); 
     $("#hidden").attr("download", "revbay.png").attr("href", newData); 
     $("#hidden")[0].click(); //trigger the download 
    } 
    }); 

}); 

https://jsfiddle.net/yxmv1rmu/2/

你甚至可以用一個單一的鏈接做到這一點：

$("body").one('click', "#save_btn", function() { 
    html2canvas(document.body, { 
    onrendered: function(canvas) { 
     getCanvas = canvas; 
     var imgageData = getCanvas.toDataURL("image/png"); 

     var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream"); 
     $("#save_btn").attr("download", "revbay.png").attr("href", newData); 
     $("#save_btn")[0].click(); //trigger the download 
    } 
    }); 

}); 

https://jsfiddle.net/yxmv1rmu/3/

Answer 2

正如你可以同時調用運行這個小例子看，問題是不同的。 Example JSFiddle

HTML

<input type="button" id="save_btn" value="CLICK ME"/> 
<p id="result"></p> 

JS

$(document).ready(function(){ 
    $("#save_btn").on('click', function() { 
    $("#result").append("<br>FIRST RAN") 
    }); 

    $("#save_btn").on('click', function() { 
    $("#result").append("<br>SECOND RAN") 
    });   
}); 

正如你可以看到兩個的onclick方法來執行。

關於你的代碼的更新：

我可能會嘗試這樣的事：

$(document).ready(function(){ 
    var element = $("#bgcolor"); // global variable 
    var getCanvas; // global variable 

    $("#save_btn").on('click', function() { 
    html2canvas(element, { 
     onrendered: function (canvas) { 
     var imgageData = canvas.toDataURL("image/png"); 
     var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream"); 
     $("#save_btne").attr("download", "revbay.png").attr("href", newData); 
     } 
    }); 
    });   
}); 

Answer 3

好了，看到你的問題我已經明白的是：

你要點擊在'save_btn'按鈕上，然後首先執行'html2Canvas'功能。一旦完成，你想執行另一個功能。如果你想這樣的事情，我可以建議你創建兩個單獨的功能，並使用jQuery的延期爲：

var element = $("#bgcolor"); // global variable 
var getCanvas; // global variable 
var $flag = $.Deferred(); //Deferred object 

//Now, do event handling as: 

$("#save_btn").on('click', function() { 
    fun1(); 
    fun2(); 
}); 

function fun1(){ 
    html2canvas(element, { 
    onrendered: function (canvas) { 
      getCanvas = canvas; 

      //This is a deferred object. Resolve this whenever you want according to your condition 
      $flag.resolve(); 
    } 
    }); 
} 

function fun2(){ 

    //As soon as $flag deffered object is resolved. This statement will be executed 
    $.when($flag).done(function() { 
     var imgageData = getCanvas.toDataURL("image/png"); 
     var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream"); 
     $("#save_btne").attr("download", "revbay.png").attr("href", newData); 
    }); 
}