JavaScript涉及二进制的转换

ArrayBuffer <==> String字符串(utf-8)

• new TextEncoder().endoce()
• new TextDecoder().decode()

/**
 * arraybuffer转字符串
 * @param {*} buffer ArrayBuffer
 * @param {*} decodeType 编码格式
 * @returns 字符串
 */
function ab2str(buffer, decodeType = "utf-8") {
  // 默认是uft-8格式
  let decoder = new TextDecoder(decodeType);
  return decoder.decode(buffer);
}
/**
 * 字符串 转 ArrayBuffer
 * @param {*} str 字符串
 * @returns ArrayBuffer
 */
function str2ab(str) {
  let encoder = new TextEncoder();
  return encoder.encode(str);
}

let str = ab2str(new Uint8Array([97]));
console.log(str); //''a'的ascii编码是97

let ab = str2ab(str);
console.log(ab); //Uint8Array(1) [ 97 ]


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

ArrayBuffer <==> TypedArray

• new Uint8Array(buffer)
• typedArray.buffer

let buffer = new ArrayBuffer(8);

let ui8Array = new Uint8Array(buffer);

console.log(ui8Array.buffer);
1
2
3
4
5

ArrayBuffer <==> DataView

• new DataView(buffer)
• dataview.getUint8()

let buffer = new ArrayBuffer(8);

let dv = new DataView(buffer);

dv.setUint8(0, 16);

console.log(dv.getUint8(0)); //16

1
2
3
4
5
6
7
8

String字符串 <==> Base64字符串

• btoa(),编码
• atob(),解码

let base64Str = btoa("hello world");
let str = atob(base64Str);

console.log(base64Str); //aGVsbG8gd29ybGQ=
console.log(str); //hello world
1
2
3
4
5

Base64字符串 <==> Base64源数据的ArrayBuffer

通过atob()解码,以及charCodeAt来获取每一个能被编码成base64的字符(都是1个字节)的对应的8位bit

function base64ToArrayBuffer(base64) {
  let str = atob(base64); // 将base64解码成源二进制数据,可以被base64编码的字符都是latin-1字符,1个字节,所以可以使用charCodeAt()返回来的utf-16b编码设置,低字节就是0x00-0x7F,设置给Uint8Array时,保存低位,舍弃高位

  let buffer = new ArrayBuffer(str.length); //以str的长度new 一个缓冲区

  let ui8Arr = new Uint8Array(buffer);

  for (let i = 0; i < ui8Arr.length; i++) {
    //循环赋值每个字符对应的unicode值,存8位
    ui8Arr[i] = str.charCodeAt(i);
  }
  return ui8Arr.buffer;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Blob

Blob() 构造函数返回一个新的 Blob 对象。 blob的内容由参数数组中给出的值的串联组成

var aBlob = new Blob( array, options );

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一个包含DOMString的数组
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blob
1
2
3
4

• array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8.
• options ,字典,两个属性:
  - type，默认值为 “”，它代表了将会被放入到blob中的数组内容的MIME类型。
  - endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。

Blob属性

• Blob.size 只读,Blob 对象中所包含数据的大小（字节）。
• Blob.type 只读,一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。
• Blob.slice([start[, end[, contentType]]]),返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据
• Blob.text(),返回一个promise且包含blob所有内容的UTF-8格式的 USVString。
• Blob.arrayBuffer() 返回一个promise且包含blob所有内容的二进制格式的 ArrayBuffer

Blob,File<==> ArrayBuffer,data:格式的base64字符串,String

Blob

• blob.arrayBuffer(),返回resolve arrayBuffer的promise
• blob.text(),返回resolve string 的promise
  FileReader
  FileReader, 读取Blob或者File,可以生成ArrayBuffer,base64字符串,文本
• reader.readAsArrayBuffer(blob),读取完成后,reader.result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据
• reader.readAsDataURL(), 读取完成后,reader.result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
• reader.readAsText(blob,encodeType),读取完成后,reader.result 属性将包含一个utf-8格式的字符串以表示所读取文件的内容。
• reader.onload事件表示读取完成,在这里获取数据

function readBlob(blob, type) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    switch (type) {
      case "ArrayBuffer":
        // arraybuffer
        reader.readAsArrayBuffer(blob);
        break;
      case "Text":
        // string
        reader.readAsText(blob, "utf-8");
        break;
      case "DataURL":
        // DataURL,data:<mime-type>;base64,....
        reader.readAsDataURL(blob);
        break;
    }
    reader.onload = function () {
      resolve(reader.result);
    };
  });
}
let blob = new Blob(["hello wolrd"]);

