Nodejs 使用 Buffer 将图片转为 base64_node buffer转base64

一直以为图片转为 base64 很复杂，结果今天看了下 Docusaurus 的 plugin-ideal-image 插件源码，居然只要一行代码就完事了：

const toBase64 = (extMimeType: string, data: Buffer): string =>
  `data:${extMimeType};base64,${data.toString('base64')}`;
1
2

这里说明下，这个插件使用 sharp 对图片进行处理，最后返回的是一个 Buffer 实例，我们先来了解下 Buffer。首先 Buffer 实际上就是一个固定长度的字节类型数组 byte[]，可以通过以下方式创建 Buffer：

// 创建长度为 10 的 Buffer，每个元素的默认值为 0
const buf1 = Buffer.alloc(10);

// 创建长度为 10 的 Buffer
// 每个元素填充为 1
const buf2 = Buffer.alloc(10, 1);

// 通过数组创建 Buffer
const buf4 = Buffer.from([1, 2, 3]);

// 每个元素会根据 `(value & 255)` 规则转为 0-255 中的值
// 下面这个会得到 [1, 1, 1, 1]
const buf5 = Buffer.from([257, 257.5, -255, '1']);

// 通过字符串创建 Buffer
const buf6 = Buffer.from('tést');

// 可通过第二个参数指定编码规则，默认 utf8
const buf7 = Buffer.from('tést', 'latin1');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在 Nodejs 中，Buffer 是全局对象，不需要手动导入模块就能使用

在 Buffer 实例上有一个 toString 方法，这个方法可以根据传入的编码规则将 Buffer 转为字符串：

const buf = Buffer.from('hello world', 'utf8');

// 默认 utf8
buf.toString(); // hello world
buf.toString('hex'); // 68656c6c6f20776f726c64
buf.toString('base64'); // aGVsbG8gd29ybGQ=
1
2
3
4
5
6

按照这个思路，我们就可以使用 Buffer 将图片转为 Base64。不过如何创建 Buffer 呢，我们可以使用 fs 模块读取文件，然后调用 Buffer.from 创建 Buffer：

const http = require('node:http');
const fs = require('node:fs');
const path = require('node:path');

http.createServer((req, res) => {
  const readable = fs.readFileSync(path.join(__dirname, './2333.png'), 'binary');
  res.end(Buffer.from(readable, 'binary').toString('base64'));
}).listen(3000);
1
2
3
4
5
6
7
8

参考

Buffer - Node.js 官方文档