Question

我正在使用html2canvas javascript将html div转换为image文件。所有脚本都运行良好，它可以正确地将html div转换为图像。

但是当我向href添加响应（锚链接）并使用ajax触发它时，它不会触发锚链接。

这是我的代码，

Html代码：

<div id="mainDiv">

<h1>Heading H1</h1>
<p>Download Image using ajax and php</p>

</div>

<div>
<a id="download">Download Image</a><br/>
<a id="download-image" href="" download>Download</a>
</div>

Ajax代码

<script>

    $('#download').on('click', function () {
html2canvas([document.getElementById('mainDiv')], {
    onrendered: function (canvas) {
        var imagedata = canvas.toDataURL('image/png');
        var imgdata = imagedata.replace(/^data:image\/(png|jpg);base64,/, "");
        //ajax call to save image inside folder
        $.ajax({
            url: 'save_image.php',
            data: {
                   imgdata:imgdata
                   },
            type: 'post',
            success: function (response) {   
               $('#download-image').attr('href', response).trigger('click');
               //$('#downlaod-image').trigger('click');
            }
        });
    }
});
});

</script>

Answer 1

点击该链接实际上会重新加载您的网页。它仍将执行 html2canvas（），但是Ajax调用的响应将永远不会被处理，因为那时页面已经被重新加载。

因此，在点击处理程序结束之前（在调用 html2canvas 之后）添加return false，取消默认超链接操作。

Ajax锚点链接触发器不起作用

1 个答案: