Comment puis-je enregistrer une image codée en base64 sur le disque ?

Question

Mon application Express reçoit un PNG codé en base64 du navigateur (généré à partir du canevas avec toDataURL() ) et l'écrit dans un fichier. Mais le fichier n'est pas un fichier image valide, et l'utilitaire "file" l'identifie simplement comme "data".

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

Answer 1

La fonction ci-dessous permet de sauvegarder des fichiers, il suffit de passer votre fichier base64, il retourne le nom du fichier et le sauvegarde dans la base de données.

import fs from 'fs';
 const uuid = require('uuid/v1');

/*Download the base64 image in the server and returns the filename and path of image.*/
function saveImage(baseImage) {
    /*path of the folder where your project is saved. (In my case i got it from config file, root path of project).*/
    const uploadPath = "/home/documents/project";
    //path of folder where you want to save the image.
    const localPath = `${uploadPath}/uploads/images/`;
    //Find extension of file
    const ext = baseImage.substring(baseImage.indexOf("/")+1, baseImage.indexOf(";base64"));
    const fileType = baseImage.substring("data:".length,baseImage.indexOf("/"));
    //Forming regex to extract base64 data of file.
    const regex = new RegExp(`^data:${fileType}\/${ext};base64,`, 'gi');
    //Extract base64 data.
    const base64Data = baseImage.replace(regex, "");
    const filename = `${uuid()}.${ext}`;

    //Check that if directory is present or not.
    if(!fs.existsSync(`${uploadPath}/uploads/`)) {
        fs.mkdirSync(`${uploadPath}/uploads/`);
    }
    if (!fs.existsSync(localPath)) {
        fs.mkdirSync(localPath);
    }
    fs.writeFileSync(localPath+filename, base64Data, 'base64');
    return filename;
}

Answer 2

Vous pouvez utiliser une bibliothèque tierce comme base64-img o base64-image .

1. 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

2. base64-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

Answer 3

Conversion d'un fichier contenant une chaîne de caractères base64 en image png.

4 variantes qui fonctionnent.

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

Answer 4

Une façon simple de convertir base64 dans un fichier et l'enregistrer sous un nom ou un identifiant aléatoire.

// to create some random id or name for your image name
const imgname = new Date().getTime().toString();

// to declare some path to store your converted image
const path = yourpath.png    

// image takes from body which you uploaded
const imgdata = req.body.image;    

// to convert base64 format into random filename
const base64Data = imgdata.replace(/^data:([A-Za-z-+/]+);base64,/, '');
fs.writeFile(path, base64Data, 'base64', (err) => {
    console.log(err);
});

// assigning converted image into your database
req.body.coverImage = imgname