我的Express应用程序正在从浏览器接收base64编码的PNG(从画布生成的toDataURL()),并将其写入一个文件。但该文件不是有效的图像文件,“file”实用程序只是将其标识为“数据”。

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
});

当前回答

我还必须保存Base64编码的图像,这些图像是数据url的一部分,所以我最终制作了一个小的npm模块来做这件事,以防我(或其他人)将来需要再次这样做。叫做ba64。

简单地说,它接受一个带有Base64编码图像的数据URL,并将图像保存到您的文件系统中。它可以同步或异步保存。它还有两个辅助函数,一个用于获取图像的文件扩展名,另一个用于从数据中分离Base64编码:方案前缀。

这里有一个例子:

var ba64 = require("ba64"),
    data_url = "data:image/jpeg;base64,[Base64 encoded image goes here]";

// Save the image synchronously.
ba64.writeImageSync("myimage", data_url); // Saves myimage.jpeg.

// Or save the image asynchronously.
ba64.writeImage("myimage", data_url, function(err){
    if (err) throw err;

    console.log("Image saved successfully");

    // do stuff
});

安装:npm i ba64 -S。Repo在GitHub上:https://github.com/HarryStevens/ba64。

P.S.后来我想到ba64可能是一个不好的模块名称,因为人们可能认为它进行Base64编码和解码,但事实并非如此(有很多模块已经这样做了)。哦。

其他回答

这对我来说简单而完美。

斯科特·罗宾逊的精彩解释

从映像到base64字符串

let buff = fs.readFileSync('stack-abuse-logo.png');
let base64data = buff.toString('base64');

从base64字符串到映像

let buff = Buffer.from(data, 'base64');
fs.writeFileSync('stack-abuse-logo-out.png', buff);

从base64字符串文件转换为png图像。

有4个变体。

var {promisify} = require('util');
var fs = require("fs");

var readFile = promisify(fs.readFile)
var writeFile = promisify(fs.writeFile)

async function run () {

  // variant 1
  var d = await readFile('./1.txt', 'utf8')
  await writeFile("./1.png", d, 'base64')

  // variant 2
  var d = await readFile('./2.txt', 'utf8')
  var dd = new Buffer(d, 'base64')
  await writeFile("./2.png", dd)

  // variant 3
  var d = await readFile('./3.txt')
  await writeFile("./3.png", d.toString('utf8'), 'base64')

  // variant 4
  var d = await readFile('./4.txt')
  var dd = new Buffer(d.toString('utf8'), 'base64')
  await writeFile("./4.png", dd)

}

run();

我认为你转换的数据比你需要的多一点。一旦您使用适当的编码创建了缓冲区,您只需要将缓冲区写入文件。

var base64Data = req.rawBody.replace(/^data:image\/png;base64,/, "");

require("fs").writeFile("out.png", base64Data, 'base64', function(err) {
  console.log(err);
});

新缓冲区(…, 'base64')将通过将输入解释为base64编码的字符串,将输入字符串转换为Buffer,这只是一个字节数组。然后你就可以把这个字节数组写到文件中。

更新

正如评论中提到的,req。rawBody不再是一个东西。如果您正在使用express/connect,那么您应该使用bodyParser()中间件并使用req。如果您使用标准Node来执行此操作,那么您需要聚合传入的数据事件Buffer对象,并在结束回调中进行图像数据解析。

您可以使用第三方库,如base64-img或base64-to-image。

base64-img

const base64Img = require('base64-img');

const data = 'data:image/png;base64,...';
const destpath = 'dir/to/save/image';
const filename = 'some-filename';

base64Img.img(data, destpath, filename, (err, filepath) => {}); // Asynchronous using

const filepath = base64Img.imgSync(data, destpath, filename); // Synchronous using

base64-to-image

const base64ToImage = require('base64-to-image');

const base64Str = 'data:image/png;base64,...';
const path = 'dir/to/save/image/'; // Add trailing slash
const optionalObj = { fileName: 'some-filename', type: 'png' };

const { imageType, fileName } = base64ToImage(base64Str, path, optionalObj); // Only synchronous using