readBlob(blob, "ArrayBuffer").then(console.log);
// [104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100];

readBlob(blob, "Text").then(console.log);
//hello wolrd

readBlob(blob, "DataURL").then(console.log);
// data:application/octet-stream;base64,aGVsbG8gd29scmQ=

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

File <==> Blob

File对象的来源有

1.构造函数,new(fileBits: BlobPart[], fileName: string, options?: FilePropertyBag),其中BlobPart可以是String,ArrayBuffer,Blob
2.通过type=file的input选择文件

Blob对象的来源有:

1.构造函数,new Blob(array,option),array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。
2.http返回的数据
3.file.slice()
4.blob.slice()

let file = new File([blob],'foo.png',{
	type:'image/png'
})

let blob = new Blob([file],{type:'image/png'})
1
2
3
4
5

objectURL与Blob

ObjectURL格式:

blob:http://127.0.0.1:5500/d776d625-763d-40ca-a4fd-828968f93ec1

• URL.revokeObjectURL(blob)
• objectURL可以作为a标签的href属性的值,a.click()则可以实现下载,也可以作为img.src

let blob = new Blob([JSON.stringify({ foo: "bar" })], {
  type: "application/json",
});

// 下载文件
function download(data) {
  const a = document.createElement("a");

  const blob = new Blob([data]);

  const url = URL.createObjectURL(blob);
  

  // 下载
  a.href = url;
  a.download = "我是下载文件名.txt"; //文件名
  a.click();

  // 释放blobURL
  URL.revokeObjectURL(url);
}

download(blob);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

DataURL与Blob,File

格式:data:< mime-type >;base 64,…
该格式可以base64字符串可以直接赋值给img.src,显示图片

Blob生成DataURL

通过FileReader的readAsDataURL

let blob = new Blob(["hello world"]);

let reader = new FileReader();

reader.readAsDataURL(blob);

reader.onload = function () {
  console.log(reader.result);
  //data:application/octet-stream;base64,aGVsbG8gd29ybGQ=
};

1
2
3
4
5
6
7
8
9
10
11

Canvas与ImageData,DataURL

canvas.toDataURL(type, encoderOptions)
返回一个包含图片展示的 data URI

• type 可选,图片格式，默认为 image/png
• encoderOptions 可选,在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量

const canvas = document.getElementById("canvas");

const ctx = canvas.getContext("2d");

const image = new Image();
image.src = "./file/pic1.jpg";

image.onload = function () {
  // drawImage(imgElement,x,y)
  // 将图片画到canvas上
  ctx.drawImage(image, 0, 0);

  // canvas.toDataURL()
  // 将canvas转成DataURL,
  const dataUrl = canvas.toDataURL("image/png");

  const img = document.createElement("img");

  img.src = dataUrl;

  document.body.appendChild(img);
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

canvas.toBlob(callback,type?,quality?)

• callback,获取到blob的回调函数
• type, 默认是image/png,指定图片格式
• quality: 0-1,决定图片质量

const canvas = document.getElementById("canvas");

const ctx = canvas.getContext("2d");

ctx.fillStyle = "skyblue";
ctx.fillRect(50, 50, 100, 100);

// canvas画布转blob
canvas.toBlob(handleBlob, "image/png");

// 下载blob
function handleBlob(blob) {
  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");

  a.download = "img.png";
  a.href = url;
  a.click();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

context.getImageData()
返回一个ImageData对象，用来描述canvas区域隐含的像素数据，这个区域通过矩形表示，起始点为(sx, sy)、宽为sw、高为sh
语法:

ImageData ctx.getImageData(sx, sy, sw, sh);
1

context.putImageData()
是 Canvas 2D API 将数据从已有的 ImageData 对象绘制到位图的方法。
语法:

// dx:在画布的x轴偏移量,dy同理
// dirtyX: 要绘制imageData的起点x偏移量,
// dirtyWidth: 要绘制的imageData的宽度
void ctx.putImageData(imagedata, dx, dy);
void ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
1
2
3
4
5