使用Node.js實(shí)現(xiàn)base64和png文件相互轉(zhuǎn)換的方法
前天瀏覽技術(shù)博客,看到大廠面試題型中有使用nodejs實(shí)現(xiàn)base64和圖片文件相互轉(zhuǎn)換的例子,剛好近期要開(kāi)發(fā)這個(gè)功能,暫時(shí)記錄下來(lái),下周開(kāi)發(fā)完成再做一個(gè)補(bǔ)充。
1. 將base64 轉(zhuǎn)換為圖片文件,這里舉例用的png文件
const fs = require('fs'); const path = 'xxx/'+ Date.now() +'.png'; const base64 = data.replace(/^data:image\/\w+;base64,/,""); //去掉圖片base64碼前面部分data:image/png;base64 // new Buffer 操作權(quán)限太大,v6.0后使用Buffer.from()創(chuàng)建構(gòu)造函數(shù) const dataBuffer = new Buffer(base64, 'base64'); //把base64碼轉(zhuǎn)成buffer對(duì)象, fs.writeFile(path, dataBuffer, function(err){//用fs寫(xiě)入文件 if(err){ console.log(err); }else{ console.log('寫(xiě)入成功!'); } })
創(chuàng)建Buffer
類(lèi)型:類(lèi)整數(shù)數(shù)組
原因:JavaScript 語(yǔ)言自身只有字符串?dāng)?shù)據(jù)類(lèi)型,沒(méi)有二進(jìn)制數(shù)據(jù)類(lèi)型。但在處理像TCP流或文件流時(shí)(base64即文件流),必須使用到二進(jìn)制數(shù)據(jù)。因此在 Node.js中,定義了一個(gè)Buffer類(lèi),該類(lèi)用來(lái)創(chuàng)建一個(gè)專(zhuān)門(mén)存放二進(jìn)制數(shù)據(jù)的緩存區(qū)。
常用
const buf = Buffer.from(string, encoding); // 返回一個(gè)被 string,編碼格式是base64(默認(rèn)編碼格式是utf-8)的值初始化的新的 Buffer 實(shí)例 buf.toJSON(); // 轉(zhuǎn)換為JSON對(duì)象 buf.write(string, offset, length, encoding) // 寫(xiě)入node緩存區(qū) buf.toString(encoding, start, end) // 從緩存區(qū)讀取數(shù)據(jù)
2.將圖片文件轉(zhuǎn)換成base64
const fs = require("fs"); const util = require("util"); const imageData = await util.promisify(fs.readFileSync(fileUrl)); // 例:xxx/xx/xx.png const imageBase64 = imageData.toString("base64"); const imagePrefix = "data:image/png;base64,"; console.log(imagePrefix + imageBase64);
知識(shí)點(diǎn)補(bǔ)充:NodeJs將任意文件轉(zhuǎn)換為base64格式
很多圖片音頻等文件,有時(shí)候可能需要讀取到數(shù)據(jù)中或者放到單文件的HTML中時(shí),將它們轉(zhuǎn)換成為base64格式是一個(gè)好方法,nodejs可以很方便的把文件轉(zhuǎn)換為base64格式:
需要依賴(lài)庫(kù)“fs”,“path”,“mime-types”,庫(kù)mime-types可通過(guò)npm安裝,具體的代碼如下:
const fs = require('fs'); const path = require('path'); const mineType = require('mime-types'); let filePath = path.resolve('your/file/path'); let data = fs.readFileSync(filePath); data = new Buffer(data).toString('base64'); let base64 = 'data:' + mineType.lookup(filePath) + ';base64,' + data; fs.writeFileSync(path.resolve('your/save/file/path'), base64);
在你保存的文件中就有該文件的base64格式數(shù)據(jù)了,實(shí)際使用中可以直接使用轉(zhuǎn)換的base64數(shù)據(jù),然后可以放到img、audio或者video標(biāo)簽上使用。
總結(jié)
到此這篇關(guān)于使用Node.js實(shí)現(xiàn)base64和png文件相互轉(zhuǎn)換的文章就介紹到這了,更多相關(guān)nodejs base64和png轉(zhuǎn)換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Node.js版本升級(jí)如何修改模塊默認(rèn)的保存位置
這篇文章主要給大家介紹了關(guān)于Node.js版本升級(jí)如何修改模塊默認(rèn)的保存位置,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用node.js具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-05-05HTTP JSON接口模擬工具Interfake快速入門(mén)教程
這篇文章主要為大家介紹了HTTP JSON接口模擬工具Interfake快速入門(mén)教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06node.js監(jiān)聽(tīng)文件變化的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于node.js監(jiān)聽(tīng)文件變化的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用node.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04Nodejs 數(shù)組的隊(duì)列以及forEach的應(yīng)用詳解
這篇文章主要介紹了Nodejs 數(shù)組的隊(duì)列以及forEach的應(yīng)用詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2021-02-02node.js?實(shí)現(xiàn)手機(jī)號(hào)驗(yàn)證碼登錄功能
這篇文章主要介紹了node.js?實(shí)現(xiàn)手機(jī)號(hào)驗(yàn)證碼登錄功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08Node.js如何自動(dòng)審核團(tuán)隊(duì)的代碼
在項(xiàng)目開(kāi)發(fā)中,統(tǒng)一團(tuán)隊(duì)的代碼風(fēng)格很重要,本文介紹如何用Node.js來(lái)自動(dòng)審核,來(lái)提高您的開(kāi)發(fā)速度。2016-07-07