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


問題:將圖片轉成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);

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/blog/2008/06/base64.html
Data URIs:https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM