由图片乱码所想 - 前端中的二进制以及相关操做与转换

前端中的二进制以及相关操做与转换

最近工做中遇到了不少有关二进制的处理，如PDF的生成，多个PDF的打包，音频的拼接。为了数据的一致性，以及减小与后端通讯的复杂度，工做量都在浏览器端。

浏览器，或者前端更多处理的是 View 层，即 UI = f(state)，状态至界面的转化。可是也有不少关于二进制的处理，如

• 下载 Excel
• 文档生成 PDF
• 对多个文件打包下载
• 图片的乱码问题

本篇文章总结了浏览器端的二进制以及有关数据之间的转化，如 ArrayBuffer，TypedArray，Blob，DataURL，ObjectURL，Text 之间的互相转换。为了更好的理解与方便之后的查询，特地作了一张图作总结。

原文连接见 shanyue.tech/post/binary…

二进制相关数据类型

在此以前，首先简单介绍下几种相关的数据类型，更多文档请参考 MDN

ArrayBuffer && TypedArray

TypedArray 是 ES6+ 新增的描述二进制数据的类数组数据结构。但它自己不能够被实例化，甚至没法访问，你能够把它理解为 Abstract Class 或者 Interface。而基于 TypedArray，有以下数据类型。

• Uint8Array Uint 表明数组的每一项是无符号整型 8 表明数据的每一项占 8 个比特位，即一个字节
• Int8Array
• Uint8Array
• Int16Array
• ...

const array = new Int8Array([1, 2, 3])

// .length 表明数据大小
// 3
array.length

// .btyeLength 表明数据所占字节大小
array.byteLength
复制代码

ArrayBuffer 表明二进制数据结构，只读。须要转化为 TypedArray 进行操做。

const array = new Int16Array([1, 2, 3])

// TypedArray -> ArrayBuffer
array.buffer

// ArrayBuffer -> TypedArray
new Int16Array(array.buffer)

// buffer.length 表明数据所占用字节大小
array.buffer.length === array.byteLength
复制代码

链接多个 TypedArray

TypedArray 没有像数组那样的 Array.prototype.concat 方法用来链接多个 TypedArray。不过它提供了 TypedArray.prototype.set 能够用来间接链接字符串

能够参考 MDN 文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set

// 在位移 offset 位置放置 typedarray
typedarray.set(typedarray, offset)
复制代码

原理就是先分配一块空间足以容纳须要链接的 TypedArray，而后逐一在对应位置叠加

function concatenate(constructor, ...arrays) {
  let length = 0;
  for (let arr of arrays) {
    length += arr.length;
  }
  let result = new constructor(length);
  let offset = 0;
  for (let arr of arrays) {
    result.set(arr, offset);
    offset += arr.length;
  }
  return result;
}

concatenate(Uint8Array, new Uint8Array([1, 2, 3]), new Uint8Array([4, 5, 6]))
复制代码

同时您还须要对资源的获取有大体的了解，如 XHR，fetch，经过文件上传。

Blob

Blob 是浏览器端的类文件对象。操做 Blob 须要使用数据类型 FileReader。

FileReader 有如下方法，能够把 Blob 转化为其它数据

• FileReader.prototype.readAsArrayBuffer
• FileReader.prototype.readAsText
• FileReader.prototype.readAsDataURL
• FileReader.prototype.readAsBinaryString

const blob = new Blob('hello'.split(''))

// 表示文件的大小
blob.size

const array = new Uint8Array([128, 128, 128])
const blob2 = new Blob([array])

function readBlob (blob, type) {
  return new Promise(resolve => {
    const reader = new FileReader()
    reader.onload = function (e) {
      resolve(e.target.result)  
    }
    reader.readAsArrayBuffer(blob)
  })
}

readBlob(blob, 'DataURL').then(url => console.log(url))
复制代码

数据输入

数据输入或者叫资源的请求能够分为如下两种途径

• 经过 url 地址请求网络资源
• 经过文件上传请求本地资源

fetch

fetch 应该是你们比较熟悉的，但大多使用环境比较单一，通常用来请求 json 数据。其实， 它也能够设置返回数据格式为 Blob 或者 ArrayBuffer。

fetch 返回一个包含 Response 对象的 Promise，Response 有如下方法

• Response.prototype.arrayBuffer
• Response.prototype.blob
• Response.prototype.text
• Response.prototype.json

详情能够查看MDN文档 https://developer.mozilla.org/en-US/docs/Web/API/Response

fetch('/api/ping').then(res => {
  // true
  console.log(res instanceof Response)
  // 最多见的使用
  return res.json()

  // 返回 Blob
  // return res.blob()

  // 返回 ArrayBuffer
  // return res.arrayBuffer()
})
复制代码

