图片被多次下载

Question

我正在尝试将页面的某些区域下载为图像。为此，我使用了 html2canvas.js。那东西工作得很好，但我的问题是当我点击下载 link 图像被下载多次并且它不会停止，除非我关闭页面。我不知道我错在哪里以及为什么会这样。我在这里发布我的代码，请帮助我。

下载图片的功能。

 <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>

图片被多次下载

image get downloaded multiple times

javascript

html2canvas