先贴代码:

const base64String = window.btoa(String.fromCharCode(...new Uint8Array(buffer)))

看起来非常的简洁,优美。那么我们今天就来捋一捋,这个看似简单的背后,蕴含了怎样的原理。

首先我们得来说说arrayBuffer这回事。

在JavaScript中,有一个很常用的引用数据类型Array,你可以在里面放字符串、数字、对象、布尔值等等等等。它存放在堆中,可以自由增减。

而ArrayBuffer我们叫它类型化数组,它的诞生就是为了解决一个问题:操作二进制数据

只由0和1组成的二进制数据往往是非常巨大的,上千个字节可以说司空见惯,传统的Array这时候处理起二进制数据起来就显得非常低效,所以ArrayBuffer出现了,它作为一块专用的内存区域存放在栈中,取数据非常快。

我们现在通过new ArrayBuffer(10)初始化一个buffer实例,看看会得到什么。

let buffer = new ArrayBuffer(10);
console.log(buffer); ArrayBuffer(10) {}
[[Int8Array]]: Int8Array(10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[[Int16Array]]: Int16Array(5) [0, 0, 0, 0, 0]
[[Uint8Array]]: Uint8Array(10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
byteLength: 10
__proto__: ArrayBuffer

可以看到在ArrayBuffer中,主要存放了几个“视图”,Int8Array表示8位有符号整数数组,Int16Array表示16位有符号整数数组,Uint8Array则表示8位无符号整数数组。

当然,如果比如说我们想取出Int8Array这个数组来,是不能直接通过buffer.Int8Array来取的。这是因为ArrayBuffer不能直接通过下标去读写,我们需要把它转成一个类型化数组(TypedArray)

const myTypedArray = new Uint8Array(buffer)

转化完之后,我们我们不仅可以通过下标去对类型化数组进行索引,也可以获取其length,当然TypedArray仍与普通的Array存在细微的区别,那就是假设我们用超出边界的索引语法去获取数组元素时,

TypedArray并不会去原型链中进行查找。

现在我们已经拿到了这个类型化数组,是时候把它转成普通字符串了。看看String.fromCharCode这个函数,它接受的参数为一堆代码单元序列,输出一个普通字符串。而我们刚刚得到的类型化数组,里

面存放的正是代码单元。

const str = String.fromCharCode(...myTypedArray)

这里我们用拓展运算符...把类型数组的代码单元解出来,一次性转完,得到一个普通的字符串。

最后,我们需要借助一个window对象的方法,也就是btoa方法,它的作用是:把一个普通字符串编码成base-64格式的字符串

有时候后台把图片资源通过arrayBuffer传给前端,这时候为了能正常显示,我们还需要在转化的base64字符串前面拼接上data:image/jpeg;base64,

所以我们整理一下,可以得出这样一个函数:

const arrayBufferToBase64Img = (buffer) => {
const str = String.fromCharCode(...new Uint8Array(buffer));
return `data:image/jpeg;base64,${window.btoa(str)}`;
}

总结

得到一个ArrayBuffer ---> 转成类型化数组以正常读取 --> 转成普通字符串 --> 转成base64字符串

ArrayBuffer转base64详解的更多相关文章

  1. Java 8新特性探究(五)Base64详解

    BASE64 编码是一种常用的字符编码,在很多地方都会用到.但base64不是安全领域下的加密解密算法.能起到安全作用的效果很差,而且很容易破解,他核心作用应该是传输数据的正确性,有些网关或系统只能使 ...

  2. base64详解及实现

    概述 base64 说起来大家应该都是很熟悉的,很多类型的数据都可以转成base64的编码规则,例如图片,pdf,文本,邮件内容等. 什么是base64 根据RFC2045的定义,base64被定义为 ...

  3. Android 数据加密算法 Des,Base64详解

    一,DES加密: 首先网上搜索了一个DES加密算法工具类: import java.security.*;import javax.crypto.*; public class DesHelper { ...

  4. Java 8新特性探究(十一)Base64详解

    开发十年,就只剩下这套架构体系了! >>>   BASE64 编码是一种常用的字符编码,在很多地方都会用到.但base64不是安全领域下的加密解密算法.能起到安全作用的效果很差,而且 ...

  5. 图片上传预览转压缩并转base64详解(dShowImg64.js)

    hello,大家好,游戏开始了,欢迎大家收看这一期的讲解.本次的内容是图片的上传预览.最后发源码链接.废话不多说,先上图. 待上传图像 点击蓝色框内,pc可以选择文件,移动端选择拍照或选择图片进行上传 ...

  6. Base64编码格式详解

    什么是Base64? 按照RFC2045的定义,Base64被定义为:Base64内容传送编码被设计用来把任意序列的8位字节描述为一种不易被人直接识别的形式.(The Base64 Content-T ...

  7. EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射(一) c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象

    EF+LINQ事物处理   在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...

  8. javascript中的Base64.UTF8编码与解码详解

    javascript中的Base64.UTF8编码与解码详解 本文给大家介绍的是javascript中的Base64.UTF8编码与解码的函数源码分享以及使用范例,十分实用,推荐给小伙伴们,希望大家能 ...

  9. WebSocket 详解

    WebSocket 出现前 构建网络应用的过程中,我们经常需要与服务器进行持续的通讯以保持双方信息的同步.通常这种持久通讯在不刷新页面的情况下进行,消耗一定的内存资源常驻后台,并且对于用户不可见.在 ...

随机推荐

  1. win10下使用UEFI安装Linux Mint18

    基本的配置: 型号:HP G4-2045TX CPU:i3-2370 硬盘:一块120G的SSD装了win10,efi引导:另外一块500G的HDD没有装系统,GPT格式,分了4个区 内存:6G 想法 ...

  2. 二十九、rsync+inotity实时监控同步工具

    一.场景应用:                                    客户通过url访问资源(查询,下载等),并发量是非常高的,所以运用负载均衡分担web服务器的压力,在后端连接不同的 ...

  3. CSS样式表---------第三章:样式属性

    三.样式属性 1.背景与前景 background-color:#90; ------------背景色,样式表优先级高. background-image:url(路径)-------------- ...

  4. 微信中的APP、公众号、小程序的openid及unionid介绍

    微信中的APP.公众号.小程序的openid及unionid介绍 1.unionid 如果开发者拥有多个移动应用.网站应用.和公众帐号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只 ...

  5. unittest如何在循环遍历一条用例时生成多个测试结果

    引用自:http://blog.csdn.net/kaku21/article/details/42124593 参考网址:http://programmaticallyspeaking.com/te ...

  6. vue2.0学习之路由

    下载vue-router: cnpm install vue-router --save router/main.js /*引入所需要的组件*/ import VueRouter from 'vue- ...

  7. java实现线程交替打印1-52和A-Z

    题目: 1.开启两个线程,一个线程打印A-Z,两一个线程打印1-52的数据. 2.实现交替打印,输出结果为12A34B...........5152Z. 3.请用多线程方式实现. 实现思路:通过锁(s ...

  8. 系统学习javaweb1----HTML语言1

    自我感受:HTML语言没想到也有这么大的学问,竟然能通过超链接标签直接访问百度,这可让我大吃一惊,我也得反思一下自己,上学期的java纯是混过来的,没有系统的学习过,感觉能通过期末考试都是侥幸,接下来 ...

  9. made his acquaintance|adequate|advisable|announce|contrived to|made up|toss|considering that

    PHRASE 与(某人)初次相识;结识(某人)When you make someone's acquaintance, you meet them for the first time and ge ...

  10. 一致性 hash 算法( consistent hashing )及java实现

    consistent hashing 算法早在 1997 年就在论文 Consistent hashing and random trees 中被提出,目前在cache 系统中应用越来越广泛: 1 基 ...