另外，Response API 既能够可使用 TypedArray，Blob，Text 做为输入，又可使用它们做为输出。

这意味着关于这三种数据类型的转换彻底能够经过 Response

xhr

xhr 能够设置 responseType 接收合适的数据类型

const request = new XMLHttpRequest()
request.responseType = 'arraybuffer'
request.responseType = 'blob'
复制代码

File

本地文件能够经过 input[type=file] 来上传文件。

<input type="file" id="input">
复制代码

当上传成功后，能够经过 document.getElementById('input').files[0] 获取到上传的文件，即一个 File 对象，它是 Blob 的子类，能够经过 FileReader 或者 Response 获取文件内容。

数据输出

或者叫数据展现或者下载，数据经二进制处理后能够由 url 表示，而后经过 image, video 等元素引用或者直接下载。

Data URL

Data URL 即 Data As URL。因此， 若是资源过大，地址便会很长。 使用如下形式表示。

data:[<mediatype>][;base64],<data>
复制代码

先来一个 hello, world。把如下地址粘入地址栏，会访问到 hello, world

data:text/html,<h1>Hello%2C%20World!</h1>
复制代码

Base64 编码与解码

Base64 使用大小写字母，数字，+ 和 / 64 个字符来编码数据，因此称为 Base64。经编码后，文本体积会变大 1/3

在浏览器中，可使用 atob 和 btoa 编码解码数据。

// aGVsbG8=
btoa('hello')
复制代码

Object URL

可使用浏览器新的API URL 对象生成一个地址来表示 Blob 数据。

// 粘贴生成的地址，能够访问到 hello, world
// blob:http://host/27254c37-db7a-4f2f-8861-0cf9aec89a64
URL.createObjectURL(new Blob('hello, world'.split('')))
复制代码

下载

data:application/octet-stream;base64,5bGx5pyI

资源的下载能够利用 FileSaver 。

这里也简单写一个函数，用来下载一个连接

function download (url, name) {
  const a = document.createElement('a')
  a.download = name
  a.rel = 'noopener'
  a.href = url
  // 触发模拟点击
  a.dispatchEvent(new MouseEvent('click'))
  // 或者 a.click(
}
复制代码

二进制数据转换

以上是二进制数据间的转换图，有一些转换能够直接经过 API，有些则须要代码，如下贴几种常见转换的代码

String to TypedArray

根据上图，由字符串到 TypedArray 的转换，能够经过 String -> Blob -> ArrayBuffer -> TypedArray 的途径。

关于代码中的函数 readBlob 能够回翻环节 数据类型 - Blob

const name = '山月'
const blob = new Blob(name.split(''))

readBlob(blob, 'ArrayBuffer').then(buffer => new Uint8Array(buffer))
复制代码

也能够经过 Response API 直接转换 String -> ArrayBuffer -> TypedArray

const name = '山月'

new Response(name).arrayBuffer(buffer => new Uint8Array(buffer))
复制代码

这上边两种方法都是直接经过 API 来转化，若是你更像了解如何手动转换一个字符串和二进制的 TypedArray

String to TypedArray 2

使用 enodeURIComponent 把字符串转化为 utf8，再进行构造 TypedArray。

function stringToTypedArray(s) {
  const str = encodeURIComponent(s)
  const binstr = str.replace(/%([0-9A-F]{2})/g, (_, p1) => {
    return String.fromCharCode('0x' + p1)
  })
  return new Uint8Array(binstr.split('').map(x => x.charCodeAt(0)))
}
复制代码

实践

1. 如何上传本地图片并在网页上展现

由以上整理的转换图得出途径

本地上传图片 -> Blob -> Object URL

2. 如何拼接两个音频文件

由以上整理的转换图得出途径

fetch请求音频资源 -> ArrayBuffer -> TypedArray -> 拼接成一个 TypedArray -> ArrayBuffer -> Blob -> Object URL

3. 如何把 json 数据转化为 demo.json 并下载文件

json 视为字符串，由以上整理的转换图得出途径

Text -> DataURL

除了使用 DataURL，还能够转化为 Object URL 进行下载。关于下载的函数 download，能够参考以上环节 数据输出-下载

Text -> Blob -> Object URL

能够把如下代码直接粘贴到控制台下载文件

const json = {
  a: 3,
  b: 4,
  c: 5
}
const str = JSON.stringify(json, null, 2)

const dataUrl = `data:,${str}`
const url = URL.createObjectURL(new Blob(str.split('')))

download(dataUrl, 'demo.json')
download(url, 'demo1.json')
复制代码