abstract：問題：將圖片轉(zhuǎn)成datauri今天，在QQ群有個(gè)群友問了個(gè)問題：“nodejs讀取圖片，轉(zhuǎn)成base64，怎么讀取呢？” 想了一下，他想問的應(yīng)該是 怎么樣把圖片嵌入到網(wǎng)頁中去，即如何把圖片轉(zhuǎn)成對應(yīng)的 datauri。是個(gè)不錯(cuò)的問題，而且也是個(gè)很常用的功能?？焖賹?shí)現(xiàn)了個(gè)簡單的demo，這里順便記錄一下。實(shí)現(xiàn)思路思路很直觀：1、讀取圖片二進(jìn)制數(shù)據(jù) -> 2、轉(zhuǎn)成base64字符串 -> 3

問題：將圖片轉(zhuǎn)成datauri

今天，在QQ群有個(gè)群友問了個(gè)問題：“nodejs讀取圖片，轉(zhuǎn)成base64，怎么讀取呢？” 想了一下，他想問的應(yīng)該是 怎么樣把圖片嵌入到網(wǎng)頁中去，即如何把圖片轉(zhuǎn)成對應(yīng)的 datauri。

是個(gè)不錯(cuò)的問題，而且也是個(gè)很常用的功能。快速實(shí)現(xiàn)了個(gè)簡單的demo，這里順便記錄一下。

實(shí)現(xiàn)思路

思路很直觀：1、讀取圖片二進(jìn)制數(shù)據(jù) -> 2、轉(zhuǎn)成base64字符串 -> 3、轉(zhuǎn)成datauri。

關(guān)于base64的介紹，可以參考阮一峰老師的文章。而 datauri 的格式如下

data:<mediatype>,<data>

具體到png圖片，大概如下，其中 “xxx” 就是前面的base64字符串了。接下來，我們看下在nodejs里該如何實(shí)現(xiàn)

data: image/png;base64, xxx

具體實(shí)現(xiàn)

首先，讀取本地圖片二進(jìn)制數(shù)據(jù)。

var fs = require('fs');
var filepath = './1.png';

var bData = fs.readFileSync(filepath);

然后，將二進(jìn)制數(shù)據(jù)轉(zhuǎn)換成base64編碼的字符串。

var base64Str = bData.toString('base64');

最后，轉(zhuǎn)換成datauri的格式。

var datauri = 'data:image/png;base64,' + base64Str;

完整例子代碼如下，代碼非常少：

var fs = require('fs');
var filepath = './1.png';

var bData = fs.readFileSync(filepath);
var base64Str = bData.toString('base64');
var datauri = 'data:image/png;base64,' + base64Str;

console.log(datauri);

github demo地址

git clone https://github.com/chyingp/nodejs-learning-guide.git
cd nodejs-learning-guide/examples/2016.11.15-base64-datauri
node server.js