My Express应用程序从浏览器接收base64编码的PNG(使用toDataURL()从canvas生成)并将其写入文件 . 但该文件不是有效的图像文件,“文件”实用程序只是将其标识为“数据” .
var body = req.rawBody,
base64Data = body.replace(/^data:image\/png;base64,/,""),
binaryData = new Buffer(base64Data, 'base64').toString('binary');
require("fs").writeFile("out.png", binaryData, "binary", function(err) {
console.log(err); // writes out file without error, but it's not a valid image
});
6 回答
从具有base64字符串的文件转换为png图像 .
有效的4种变体 .
我认为您转换的数据比您需要的多一点 . 使用正确的编码创建缓冲区后,只需将缓冲区写入文件即可 .
new Buffer(...,'base64')通过将输入解释为base64编码的字符串,将输入字符串转换为Buffer,这只是一个字节数组 . 然后你可以把那个字节数组写到文件中 .
更新
正如评论中所提到的,
req.rawBody
不再是一件事 . 如果您正在使用express
/connect
,那么您应该使用bodyParser()
中间件并使用req.body
,如果您使用标准节点执行此操作,则需要聚合传入的data
事件Buffer
对象并在end
回调中执行此图像数据解析 .这是我的完整解决方案,它将读取任何base64图像格式并将其以适当的格式保存在数据库中:
更新
我发现了这个interesting link how to solve your problem in PHP . 我想您忘了将
space
替换为+
,如链接所示 .我把这个圈子从http://images-mediawiki-sites.thefullwiki.org/04/1/7/5/6204600836255205.png作为样本看起来像:
接下来我把它通过了http://www.greywyvern.com/code/php/binary2base64,它让我回头:
将此字符串保存到我在代码中读取的
base64
.我得到了一个圆圈,但有趣的是文件大小已经改变:)...
结束
当您回读图像时,我认为您需要设置 Headers
以PHP页面为例imagepng:
我认为第二行
header('Content-Type: image/png');
,重要的是你的图像不会在浏览器中显示,但只有一堆二进制数据显示给浏览器 .在Express中,您只需使用下面的内容即可 . 我要显示你的gravatar,它位于http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG,当你
curl --head http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG
时是一个jpeg文件 . 我只请求 Headers ,因为其他curl会显示一堆二进制内容(谷歌Chrome立即下载)到控制台:app.js
将 base64 图像转换为文件并将其另存为随机ID或名称的简便方法 .
我还必须保存作为数据URL一部分的Base64编码图像,所以我最终制作了一个小的npm模块,以防万一我(或其他人)将来再次需要这样做 . 它被称为ba64 .
简而言之,它采用带有Base64编码图像的数据URL并将图像保存到文件系统中 . 它可以同步或异步保存 . 它还有两个辅助函数,一个用于获取图像的文件扩展名,另一个用于将Base64编码与
data:
方案前缀分开 .这是一个例子:
安装它:
npm i ba64 -S
. Repo在GitHub上:https://github.com/HarryStevens/ba64 .附:后来我发现ba64可能是该模块的一个坏名称,因为人们可能会认为它做Base64编码和解码,但它没有(有很多模块已经这样做了) . 那好吧 .