JS 实现blob与base64互转

 

 

    /**
     * base64  to blob二进制
     */
    function dataURItoBlob(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 new Blob([intArray], {type: mimeString});
    }

    /**
     * 
     * blob二进制 to base64
     **/
    function blobToDataURI(blob, callback) {
        var reader = new FileReader();
        reader.onload = function (e) {
            callback(e.target.result);
        }
        reader.readAsDataURL(blob);
    }

 

Data URL格式

Data URI 的格式

data:[<mime type>][;charset=<charset>][;base64],<encoded data>
  • 第一部分是 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 压缩要大,体积增加大约为三分之一,所以使用的时候需要权衡。

参考: http://www.cnblogs.com/hustskyking/p/data-uri.html

Example

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

依图片png base64为例

 

 // base64 转blob
    var base64Str = 'data:image/png;base64,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
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值