Javascript 需要两次单击才能从浏览器下载图像

我在按钮点击事件中使用html2canvas创建图像。但是我必须点击两次按钮才能将图像下载到我的系统中。我是否可以在第一次单击时执行此操作？我是javascript/jquery新手，因此非常感谢任何指针

<script>
    $("#btn").on('click', function () {
       html2canvas($("#maintag"), {
       onrendered: function (canvas) {
            var myCanvas = canvas;
            var initImage = myCanvas.toDataURL("image/png");
            var dnldImage = initImage.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
            $("#btn").attr("download", "test.png").attr("href", dnldImage);
         }
       });
     });
</script>

$（“#btn”）。在（'click'，函数（）{
html2canvas（$（“#maintag”）{
onrendered：函数（画布）{
var myCanvas=画布；
var initImage=myCanvas.toDataURL（“image/png”）；
var dnldImage=initImage.replace（/^data:image\/[^；]/，'data:application/octet stream'）；
$（“#btn”）.attr（“下载”，“test.png”）.attr（“href”，dnldImage）；
}
});
});

您可以在页面加载时触发它。将此触发器添加到关闭事件：

}).click(); // .trigger('click');

---

---

您可以在页面加载时触发它。将此触发器添加到关闭事件：

}).click(); // .trigger('click');

---

---

您可以在代码中模拟第二次单击按钮：

<script>
$("#btn").on('click', function () {
   html2canvas($("#maintag"), {
   onrendered: function (canvas) {
        var myCanvas = canvas;
        var initImage = myCanvas.toDataURL("image/png");
        var dnldImage = initImage.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
        $("#btn").attr("download", "test.png").attr("href", dnldImage);
        $("#btn").click();
     }
   });
 });

$（“#btn”）。在（'click'，函数（）{
html2canvas（$（“#maintag”）{
onrendered：函数（画布）{
var myCanvas=画布；
var initImage=myCanvas.toDataURL（“image/png”）；
var dnldImage=initImage.replace（/^data:image\/[^；]/，'data:application/octet stream'）；
$（“#btn”）.attr（“下载”，“test.png”）.attr（“href”，dnldImage）；
$（“#btn”）。单击（）；
}
});
});

---

您可以在代码中模拟第二个按钮单击：

<script>
$("#btn").on('click', function () {
   html2canvas($("#maintag"), {
   onrendered: function (canvas) {
        var myCanvas = canvas;
        var initImage = myCanvas.toDataURL("image/png");
        var dnldImage = initImage.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
        $("#btn").attr("download", "test.png").attr("href", dnldImage);
        $("#btn").click();
     }
   });
 });

$（“#btn”）。在（'click'，函数（）{
html2canvas（$（“#maintag”）{
onrendered：函数（画布）{
var myCanvas=画布；
var initImage=myCanvas.toDataURL（“image/png”）；
var dnldImage=initImage.replace（/^data:image\/[^；]/，'data:application/octet stream'）；
$（“#btn”）.attr（“下载”，“test.png”）.attr（“href”，dnldImage）；
$（“#btn”）。单击（）；
}
});
});

$（“#btn”）。在（'click'，函数（）{
html2canvas（$（“#maintag”）{
onrendered:下载画布
});
});
函数下载画布（画布）{
var link=document.createElement（'a'）；
link.setAttribute（'download'，'test.png'）；
link.setAttribute（'href'，canvas.toDataURL（“image/png”）.replace（“image/png”，“image/octet-stream”）；
document.body.appendChild（链接）；
link.click（）；
document.body.removeChild（link）；
}

$（“#btn”）。在（'click'，函数（）{
html2canvas（$（“#maintag”）{
onrendered:下载画布
});
});
函数下载画布（画布）{
var link=document.createElement（'a'）；
link.setAttribute（'download'，'test.png'）；
link.setAttribute（'href'，canvas.toDataURL（“image/png”）.replace（“image/png”，“image/octet-stream”）；
document.body.appendChild（链接）；
link.click（）；
document.body.removeChild（link）；
}

click（）调用为什么会处于此位置？这不会在定义了click事件之后直接触发它吗？@HeinerFrüh这是因为在页面加载时，click事件在按钮上绑定。因此，您首先单击按钮设置下载属性，然后在第二次单击时下载图像。所以，

.click（）在页面加载时触发，在结果下载属性get set中，然后单击按钮并下载图像。这就是想法。为什么click（）调用会处于这个位置？这不会在定义了click事件之后直接触发它吗？@HeinerFrüh这是因为在页面加载时，click事件在按钮上绑定。因此，您首先单击按钮设置下载属性，然后在第二次单击时下载图像。所以，
.click（）在页面加载时触发，在结果下载属性get set中，然后单击按钮并下载图像。这就是想法。