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

Question

当我第一次点击按钮时，它不起作用。在我第二次点击时，它会下载 1 张图片。我第三次点击它下载了 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;
});

希望对您有所帮助！ ✌️

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

Interesting download error when trying to download html canvas as image with button

html

javascript

canvas

download

save

可选方法