Buffer为什么会这么有意思？

应用程序在处理像TCP流或文件流时，必须使用二进制数据。Node.js通过Buffer类来处理：

处理文件流

假设我们已经有一个文本文件test.txt,我们使用readFile读取该文件

const fs = require('fs');
fs.readFile('./test.txt', (err, data) => {
    if (err) throw err;
    console.log(data);
    console.log(Buffer.isBuffer(data));
})
前端学习裙：950919261

我们直接打印出data，可以看到控制台输出类似<Buffer 2f 2f 20 4e 6f ... >，使用Buffer.isBuffer()判断data是否继承自Buffer类可以得到结果为true

处理TCP流

const https = require('https');
const url = 'https://b-gold-cdn.xitu.io/v3/static/img/frontend.1dae74a.png';
https.get(url, res => {
    var buf = [];
    res.on('data', (chunk) => {
        console.log(Buffer.isBuffer(chunk));
        console.log(chunk);
        buf.push(Buffer.from(chunk));
    })
    res.on('end', () => {
        fs.writeFileSync('./demo.png', Buffer.concat(buf));
    })
})

我们使用https.get请求一个图片地址，在回调函数中监听data事件，我们可以看到Buffer.isBuffer(chunk)每次的输出结果都是true。

除了处理上面到两种情况，我们还可以用Buffer做哪些有意思到事情呢？

我们来了解一个概念，data URLs

Data URLs，即前缀为data:协议的URL，其允许内容创建者向文档中嵌入小文件。 Data URLs 由四个部分组成：前缀(data:)、指示数据类型的MIME类型、如果非文本则为可选的base64标记、数据格式： data:[<mediatype>][;base64],<data> 。二进制文件可以使用base64编码以data URIs的方式呈现。

利用data URLs处理图片文件

const fs = require('fs');
var mime = 'image/png';
var encoding = 'base64';
var uri = 'data:' + mime + ';' + encoding + ',';
var data = fs.readFileSync('./demo.png').toString(encoding);
var uri = 'data:' + '[charset='+mime+']' + ';' + encoding + ',' + data;
console.log(uri);

可以看到打印出类似如下的字符串： data:[charset=image/png];base64,iVBORw0KGgoAAAANSUhEUgAAA8EAAAMhCAIAAABHbiTVAAAACXBIWXMAAAsSAAALEgHS3X78AAAgAElEQVR42uzdfWwc550n+K88S1HDmKwOTEGi6FG3ZcEicYi7BMmSsIDcRUVZa+E4LOpuZp...FPn/wPiXQKZbxliAgAAAABJRU5ErkJggg==

是不是感觉有点熟悉？我们使用webpack做构建的时候，经常将小图片转换成base64编码内嵌在html中，我们上面就是在做这个操作。

我们新建一个html，并创建一个img标签，将打印的内容复制到img标签的src属性中，打开html就可以看到图片正常显示了。反之，如果我们只有编码后的字符串，怎么将其转换为.png或.jpg的图片格式呢，如下：

var uri='data:[charset=image/png];base64,iVBORw0KGgoAAAANSUhEUgAAA8EAAAMhCAIAAABHbiTVAAAACXBIWXMAAAsSAAALEgHS3X78AAAgAElEQVR42uzdfWwc550n+K88S1HDmKwOTEGi6FG3ZcEicYi7BMmSsIDcRUVZa+E4LOpuZp...FPn/wPiXQKZbxliAgAAAABJRU5ErkJggg==';
var data = uri.split(',')[1];//提取出数据部分
var buf = Buffer.from(data, 'base64');
fs.writeFileSync('./test.png', buf);

我们利用Buffer.from方法，指定编码格式就可以得到相应的数据流，将流写入格式文件就可以达到目的

前端Allez

发布了104 篇原创文章 · 获赞 13 · 访问量 2万+

私信关注