Nodejs進階：如何將圖片轉(zhuǎn)成datauri嵌入到網(wǎng)頁中去實例
更新時間：2016年11月21日 09:19:00 作者：程序猿小卡
這篇文章主要介紹了Nodejs進階：如何將圖片轉(zhuǎn)成datauri嵌入到網(wǎng)頁中去,有興趣的可以了解一下。
問題：將圖片轉(zhuǎn)成datauri
今天，在QQ群有個群友問了個問題：“nodejs讀取圖片，轉(zhuǎn)成base64，怎么讀取呢？” 想了一下，他想問的應該是 怎么樣把圖片嵌入到網(wǎng)頁中去，即如何把圖片轉(zhuǎn)成對應的 datauri。
是個不錯的問題，而且也是個很常用的功能?？焖賹崿F(xiàn)了個簡單的demo，這里順便記錄一下。
實現(xiàn)思路
思路很直觀：1、讀取圖片二進制數(shù)據(jù) -> 2、轉(zhuǎn)成base64字符串 -> 3、轉(zhuǎn)成datauri。
關(guān)于base64的介紹，可以參考阮一峰老師的文章。而 datauri 的格式如下
data:[][;base64],
具體到png圖片，大概如下，其中 “xxx” 就是前面的base64字符串了。接下來，我們看下在nodejs里該如何實現(xiàn)
data: image/png;base64, xxx
具體實現(xiàn)
首先，讀取本地圖片二進制數(shù)據(jù)。
var fs = require('fs');
var filepath = './1.png';
var bData = fs.readFileSync(filepath);
然后，將二進制數(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);
demo地址
demo地址請點擊這里
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了在node.js中怎么屏蔽掉favicon.ico的請求,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
這篇文章主要為大家介紹了npm發(fā)包實踐使用gRPC教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
node.js使用stream模塊實現(xiàn)自定義流示例
這篇文章主要介紹了node.js使用stream模塊實現(xiàn)自定義流,結(jié)合實例形式詳細分析了node.js基于stream模塊實現(xiàn)自定義的可讀流、可寫流、可讀寫流等相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了詳解nodejs微信公眾號開發(fā)——6.自定義菜單，自定義菜單能夠幫助公眾號豐富界面，讓用戶更好更快地理解公眾號的功能。2017-04-04
基于Express實現(xiàn)遞歸遍歷文件和CRUD操作
在現(xiàn)代的?Web?應用開發(fā)中，文件管理是一個常見而重要的需求，所以本文就來講講如何利用?Express?框架，在遞歸遍歷文件之后實現(xiàn)強大的?CRUD?操作，構(gòu)建一個功能完善的文件管理系統(tǒng)，感興趣的可以了解一下2023-06-06
這篇文章主要介紹了簡述pm2常用命令集合及配置文件說明,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
Koa2微信公眾號開發(fā)之本地開發(fā)調(diào)試環(huán)境搭建
本篇文章主要介紹了Koa2微信公眾號開發(fā)之本地開發(fā)調(diào)試環(huán)境搭建，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了150行Node.js實現(xiàn)的dns代理工具，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了詳解一個基于套接字實現(xiàn)長連接的express，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要介紹了50行代碼，Node爬蟲練手項目，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04