NodeJS: збереження базового64-закодованого зображення на диск


162

Додаток My Express отримує PNG-кодований 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
});

1
Я оновив відповідь, яка, на мою думку, в першу чергу вам потрібна;)
Альфред

Очевидно, що це не те, про що ви просили, але (в моєму випадку) я зрозумів, що найкращим підходом було просто зберігання всього закодованого рядка до моєї бази даних (ви завжди можете завантажити його за допомогою <img src="data:image/png;base64,..." />). Просто варіант, який слід розглянути для інших, використовуючи цю тему як орієнтир.
JSideris

Відповіді:


324

Я думаю, ви перетворюєте дані трохи більше, ніж потрібно. Після створення буфера з належним кодуванням вам просто потрібно записати буфер у файл.

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

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

новий буфер (..., 'base64') перетворить вхідний рядок у буфер, який є лише масивом байтів, інтерпретуючи вхід як кодований рядок base64. Тоді ви можете просто записати цей байтовий масив у файл.

Оновлення

Як згадувалося в коментарях, req.rawBodyце вже не річ. Якщо ви використовуєте express/, connectто вам слід використовувати bodyParser()посереднє програмне забезпечення та використовувати його req.body, а якщо ви робите це за допомогою стандартного вузла, то вам потрібно агрегувати об'єкти вхідних dataподій Bufferі зробити цей аналіз даних зображення в endзворотному дзвінку.


2
Також у вашому прикладі є невелика помилка в аргументі writeFile: "bufferData" -> "dataBuffer".
mahemoff

@RJ. req.rawBodyмістить дані запиту, кодовані як URL-адреса даних: developer.mozilla.org/en-US/docs/data_URI . Тож вам потрібно зняти початкову частину, щоб отримати лише базові дані 64 для збереження.
loganfsmyth

2
Це відмінні речі, дякую! Для тих, хто виявить це в майбутньому, rawBody вже не є властивістю req. Для отримання даних потрібно використовувати проміжне програмне забезпечення експрес-аналізатора тіла.
DigitalDesignDj

10
var base64Data = req.rawBody.split (',') [1];
Аня Ішмухаметова

@notgiorgi Best, щоб задати нове запитання з достатньою кількістю деталей, щоб відтворити свою проблему, і посилайтеся на це, мовляв, ви не можете його працювати.
loganfsmyth

22

це моє повне рішення, яке буде читати будь-який формат зображення base64 і зберігати його у відповідному форматі в базі даних:

    // Save base64 image to disk
    try
    {
        // Decoding base-64 image
        // Source: http://stackoverflow.com/questions/20267939/nodejs-write-base64-image-file
        function decodeBase64Image(dataString) 
        {
          var matches = dataString.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/);
          var response = {};

          if (matches.length !== 3) 
          {
            return new Error('Invalid input string');
          }

          response.type = matches[1];
          response.data = new Buffer(matches[2], 'base64');

          return response;
        }

        // Regular expression for image type:
        // This regular image extracts the "jpeg" from "image/jpeg"
        var imageTypeRegularExpression      = /\/(.*?)$/;      

        // Generate random string
        var crypto                          = require('crypto');
        var seed                            = crypto.randomBytes(20);
        var uniqueSHA1String                = crypto
                                               .createHash('sha1')
                                                .update(seed)
                                                 .digest('hex');

        var base64Data = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAZABkAAD/4Q3zaHR0cDovL25zLmFkb2JlLmN...';

        var imageBuffer                      = decodeBase64Image(base64Data);
        var userUploadedFeedMessagesLocation = '../img/upload/feed/';

        var uniqueRandomImageName            = 'image-' + uniqueSHA1String;
        // This variable is actually an array which has 5 values,
        // The [1] value is the real image extension
        var imageTypeDetected                = imageBuffer
                                                .type
                                                 .match(imageTypeRegularExpression);

        var userUploadedImagePath            = userUploadedFeedMessagesLocation + 
                                               uniqueRandomImageName +
                                               '.' + 
                                               imageTypeDetected[1];

        // Save decoded binary image to disk
        try
        {
        require('fs').writeFile(userUploadedImagePath, imageBuffer.data,  
                                function() 
                                {
                                  console.log('DEBUG - feed:message: Saved to disk image attached by user:', userUploadedImagePath);
                                });
        }
        catch(error)
        {
            console.log('ERROR:', error);
        }

    }
    catch(error)
    {
        console.log('ERROR:', error);
    }

