Buffer为什么会这么有意思？

阳光穿透心脏的1/2处 2023-07-04 06:12 18阅读 0赞

应用程序在处理像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流 ##

我们使用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方法，指定编码格式就可以得到相应的数据流，将流写入格式文件就可以达到目的