1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > Base64实现图片的编码和解码

Base64实现图片的编码和解码

时间:2021-12-21 04:08:16

相关推荐

Base64实现图片的编码和解码

前端开发中,经常会遇到base64编码的问题,以前不是很明白,今天就去研究一下到底什么是base64编码。

什么是base64编码?

还是wiki百科上解释的比较清楚:Base64是一种基于64个可打印字符来表示二进制数据的表示方法。由于 2^6=64 ,所以每6个比特为一个单元,对应某个可打印字符。3个字节有24个比特,对应于4个Base64单元,即3个字节可由4个可打印字符来表示。编码“Man”如果要编码的字节数不能被3整除,最后会多出1个或2个字节,那么可以使用下面的方法进行处理:先使用0字节值在末尾补足,使其能够被3整除,然后再进行Base64的编码。在编码后的Base64文本后加上一个或两个=号,代表补足的字节数。也就是说,当最后剩余两个八位字节(2个byte)时,最后一个6位的Base64字节块有四位是0值,最后附加上两个等号;如果最后剩余一个八位字节(1个byte)时,最后一个6位的base字节块有两位是0值,最后附加一个等号。 参考下表:

现在明白base64编码是怎么回事了吧,下面我们更深入的去看一下base64编码的使用。

我们用node来实现把一个图片编码成base64,再把一个base64字符串解码成图片保存。以下是代码实现:

google的语音搜索图标就是base64编码的,我们可以在控制台上看到base64字符串,下面我们编码来把这个图片转成base64字符串。

const fs = require('fs');const path = require('path') ;const Buffer = require('buffer').Buffer;/*** @param {String} fileName */function encode_base64(fileName){console.log(fileName)fs.readFile(path.join(__dirname,fileName),(err,data)=>{if(err){throw err;}else{let buf = Buffer.from(data);let base64 = buf.toString('base64');fs.writeFile(path.join(__dirname,'voice.txt'),base64,err =>{if(err) throw err;});return base64;}})}

运行代码,我们在生成的voice.txt文件中看到 iVBORw0KGgo .... QmCC,是和网页上的一样的,大功告成。接下来我们写解码函数。

/*** * @param {String} base64Str * @param {String} fileName */function decode_base64(base64Str,fileName){let data = Buffer.from(base64Str,'base64');fs.writeFile(path.join(__dirname,fileName),data,err =>{if(err){throw err;}else{return true;}})}let pigBaseStr = "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";decode_base64(pigBaseStr,'pig.png');

我们可以看到成功地生成了pig.png的图片。到这里,你对base64的问题是不是搞清楚了呢?

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。