前端二进制处理

前端二进制处理

是nodejs的二进制数据 ， 是浏览器的二进制数据

<ArrayBuffer> 是核心对象，是所有的基础，是原始的二进制数据。

node处理

1
2
3
// node读到<Buffer>可以直接写入

fs.writeFileSync(path, <Buffer>);

浏览器处理

1
2
3
4
5
6
// 使用createObjectURL，获取包含对象的url字符串
URL.createObjectURL(object)

// object用于创建 URL 的 File、Blob 或 MediaSource 对象。
URL.createObjectURL(file);
URL.createObjectURL(blob);

系统交互

1
2
3
node读取<Buffer>得到Uint8Array 转换为 Blob

URL.createObjectURL(new Blob([<Uint8Array >],{ type: 'image/jpeg' }))

资源转换

  • bolb -> ArrayBuffe -> Uint8Array -> base64
1
2
// 将Blob转为 ArrayBuffer->Uint8Array
new Uint8Array(readAsArrayBuffer(bolb));
  • Uint8Array -> blob
1
window.URL.createObjectURL(new Blob([<Uint8Array >],{ type: 'image/jpeg' }))
  • blob -> base64
1
2
// 开始读取指定的Blob中的内容。一旦完成，`result`属性中将包含一个`data:` URL 格式的 Base64 字符串以表示所读取文件的内容。
FileReader.readAsDataURL(blob)
  • ArrayBuffer 互换 Uint8Array
1
2
3
4
5
// ArrayBuffer -> Uint8Array
new Uint8Array(<ArrayBuffer>)
               
// Uint8Array -> ArrayBuffer
 uint8Array.buffer;
  • Uint8Array -> base64
1
2
3
4
5
6
7
8
9
10
let binary = '';
const len = uint8Array.byteLength;
for (var i = 0; i < len; i++) {
    binary += String.fromCharCode(res[i]);
}
// 二进制乱码
console.log('binary', binary)

const code =  btoa(binary);
const base64 = `data:image/jpg;base64,${code}`

MIME类型

  1. 文本文件：
    • text/plain: 纯文本文件
    • text/html: HTML 文件
    • text/css: CSS 样式表
    • text/javascript: JavaScript 文件
  2. 图像文件：
    • image/jpeg: JPEG 图片
    • image/png: PNG 图片
    • image/gif: GIF 图片
    • image/svg+xml: SVG 图形
  3. 音频文件：
    • audio/mpeg: MP3 音频
    • audio/wav: WAV 音频
    • audio/midi: MIDI 音频
  4. 视频文件：
    • video/mp4: MP4 视频
    • video/webm: WebM 视频
    • video/mpeg: MPEG 视频
  5. 应用程序文件：
    • application/pdf: Adobe PDF 文档
    • application/zip: ZIP 压缩文件
    • application/json: JSON 数据
    • application/xml: XML 文档
  6. 字体文件：
    • font/ttf: TrueType 字体
    • font/woff: Web Open Font Format (WOFF)
    • font/eot: Embedded OpenType 字体

实践作业

将Uint8Array 处理成blobUrl和dataUrl

tips：数据流【file blob 】->【ArrayBuffer 】->【Uint8Array 】->【base64】

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

// 1、Uint8Array->Blod ->blodURl
const blob = new Blob([res], { type: 'image/jpeg' });
console.log('blob',blob)
const uul = window.URL.createObjectURL(blob)
// src.value = uul


// 2、Uint8Array 转换为 base64 || 也可以把ArrayBuffer 转换 Uint8Array  再转 base64
let binary = '';
const len = res.byteLength;
for (var i = 0; i < len; i++) {
  binary += String.fromCharCode(res[i]);
}
// 二进制乱码
// console.log('binary', binary)
const url =  btoa(binary);
// src.value = `data:image/jpg;base64,${url}`


// 3、将 Uint8Array 转换为 也可以把ArrayBuffer 转为Blod
const buff =  res.buffer
console.log('buff', buff)
const blob2 = new Blob([buff], { type: 'image/jpeg' });
console.log('blob2', blob2)

const filereader = new FileReader();
filereader.onload = (e)=>{
  const result = e.target?.result
  src.value = result
}

filereader.readAsDataURL(blob2);