Функция нажатия триггера jquery не работает при загрузке страницы

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

Попробуйте создать функцию и вызвать ее на странице документа готово и нажмите обработчик

Пожалуйста, обратитесь к структуре вашего кода ниже для примера

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

Answer 2

Почему бы вам не попробовать сделать такую ​​функцию

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) 

посмотрите простой пример ниже

function ClickFunction() {

  $("div").css({
    "background-color": "blue"
  })

}
$("button").on("click", ClickFunction)

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

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

</div>