base64转化字节流 js_JS 实现blob与base64互转

/**

* base64 to blob二进制*/

functiondataURItoBlob(dataURI) {var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; //mime类型

var byteString = atob(dataURI.split(',')[1]); //base64 解码

var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组

var intArray = new Uint8Array(arrayBuffer); //创建视图

for (var i = 0; i < byteString.length; i++) {

intArray[i]=byteString.charCodeAt(i);

}return newBlob([intArray], {type: mimeString});

}/**

*

* blob二进制 to base64

**/

functionblobToDataURI(blob, callback) {var reader = newFileReader();

reader.οnlοad= function(e) {

callback(e.target.result);

}

reader.readAsDataURL(blob);

}

Data URL格式

Data URI 的格式

data:[][;charset=][;base64],

第一部分是 data: 协议头,它标识这个内容为一个 data URI 资源。

第二部分是 MIME 类型,表示这串内容的展现方式,比如:text/plain,则以文本类型展示,image/jpeg,以 jpeg 图片形式展示,同样,客户端也会以这个 MIME 类型来解析数据。

第三部分是编码设置,默认编码是 charset=US-ASCII, 即数据部分的每个字符都会自动编码为 %xx,关于编码的测试,可以在浏览器地址框输入分别输入下面两串内容,查看效果:

// output: ä½ å¥½ -> 使用默认的编码展示,故乱码

data:text/html,你好

// output: 你好 -> 使用 UTF-8 展示

data:text/html;charset=UTF-8,你好

// output: 浣犲ソ -> 使用 gbk 展示(浏览器默认编码 UTF-8,故乱码)

data:text/html;charset=gbk,你好

// output: 你好 -> UTF-8 编码,内容先使用 base64 解码,然后展示

data:text/html;charset=UTF-8;base64,5L2g5aW9

第四部分是 base64 编码设定,这是一个可选项,base64 编码中仅包含 0-9,a-z,A-Z,+,/,=,其中 = 是用来编码补白的。

最后一部分为这个 Data URI 承载的内容,它可以是纯文本编写的内容,也可以是经过 base64编码 的内容。

很多时候我们使用 data URI 来呈现一些较长的内容,如一串二进制数据编码、图片等,采用 base64 编码可以让内容变得更加简短。而对图片来说,在 gzip 压缩之后,base64 图片实际上比原图 gzip 压缩要大,体积增加大约为三分之一,所以使用的时候需要权衡。

Example

base64 可为任意数据格式MIME,text/html,image/jpeg,image/png******

依图片png base64为例

//base64 转blob

var base64Str = 'data:image/png;base64,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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值