更新

我发现这个有趣的链接如何解决你的PHP问题。我想你忘记用+替换空格,如链接所示。

我从http://images-mediawiki-sites.thefullwiki.org/04/1/7/5/6204600836255205.png上取了这个圆作为样本,看起来像:

然后我把它输入http://www.greywyvern.com/code/php/binary2base64,结果是:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPAi4CAAAAB3RJTUUH1QEHDxEhOnxCRgAAAAlwSFlzAAAK8AAACvABQqw0mAAAAXBJREFUeNrtV0FywzAIxJ3+K/pZyctKXqamji0htEik9qEHc3JkWC2LRPCS6Zh9HIy/AP4FwKf75iHEr6eU6Mt1WzIOFjFL7IFkYBx3zWBVkkeXAUCXwl1tvz2qdBLfJrzK7ixNUmVdTIAB8PMtxHgAsFNNkoExRKA+HocriOQAiC+1kShhACwSRGAEwPP96zYIoE8Pmph9qEWWKcCWRAfA/mkfJ0F6dSoA8KW3CRhn3ZHcW2is9VOsAgoqHblncAsyaCgcbqpUZQnWoGTcp/AnuwCoOUjhIvCvN59UBeoPZ/AYyLm3cWVAjxhpqREVaP0974iVwH51d4AVNaSC8TRNNYDQEFdlzDW9ob10YlvGQm0mQ+elSpcCCBtDgQD7cDFojdx7NIeHJkqi96cOGNkfZOroZsHtlPYoR7TOp3Vmfa5+49uoSSRyjfvc0A1kLx4KC6sNSeDieD1AWhrJLe0y+uy7b9GjP83l+m68AJ72AwSRPN5g7uwUAAAAAElFTkSuQmCC

将这个字符串保存到base64,我从我的代码中读取。

var fs      = require('fs'),
data        = fs.readFileSync('base64', 'utf8'),
base64Data,
binaryData;

base64Data  =   data.replace(/^data:image\/png;base64,/, "");
base64Data  +=  base64Data.replace('+', ' ');
binaryData  =   new Buffer(base64Data, 'base64').toString('binary');

fs.writeFile("out.png", binaryData, "binary", function (err) {
    console.log(err); // writes out file without error, but it's not a valid image
});

我得到一个圈回来,但有趣的是,文件大小已经改变了:)…

END

当你读回图像时,我认为你需要设置标题

以PHP页面图像为例:

<?php
$im = imagecreatefrompng("test.png");

header('Content-Type: image/png');

imagepng($im);
imagedestroy($im);
?>

我认为第二行标题('Content-Type: image/png');很重要,否则你的图像将不会显示在浏览器中,而只是一堆二进制数据显示给浏览器。

在Express中,您只需使用如下所示的内容。我将显示位于http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG的您的gravatar 并且是一个jpeg文件,当你卷曲——头http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG。我只请求头,因为否则卷曲将显示一堆二进制的东西(谷歌Chrome立即去下载)到控制台:

curl --head "http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG"
HTTP/1.1 200 OK
Server: nginx
Date: Wed, 03 Aug 2011 12:11:25 GMT
Content-Type: image/jpeg
Connection: keep-alive
Last-Modified: Mon, 04 Oct 2010 11:54:22 GMT
Content-Disposition: inline; filename="cabf735ce7b8b4471ef46ea54f71832d.jpeg"
Access-Control-Allow-Origin: *
Content-Length: 1258
X-Varnish: 2356636561 2352219240
Via: 1.1 varnish
Expires: Wed, 03 Aug 2011 12:16:25 GMT
Cache-Control: max-age=300
Source-Age: 1482

$ mkdir -p ~/tmp/6922728
$ cd ~/tmp/6922728/
$ touch app.js

app.js

var app = require('express').createServer();

app.get('/', function (req, res) {
    res.contentType('image/jpeg');
    res.sendfile('cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG');
});

app.get('/binary', function (req, res) {
    res.sendfile('cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG');
});

app.listen(3000);

$ wget "http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG"
$ node app.js