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

Question

当我第一次点击这个按钮时，它不工作。在我的第二次点击它下载一张图片。我的第三次点击下载了2张图片。在我的第4次点击它下载了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

你现在基本上是在做两件事。

因此，当有人单击按钮时，您将调用函数xyz。在这里，您附加了另一个单击侦听器，以便第二次，xyz和该侦听器都将触发。

你可以这样写你的xzy：

function xyz(){
  const text = canvas.api.getCanvasAsImage();
  var link = document.createElement('a');
  link.download = 'download.png';
  link.href = text;
  link.click();
  link.delete;
}

这应该只会在每次点击时下载一次download.png文件。

至于位置，这不是默认行为，它只会下载到您的下载，这是因为我们强制下载图像。这不是用户可选的事情。

我希望这是有意义的，所以在使用onclick时请注意，您不必进行绑定。

可选方法

但是，如果您希望使用非内联脚本，也可以执行此操作

<button  id="download">Download</button>

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

希望这对你有帮助！✌️