尝试使用按钮将 html canvas 下载为图像时出现有趣的下载错误

Question

当我第一次单击该按钮时，它不起作用。第二次点击时，它会下载 1 张图片。我第三次点击它下载 2 张图片。在我第四次点击它时，它下载了 3 张图片。所以1-0、2-1、3-2、4-3。它们也会立即下载，不会询问保存在哪里。

js:

  function xyz(){

  const text =canvas.api.getCanvasAsImage();

  const download = document.getElementById('download');

  download.addEventListener('click', function(e) {

  var link = document.createElement('a');

  link.download = 'download.png';

  link.href = text;

  link.click();

  link.delete;

});

}

html:

<button  onclick="xyz()" id="download">Download</button>

我刚刚开始学习javascript。我正在尝试通过检查应用程序来学习。我不明白为什么会发生这些，因此无法解决问题。

Answer 1

当我第一次单击该按钮时，它不起作用。第二次点击时，它会下载 1 张图片。我第三次点击它下载 2 张图片。在我第四次点击它时，它下载了 3 张图片。所以1-0、2-1、3-2、4-3。它们也会立即下载，不会询问保存在哪里。js:&nbsp; function xyz(){&nbsp; const text =canvas.api.getCanvasAsImage();&nbsp; const download = document.getElementById('download');&nbsp; download.addEventListener('click', function(e) {&nbsp; var link = document.createElement('a');&nbsp; link.download = 'download.png';&nbsp; link.href = text;&nbsp; link.click();&nbsp; link.delete;});}html:<button&nbsp; onclick="xyz()" id="download">Download</button>我刚刚开始学习javascript。我正在尝试通过检查应用程序来学习。我不明白为什么会发生这些，因此无法解决问题。