ArrayBuffer转base64详解
先贴代码:
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详解的更多相关文章
- Java 8新特性探究(五)Base64详解
BASE64 编码是一种常用的字符编码,在很多地方都会用到.但base64不是安全领域下的加密解密算法.能起到安全作用的效果很差,而且很容易破解,他核心作用应该是传输数据的正确性,有些网关或系统只能使 ...
- base64详解及实现
概述 base64 说起来大家应该都是很熟悉的,很多类型的数据都可以转成base64的编码规则,例如图片,pdf,文本,邮件内容等. 什么是base64 根据RFC2045的定义,base64被定义为 ...
- Android 数据加密算法 Des,Base64详解
一,DES加密: 首先网上搜索了一个DES加密算法工具类: import java.security.*;import javax.crypto.*; public class DesHelper { ...
- Java 8新特性探究(十一)Base64详解
开发十年,就只剩下这套架构体系了! >>> BASE64 编码是一种常用的字符编码,在很多地方都会用到.但base64不是安全领域下的加密解密算法.能起到安全作用的效果很差,而且 ...
- 图片上传预览转压缩并转base64详解(dShowImg64.js)
hello,大家好,游戏开始了,欢迎大家收看这一期的讲解.本次的内容是图片的上传预览.最后发源码链接.废话不多说,先上图. 待上传图像 点击蓝色框内,pc可以选择文件,移动端选择拍照或选择图片进行上传 ...
- Base64编码格式详解
什么是Base64? 按照RFC2045的定义,Base64被定义为:Base64内容传送编码被设计用来把任意序列的8位字节描述为一种不易被人直接识别的形式.(The Base64 Content-T ...
- EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射(一) c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象
EF+LINQ事物处理 在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...
- javascript中的Base64.UTF8编码与解码详解
javascript中的Base64.UTF8编码与解码详解 本文给大家介绍的是javascript中的Base64.UTF8编码与解码的函数源码分享以及使用范例,十分实用,推荐给小伙伴们,希望大家能 ...
- WebSocket 详解
WebSocket 出现前 构建网络应用的过程中,我们经常需要与服务器进行持续的通讯以保持双方信息的同步.通常这种持久通讯在不刷新页面的情况下进行,消耗一定的内存资源常驻后台,并且对于用户不可见.在 ...
随机推荐
- win10下使用UEFI安装Linux Mint18
基本的配置: 型号:HP G4-2045TX CPU:i3-2370 硬盘:一块120G的SSD装了win10,efi引导:另外一块500G的HDD没有装系统,GPT格式,分了4个区 内存:6G 想法 ...
- 二十九、rsync+inotity实时监控同步工具
一.场景应用: 客户通过url访问资源(查询,下载等),并发量是非常高的,所以运用负载均衡分担web服务器的压力,在后端连接不同的 ...
- CSS样式表---------第三章:样式属性
三.样式属性 1.背景与前景 background-color:#90; ------------背景色,样式表优先级高. background-image:url(路径)-------------- ...
- 微信中的APP、公众号、小程序的openid及unionid介绍
微信中的APP.公众号.小程序的openid及unionid介绍 1.unionid 如果开发者拥有多个移动应用.网站应用.和公众帐号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只 ...
- unittest如何在循环遍历一条用例时生成多个测试结果
引用自:http://blog.csdn.net/kaku21/article/details/42124593 参考网址:http://programmaticallyspeaking.com/te ...
- vue2.0学习之路由
下载vue-router: cnpm install vue-router --save router/main.js /*引入所需要的组件*/ import VueRouter from 'vue- ...
- java实现线程交替打印1-52和A-Z
题目: 1.开启两个线程,一个线程打印A-Z,两一个线程打印1-52的数据. 2.实现交替打印,输出结果为12A34B...........5152Z. 3.请用多线程方式实现. 实现思路:通过锁(s ...
- 系统学习javaweb1----HTML语言1
自我感受:HTML语言没想到也有这么大的学问,竟然能通过超链接标签直接访问百度,这可让我大吃一惊,我也得反思一下自己,上学期的java纯是混过来的,没有系统的学习过,感觉能通过期末考试都是侥幸,接下来 ...
- 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 ...
- 一致性 hash 算法( consistent hashing )及java实现
consistent hashing 算法早在 1997 年就在论文 Consistent hashing and random trees 中被提出,目前在cache 系统中应用越来越广泛: 1 基 ...