触发对jquery的另一次单击

我想触发下载按钮，以便预览后自动下载。我尝试了下面的代码，但不起作用

$("#btn-Preview-Image").on('click', function () {
         html2canvas(element, {
         onrendered: function (canvas) {
                $("#previewImage").append(canvas);
                getCanvas = canvas;
             }
         });
         $("#btn-Convert-Html2Image").click() //doesn't work
 });


  //trigger this click below

    $("#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);
    });

---

您需要使用

JQuery

的

trigger（）

函数显式触发单击

更换

$("#btn-Convert-Html2Image").click();

与

$("#btn-Convert-Html2Image").trigger('click');

使用

trigger（'click'）

将触发元素上的

click

事件，该事件与鼠标单击相同

$（“#btn预览图像”）。在（'click'，函数（）{
$（“#btn-Convert-Html2Image”）.trigger（'click'）；
});
$（“#btn-Convert-Html2Image”）。在（'click'，函数（）{
警报（“触发下载”）；
});
。单击是一个单击事件，它将在单击时起作用。它不会触发单击事件

要触发您需要使用的事件

$（“#btn-Convert-Html2Image”）.trigger（'click'）
您的
.click（）
应该像
一样工作。触发器（“click”）
：
.
您很可能在回调函数中遇到异常。
如果
html2canvas
抛出错误，则
$（“#btn-Convert-Html2Image”）.click（）
字符串将被忽略。
我认为您的问题是由于在html2canvas的更高版本上替换了getCanvas。图书馆现在使用承诺

为了创建画布并下载它，您必须定义

通过承诺创建的元素
第二个单击按钮中的引用
您的函数实际上工作正常，问题是由语法问题引起的

我假设
元素
是要转换为画布的屏幕区域：

$("#btn-Preview-Image").on('click', function () {
  html2canvas(document.body).then(function(canvas){
    var appended = document.body.appendChild(canvas);
  });
    console.log("First button");

  }).finish(function(){
      $("#btn-Convert-Html2Image").click() 
});

$("#btn-Convert-Html2Image").on('click', function () {
  this.href = $('canvas')[0].toDataURL('image/png');
  this.download = 'design.png';
  console.log("Second button");
});

注意：我在第一个函数中使用了承诺，因为我们需要等待库构建画布。否则，第二次单击将检测不到我们刚刚创建的画布

$("#btn-Preview-Image").on('click', function () {
  html2canvas(document.body).then(function(canvas){
    var appended = document.body.appendChild(canvas);
  });
    console.log("First button");

  }).finish(function(){
      $("#btn-Convert-Html2Image").click() 
});

$("#btn-Convert-Html2Image").on('click', function () {
  this.href = $('canvas')[0].toDataURL('image/png');
  this.download = 'design.png';
  console.log("Second button");
});