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