我的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-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

其他回答

从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();

我还必须保存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-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

非常简单


const path = require('path');
const { readFile, stat, writeFile } = require("fs/promises");

(async () => {

    try {

        const contents = await readFile(path.join(__dirname, 'clau.jpg'), { encoding: 'base64' });

        console.log(contents);

        await writeFile(path.join(__dirname, 'claumia.jpg'), Buffer.from(contents, 'base64'));

    } catch (error) {
        console.log(error)
    }

})()

这对我来说简单而完美。

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

从映像到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);