問題：將圖片轉成datauri

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

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

實現思路

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

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

data:[][;base64],

具體到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);

demo地址

demo地址請點擊這里

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。