Question

我有一个保存按钮，单击此按钮可以执行转换为画布等功能，需要下载图像。

     $(document).ready(function(){	
            var element = $("#bgcolor"); // global variable
            var getCanvas; // global variable
             
                $("#save_btn").on('click', function () {
                     html2canvas(element, {
                     onrendered: function (canvas) {
                            getCanvas = canvas;
                         }
                     });
                });
            
            	$("#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);
            	});         
          });

<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/

另一个解决方案是在click事件中触发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);   
    });
}

如何在另一个函数Jquery

3 个答案: