別の関数内で1つの関数を呼び出す方法Jquery

Question

このボタンをクリックすると、キャンバスに変換してイメージをダウンロードするなどの機能に必要な保存ボタンが1つ表示されます。私が呼ぶことを試みたが、私は正しくないボタンを救う上で2回クリックする必要が別の関数のこの内部を呼び出す方法

 $(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>

、私はワンクリックでのことを教えてくださいこの2つの機能を実行する必要があります。

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

、問題が異なることがあります。あなたは両方ののonclick方法を実行見ることができるように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") 
    });   
}); 

。あなたのコードの更新について

：

私はおそらくこのような何かしようとするだろう：

あなたはをクリックします：ので、あなたの質問私が理解したことはあるが見て、

$(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

[OK]を'save_btn'ボタンをクリックし、最初に 'html2Canvas'関数を実行します。これが完了したら、別の機能を実行します。あなたはこのような何かをしたい場合は、私は2つの別々の機能を作成することを提案し、として繰延べの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); 
    }); 
}