如何将画布图像“data:image/jpeg;base64,..”转换为普通图像文件 - javascript

Posted 2023-03-05

【中文标题】如何将画布图像“data:image/jpeg;base64,..”转换为普通图像文件 - javascript

【英文标题】：how to convert canvas image "data:image/jpeg;base64,.." to normal image file - javascript

【发布时间】：2015-02-20 13:26:25

【问题描述】：

我有

image = canvas.toDataURL("image/png", 1);

但这又回来了

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDA.......

但我需要像src="myimage.png"这样的普通图片

如何从画布中获取它？我用谷歌搜索了很多，似乎找不到我需要的东西......

【问题讨论】：

如果要将base64字符串转换为文件，则必须使用服务器端语言，例如php。如果要搜索，则需要 Base64 或 BLOB 作为关键字。

@Cerbrus：我认为您拥有的副本并不是 OP 想要的。在这里，我们将 base64 代码发布到服务器，以便将其保存到数据库中。在那里，它只是弄清楚如何在客户端下载图像。

【参考方案1】：

您得到的字符串可以用作图像的源属性，您只需创建一个新的Image 元素即可为其分配：

var image = new Image();
image.src = canvas.toDataURL("image/png", 1);
// append image to DOM

编辑：给定 cmets，您希望将其转换为存储在数据库中的内容。您应该将toDataURL 的结果POST 发送到您的服务器。使用服务器端技术的 IO/图像/图形库来解码数据字符串的 base64 编码部分并将其写入新文件。您现在可以将该路径存储在数据库中。

替代方案：只需将整个数据字符串存储在您的数据库中。然后，当您呈现 <img> 标签时，您可以简单地将其转储到 src 属性中：

<img src="<< base-64 encoded data string>>" />

【讨论】：

这是返回 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDA....... 而不是图像文件，我想要普通文件

您是否在寻找如何编写文件或如何将该图像显示为 img 元素？

那个base64字符串是一个图片文件。您的意思是想让浏览器提示您下载/保存图像文件吗？

@Cory 我想从中获取一个文件对象，我可以将其保存到数据库中。 image 在这种情况下是图像文件吗？

@doniyor：你真的想在数据库中存储一个二进制图像文件吗？ （提示：你没有）。这个 Base64 字符串就是你想要的。