Question

我想在页面加载时点击锚点。（将为我下载图像）。我正在使用html2canvas

这是我的锚标记

<?php
$id = $_GET['order_number'];
?>
<a id="btn-Convert-Html2Image" href="#">Download</a>

这里是js代码，位于页面的末尾

 $(document).ready(function(){

    var element = $("#html-content-holder"); // global variable
    var getCanvas; // global variable

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

        var imgageData = getCanvas.toDataURL("image/png");
        // Now browser starts downloading it instead of just showing it
        var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
        $("#btn-Convert-Html2Image").attr("download", "<?php echo 'product_label_'.$id ?>.png").attr("href", newData);
   // });
    jQuery('#btn-Convert-Html2Image').click();

});

我知道jquery的触发器功能可以做到这一点，但它对我不起作用

我评论了这个功能

$("#btn-Convert-Html2Image").on('click', function () {

单击它时工作正常。在评论此行之后，它应该起作用，因为此函数中的代码现在位于document ready函数中。

不知道我在哪里做错了

Answer 1

为什么不尝试制作这样的功能

function ClickFunction() {

    var imgageData = getCanvas.toDataURL("image/png");
    // Now browser starts downloading it instead of just showing it
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#btn-Convert-Html2Image").attr("download", "<?php echo 'product_label_'.$id ?>.png").attr("href", newData);
};

$("#btn-Convert-Html2Image").on("click",ClickFunction)

查看下面的简单示例

＆＃13;

function ClickFunction() {

  $("div").css({
    "background-color": "blue"
  })

}
$("button").on("click", ClickFunction)

＆＃13;

div {
	height:100px;
	width:100px;
	background-color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>
<div>

</div>

＆＃13;

Answer 2

尝试创建一个函数并在页面文档就绪上调用它并单击处理程序

请参阅下面的代码结构以获取示例

$(document).ready(function(){
    var element = $("#html-content-holder"); // global variable
    var getCanvas; // global variable

    html2canvas(element, {
        onrendered: function (canvas) {
            $("#previewImage").append(canvas);
            getCanvas = canvas;
        }
    });

    $("#btn-Convert-Html2Image").on('click', downloadImage);
    downloadImage()
});

function downloadImage{
        var imgageData = getCanvas.toDataURL("image/png");
        // Now browser starts downloading it instead of just showing it
        var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
        $("#btn-Convert-Html2Image").attr("download", "<?php echo 'product_label_'.$id ?>.png").attr("href", newData);
}

jquery触发器单击功能在页面加载时不起作用

2 个答案: