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

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

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

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

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

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

data:[][;base64],

具體到png圖片，大概如下，其中 “xxx” 就是前面的base64字符串了。接下來(lái)，我們看下在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);

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。