我可以下载 base64 格式的图片吗？

Question

我正在开发一个 React 应用程序，并且我在 NodeJS 中有一个后端。在我的 Mongo 架构中，我有一个存储多个字符串的数组，这些字符串是一些图像。我将它们保存为 base64。现在我想在我的应用程序中显示它们，与 img 标签中的 src 完美配合，但我想创建一个允许用户下载这些图片的按钮，有什么解决方案吗？我可以转换回该字符串并使其可下载吗？非常感谢您的宝贵时间，我正在等待您的想法！

Answer 1

注意：代码片段中的示例将无法实时使用，因为没有 allow-downloads 的 Stack Overflow 沙箱代码片段，但它们应该可以在您的页面上使用。

根据您的具体用例，您有不同的选择。最简单的方法是使用带有 download 属性的 <a> 标签而不是按钮，如下所示：

<a download="myImage.gif" href="data:image/gif;base64,R0lGODdhEAAQAMwAAPj7+FmhUYjNfGuxYYDJdYTIeanOpT+DOTuANXi/bGOrWj6CONzv2sPjv2CmV1unU4zPgISg6DJnJ3ImTh8Mtbs00aNP1CZSGy0YqLEn47RgXW8amasW7XWsmmvX2iuXiwAAAAAEAAQAAAFVyAgjmRpnihqGCkpDQPbGkNUOFk6DZqgHCNGg2T4QAQBoIiRSAwBE4VA4FACKgkB5NGReASFZEmxsQ0whPDi9BiACYQAInXhwOUtgCUQoORFCGt/g4QAIQA7">Download GIF</a>

如果您需要继续使用某个按钮并希望以编程方式触发下载，您可以创建一个 <a> 标签（不显示它）并触发点击：

const a = document.createElement('a')
a.download = 'myImage.gif'
a.href = 'data:image/gif;base64,R0lGODdhEAAQAMwAAPj7+FmhUYjNfGuxYYDJdYTIeanOpT+DOTuANXi/bGOrWj6CONzv2sPjv2CmV1unU4zPgISg6DJnJ3ImTh8Mtbs00aNP1CZSGy0YqLEn47RgXW8amasW7XWsmmvX2iuXiwAAAAAEAAQAAAFVyAgjmRpnihqGCkpDQPbGkNUOFk6DZqgHCNGg2T4QAQBoIiRSAwBE4VA4FACKgkB5NGReASFZEmxsQ0whPDi9BiACYQAInXhwOUtgCUQoORFCGt/g4QAIQA7'
a.click()

（如果您需要支持旧版浏览器，您可能需要临时将标签插入 DOM 并在 setTimeout(..., 0) 中触发点击。）

您也可以像 shown here 一样使用对象 URL，但由于您已经有了这样的 URI，因此使用数据 URI 路由可能更容易。

我可以下载 base64 格式的图片吗？

Can I download an image if it's in base64 format?

base64

reactjs