Nodejs進階：如何將圖片轉成datauri嵌入到網頁中去

本文摘錄自《Nodejs學習筆記》，更多章節及更新，請訪問 github主頁地址。

問題：將圖片轉成datauri

今天，在QQ羣有個羣友問了個問題：「nodejs讀取圖片，轉成base64，怎麼讀取呢？」 想了一下，他想問的應該是 怎麼樣把圖片嵌入到網頁中去，即如何把圖片轉成對應的 datauri。

是個不錯的問題，並且也是個很經常使用的功能。快速實現了個簡單的demo，這裏順便記錄一下。

實現思路

思路很直觀：一、讀取圖片二進制數據 -> 二、轉成base64字符串 -> 三、轉成datauri。

關於base64的介紹，能夠參考阮一峯老師的文章。而 datauri 的格式以下

data:<mediatype>,<data>

具體到png圖片，大概以下，其中 「xxx」 就是前面的base64字符串了。接下來，咱們看下在nodejs裏該如何實現

data: image/png;base64, xxx

具體實現

首先，讀取本地圖片二進制數據。

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

var bData = fs.readFileSync(filepath);

而後，將二進制數據轉換成base64編碼的字符串。

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

最後，轉換成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地址

demo地址請點擊這裏，或者

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

而後在瀏覽器訪問 http://127.0.0.1:3000，就能夠看到效果 :)

相關連接

Base64筆記：http://www.ruanyifeng.com/blo...
Data URIs：https://developer.mozilla.org...