Nodejs進階：如何將圖片轉成datauri嵌入到網(wǎng)頁中去實例
更新時間：2016年11月21日 09:19:00 作者：程序猿小卡
這篇文章主要介紹了Nodejs進階：如何將圖片轉成datauri嵌入到網(wǎng)頁中去,有興趣的可以了解一下。
問題：將圖片轉成datauri
今天，在QQ群有個群友問了個問題：“nodejs讀取圖片，轉成base64，怎么讀取呢？” 想了一下，他想問的應該是 怎么樣把圖片嵌入到網(wǎng)頁中去，即如何把圖片轉成對應的 datauri。
是個不錯的問題，而且也是個很常用的功能?？焖賹崿F(xiàn)了個簡單的demo，這里順便記錄一下。
實現(xiàn)思路
思路很直觀：1、讀取圖片二進制數(shù)據(jù) -> 2、轉成base64字符串 -> 3、轉成datauri。
關于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ù)轉換成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地址請點擊這里
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文詳細講解了Node.js進程管理之子進程，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
這篇文章主要給大家介紹了關于如何用node優(yōu)雅地打印全鏈路日志的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-03-03
node-red教程之dashboard簡介與輸入型儀表板控件的使用
Node-red支持自定義節(jié)點，當然也就支持自定義圖形化的節(jié)點。也有優(yōu)秀的開發(fā)者把自己建立的圖形化節(jié)點無償分享。這里給出一個股票界面的例子，讓大家看一看優(yōu)秀的node-red界面能做到什么樣子2022-01-01
本文主要介紹了NodeJs調試的步驟，以及實例方法，具有一定的參考作用，需要的朋友可以看下2016-12-12
這篇文章介紹了Node.js進程管理之進程集群，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了node.js中的http.get方法使用說明,本文介紹了http.get的方法說明、語法、接收參數(shù)、使用實例和實現(xiàn)源碼,需要的朋友可以參考下2014-12-12
使用Node.js創(chuàng)建HTTP服務器并實現(xiàn)公網(wǎng)訪問本地Server的步驟
Node.js含有一系列內置模塊,使得程序可以脫離 Apache HTTP Server 或 IIS,作為獨立服務器運,下面將介紹如何簡單幾步實現(xiàn)遠程公共網(wǎng)絡下訪問windwos node.js的服務端,感興趣的朋友一起看看吧2023-11-11
nodejs獲取本機內網(wǎng)和外網(wǎng)ip地址的實現(xiàn)代碼
這篇文章主要介紹了nodejs獲取本機內網(wǎng)和外網(wǎng)ip地址的實現(xiàn)代碼,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了Node.js中的process.nextTick使用實例,nextTick函數(shù)有什么用、怎么用、和setTimeout有什么區(qū)別呢,本文就講解了這些知識,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了node.js中的url.resolve方法使用說明,本文介紹了url.resolve的方法說明、語法、接收參數(shù)、使用實例和實現(xiàn)源碼,需要的朋友可以參考下2014-12-12