хтось тут, щоб відповісти мені ?? щодо цього ??
РМКО

я щойно змінив ваш код. fs.writeFile ("test.jpg", imageBuffer.data, функція (помилка) {json_response ['успіх'] = true; res.json (json_response);}); зображення завантажується , але результат не той, що подобається мені .. Помилка: 502 Bad Gateway на насправді проблема в res.json, чому це не друкує ...
РМКА

18

ОНОВЛЕННЯ

Я знайшов це цікаве посилання, як вирішити вашу проблему в PHP . Думаю, ви забули замінити space, +як показано у посиланні.

Я взяв це коло з http://images-mediawiki-sites.thefullwiki.org/04/1/7/5/6204600836255205.png як зразок, який виглядає так:

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

Я повертаю коло назад, але найсмішніше те, що розмір файлів змінився:) ...

Кінець

Коли ви читаєте зображення назад, я думаю, вам потрібно налаштувати заголовки

Візьмемо для прикладу imagepng зі сторінки PHP:

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

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

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

Я думаю, що другий рядок header('Content-Type: image/png');важливий, інакше ваше зображення не відображатиметься в браузері, а лише браузер показує купу бінарних даних.

В Express ви просто використали б щось на кшталт нижче. Я покажу ваш граватар, який розміщено за адресою http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG і є файлом jpeg curl --head http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG. Я прошу лише заголовки, тому що в іншому випадку curl відобразить купу бінарних речей (Google 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

Дякую Альфреде, але в цьому мінімальному тестовому випадку я нічого не надсилаю назад із сервера. Я просто записую файл на диск на сервері, і, здається, сам файл не є дійсним зображенням. Я досить впевнений, що base64 має рацію, але, мабуть, існує проблема виписати його як двійкове.
mahemoff

1
Вибачте, я неправильно розумію питання: $. Я спробую ще раз.
Альфред

1
Дякую за оновлення, але підміна місця не працювала для мене, і насправді це було не потрібно, коли я застосував рішення Логана. Для довідки, у моєму тестовому випадку полотно дуже просте: var context = canvas.getContext ('2d'); context.fillStyle = "# f89"; context.fillRect (50,50,100,100);
mahemoff

Гаразд, тому що я отримав зображення, коли я це зробив, але принаймні ваша проблема була вирішена: P
Альфред

Цікаво, не впевнений, чому toString ("двійковий") не зіпсував це у вашому випадку. У будь-якому випадку пробіли природним чином не повинні з’являтися в base64, тому заміна має бути суперечкою. Це з прикладом, який я все-таки надав. (Я спробував варіант із введеними вручну новими рядками, після прочитання специфікації MIME потрібні рядки не більше 72 символів, здебільшого з паранойї ... Виявляється, працює з новими рядками або без них, поки toString ("бінарний") ) скидається.)
mahemoff

6

Я також повинен був зберегти закодовані зображення Base64, які є частиною URL-адрес даних, тому я в кінцевому підсумку створив невеликий модуль npm, щоб зробити це у випадку, якщо мені (або комусь іншому) потрібно буде це зробити в майбутньому. Це називається ba64 .

Простіше кажучи, вона займає URL-адресу даних із закодованим зображенням Base64 і зберігає зображення у вашій файловій системі. Він може зберігати синхронно або асинхронно. Він також має дві допоміжні функції, одну для отримання розширення файлу зображення, а другу для відділення кодування Base64 від data:префікса схеми.

Ось приклад:

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 .

PS Мені пізніше прийшло в голову, що ba64 - це, мабуть, погана назва модуля, оскільки люди можуть припустити, що він кодує та декодує Base64, а це не так (є безліч модулів, які це вже роблять). Що ж, добре.



1

Простий спосіб конвертувати зображення base64 у файл та зберегти як якийсь випадковий ідентифікатор чи ім'я.

// 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

1

Перетворення з файлу з рядком 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();

1

Нижче функція для збереження файлів, просто передайте файл base64, він повертає ім'я файлу, зберігайте його в БД.

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

1
Працювали для мене. І його можна використовувати для будь-яких конверсій base64. Він обробляє кожен файл генерично. Дякую!
Сампайо

1

Ви можете використовувати сторонні бібліотеки, наприклад base64-img або base64-to-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
  1. 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
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.