使用Javascript单击并触发下载动态生成的图像

我正在做一个web应用程序，为URL生成QR图像（PNG格式）。如果URL更改，图像也会更改。以下是HTML（size参数表示QR图像的大小）：

我的目标是在访问者单击下载链接时下载图像（而不是由浏览器渲染）。我该怎么做

我搜索了SO，找到了使用Javascript下载静态图像的相关帖子。这里有什么不同吗

更新 我发现这个链接对我很有用

---

实际上，图像是动态生成的还是静态生成的是有区别的。此外，无论浏览器设置如何，它都能保证任何文件类型的下载。

如果我很好地理解了您的问题，您可以像我在JSFIDLE上的示例中所做的那样（我在这里使用了jQuery）：

以下是代码：

$('a').on('click', function(e) {
   var src = ($(e.currentTarget).closest('.image').find('img')[0].src);
   $(e.currentTarget).attr('download', src);
   $(e.currentTarget).click();
   e.preventDefault();
});

---

如果我很好地理解了您的问题，您可以像我在JSFIDLE上的示例（我在这里使用了jQuery）中所做的那样：

以下是代码：

$('a').on('click', function(e) {
   var src = ($(e.currentTarget).closest('.image').find('img')[0].src);
   $(e.currentTarget).attr('download', src);
   $(e.currentTarget).click();
   e.preventDefault();
});

---

如果您可以为图像使用动态源，那么您也可以在锚定中使用动态源。就浏览器而言，实际图像和通过某些php脚本动态生成的图像之间没有区别。因此，您可以使用下载属性技巧使其在任何使用php的情况下都能正常工作

<div class="image">
  <img src="/img?size=150" />             
  <a href="/img?size=150" download="/img?size=150">download</a>
</div>

---

如果您可以为图像使用动态源代码，那么您也可以在锚点中使用动态源代码。就浏览器而言，实际图像和通过某些php脚本动态生成的图像之间没有区别。因此，您可以使用下载属性技巧使其在任何使用php的情况下都能正常工作

<div class="image">
  <img src="/img?size=150" />             
  <a href="/img?size=150" download="/img?size=150">download</a>
</div>

你好，Stefan，谢谢你的来电！您的方法无法阻止浏览器渲染它。事实上，我发现这个链接对我很有用：嗨，Stefan，谢谢你的来电！您的方法无法阻止浏览器渲染它。事实上，我发现这个链接对我很有用：新手，谢谢你的输入。我找到了解决办法。我也上传了你的输入。这很酷，但是如果你使用这个解决方案，你就不需要任何JavaScription了。你的方式不能阻止浏览器打开一个文件。我需要的是在任何浏览器中下载任何类型的文件，无论浏览器设置如何。谢谢我明白了，我曾多次在asp.net项目中使用过它。它工作得很好，但都在桌面上，所以不确定是否使用移动设备。我同意你的看法。此外，你的方法还取决于浏览器设置。谢谢你来帮忙。我们都学会了被帮助和帮助他人。对我们这样的人来说，这也是最伟大的地方！最佳。新手，谢谢你的意见。我找到了解决办法。我也上传了你的输入。这很酷，但是如果你使用这个解决方案，你就不需要任何JavaScription了。你的方式不能阻止浏览器打开一个文件。我需要的是在任何浏览器中下载任何类型的文件，无论浏览器设置如何。谢谢我明白了，我曾多次在asp.net项目中使用过它。它工作得很好，但都在桌面上，所以不确定是否使用移动设备。我同意你的看法。此外，你的方法还取决于浏览器设置。谢谢你来帮忙。我们都学会了被帮助和帮助他人。对我们这样的人来说，这也是最伟大的地方！最好的。