图像被多次下载

Question

我正在尝试将页面的某些区域下载为图像。 为此，我使用了html2canvas.js。 那件事运行良好，但我的问题是当我单击下载链接图像时会多次下载，除非我关闭页面，否则它不会停止。 我不知道我错在哪里以及为什么会发生这种情况。我在这里发布我的代码，请帮助我。

函数下载图像。

<script>
function genImageFile() {
html2canvas($('.pvtRendererArea')[0]).then(function (canvas) {
if (navigator.userAgent.indexOf("MSIE ") > 0 ||
navigator.userAgent.match(/Trident.*rv:11./)) {
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob, 'Test file.png');
} else {
$('#mytest').attr('href', canvas.toDataURL("image/png"));
$('#mytest').attr('download', $('#title').text() + '.png');
$('#mytest')[0].click();
}
}
)
};
</script>

我调用该函数的 Html：

<a onclick="genImageFile()" id="mytest" value="Image View" class="button"><br> PNG </a>

Answer 1

您可以使用以下代码

<script>
function genImageFile() {
html2canvas($('.pvtRendererArea')[0]).then(function (canvas) {
if (navigator.userAgent.indexOf("MSIE ") > 0 ||
navigator.userAgent.match(/Trident.*rv:11./)) {
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob, 'Test file.png');
} else {
var link = document.createElement('a');
link.download = $('#title').text() + '.png';
link.href = canvas.toDataURL("image/png");
link.click();
}
}
)
};
</script>