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

Posted 2023-05-07

【中文标题】尝试使用按钮将 html 画布下载为图像时出现有趣的下载错误

【英文标题】：Interesting download error when trying to download html canvas as image with button

【发布时间】：2020-11-17 16:01:53

【问题描述】：

当我第一次单击按钮时，它不起作用。在我第二次单击时，它会下载 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。我正在尝试通过检查应用程序来学习。我不明白为什么会发生这些，因此无法解决问题。

【参考方案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;
);

希望对您有所帮助！ ✌️