Hướng dẫn how to save image from base64 in nodejs? - làm thế nào để lưu hình ảnh từ base64 trong nodejs?

CẬP NHẬT

Tôi đã tìm thấy liên kết thú vị này làm thế nào để giải quyết vấn đề của bạn trong PHP. Tôi nghĩ rằng bạn đã quên thay thế

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

1 bằng

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

2AS được hiển thị trong liên kết.

Tôi đã lấy vòng tròn này từ http://images-mediawiki-sites.thefullwiki.org/04/1/7/5/6204600836255205.png dưới dạng mẫu trông giống như:

Tiếp theo tôi đặt nó qua http://www.greywyvern.com/code/php/binary2base64 đã trả lại cho tôi:

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

Đã lưu chuỗi này vào

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

3 mà tôi đã đọc trong mã của mình.

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

Tôi nhận được một vòng tròn trở lại, nhưng điều buồn cười là các tệp đã thay đổi :) ...

CHẤM DỨT

Khi bạn đọc lại hình ảnh, tôi nghĩ bạn cần thiết lập tiêu đề

Lấy ví dụ ImagePng từ trang PHP:

Tôi nghĩ rằng dòng thứ hai

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

4, rất quan trọng khác, hình ảnh của bạn sẽ không được hiển thị trong trình duyệt, nhưng chỉ là một loạt dữ liệu nhị phân được hiển thị cho trình duyệt.

Trong Express, bạn chỉ cần sử dụng một cái gì đó như dưới đây. Tôi sẽ hiển thị gravatar của bạn được đặt tại http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d= Tôi chỉ yêu cầu các tiêu đề vì những điều khác sẽ hiển thị một loạt các thứ nhị phân (Google Chrome ngay lập tức đi đến tải xuống) để điều khiển:

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

Tìm hiểu cách chuyển đổi hình ảnh thành chuỗi base64 và quay lại hình ảnh.

Bonus:

Bạn cũng sẽ học cách nén hình ảnh với Jimp.

Gần đây, tôi đã tham gia vào một dự án nơi hình ảnh được trả về từ trình duyệt ở định dạng

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

3 và chúng tôi cần viết hình ảnh vào đĩa. Tôi đã thực hiện một số nghiên cứu để xem liệu tôi có thể nhận được bất kỳ lời giải thích chi tiết nào về cách mọi thứ hoạt động với

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

3, bộ đệm, nhị phân và hình ảnh thật nhưng không thể tìm thấy bất kỳ giải pháp nào liên quan đến nodejs.

Cố gắng làm cho nó hoạt động trực tiếp bằng cách đọc một hình ảnh với phương pháp

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

8 và đường ống trong đó trở lại hình ảnh sẽ hoạt động hoàn hảo bởi vì theo mặc định,

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

8 trả về

0 và đó là những gì chúng ta cần. Đây là một ví dụ.

const fs = require("fs");
// Reads file in form buffer => const buffer = fs.readFileSync("path-to-image.jpg");
// Pipes an image with "new-path.jpg" as the name.
fs.writeFileSync("new-path.jpg", buffer);

Mọi thứ có xu hướng trở nên phức tạp hơn một chút khi bạn muốn chuyển đổi chuỗi (base64) thông thường thành một hình ảnh thực tế. Trước tiên, bạn cần chuyển đổi chuỗi của mình thành bộ đệm trước khi lưu nó dưới dạng hình ảnh thực nếu không, bạn sẽ gặp vấn đề.

// Base64 => Buffer => Image

May mắn thay, Node.js cung cấp một mô -đun gốc gọi là bộ đệm có thể được sử dụng để thực hiện mã hóa và giải mã base64. Bộ đệm có sẵn như một đối tượng toàn cầu, điều đó có nghĩa là bạn không cần phải yêu cầu rõ ràng mô -đun này trong ứng dụng của mình.

Trong nội bộ,

0 đại diện cho dữ liệu nhị phân dưới dạng chuỗi byte. Đối tượng bộ đệm cung cấp một số phương thức để thực hiện các chuyển đổi mã hóa và giải mã khác nhau. Điều này bao gồm và từ UTF-8, UCS2, Base64, ASCII, UTF-16 và thậm chí cả sơ đồ mã hóa HEX.

Base64 Mã hóa

Trước hết chúng ta hãy chuyển đổi hình ảnh của chúng tôi thành base64 và sau đó thành bộ đệm

const fs = require("fs");
// Create a base64 string from an image => ztso+Mfuej2mPmLQxgD ...
const base64 = fs.readFileSync("path-to-image.jpg", "base64");
// Convert base64 to buffer => const buffer = Buffer.from(base64, "base64");

Cơ sở64 để hình ảnh

Bây giờ bạn có thể chuyển đổi bộ đệm thành một hình ảnh thực tế chỉ bằng một dòng mã:

// Ống một hình ảnh với New New-path.jpg, tên là tên.fs.writefilesync (Hồi New-path.jpg, bộ đệm);
fs.writeFileSync(“new-path.jpg”, buffer);

Thưởng

Tối ưu hóa hình ảnh rất quan trọng trong những ngày này vì hầu hết các hình ảnh có kích thước lớn và điều này chắc chắn sẽ làm chậm các trang web của chúng tôi. Tôi sẽ sử dụng Jimp để chỉ cho bạn cách giảm chất lượng hình ảnh một cách nhanh chóng bằng cách giảm kích thước của dữ liệu bộ đệm mà chúng tôi nhận được và chuyển đổi nó thành một hình ảnh thực tế.

Cài đặt Jimp:

yarn add jimp
   # or
npm install jimp

Bạn có thể chỉ cần giảm chất lượng hình ảnh của mình xuống 50% chỉ với một vài dòng mã. Tôi sẽ sử dụng chuỗi Base64 làm nguồn dữ liệu của tôi.

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

0

Tôi rất thích cung cấp một số tín dụng bổ sung cho người tạo ra Jimp vì nó giải quyết gần như mọi thứ bạn muốn làm với một hình ảnh thực tế trong NodeJS và không phụ thuộc. Tôi đã không có vấn đề gì khi sử dụng nó trong một ứng dụng điện tử.

Sự kết luận

Chúng ta có thể:

1. Hiểu cách hình ảnh hoạt động trong nodejs trên các giai đoạn khác nhau.
2. Chuyển đổi từ bộ đệm sang base64.
3. Chuyển đổi từ bộ đệm thành một hình ảnh thực tế.
4. Sử dụng Jimp để giảm kích thước hình ảnh.

Nếu bạn đã đến điểm này, thì tôi sẽ nói lời chúc mừng vì bạn rất tuyệt vời :).

Tôi hy vọng bạn tìm thấy điều này hữu ích.

Codding hạnh phúc 💻 🙂

Làm cách nào để lưu một hình ảnh trong Base64 nút JS?

Làm thế nào để bạn giải mã một bộ đệm nhị phân cho một hình ảnh trong nút js?

Làm cách nào để chuyển đổi hình ảnh thành base64?