JS各種數(shù)據(jù)流之間的格式（ArrayBuffer、Uint8Array、Blob、 File、DataURL）相互轉(zhuǎn)換及應(yīng)用
前端網(wǎng)頁?File?上傳、下載，Canvas?保存圖片，Ajax?和?Fetch?二進(jìn)制流傳輸，PDF?預(yù)覽，瀏覽器上?WebAssembly?的應(yīng)用?等等都需要到?ArrayBuffer?和?Blob?。
API介紹
FileReader對象允許Web應(yīng)用程序異步讀取存儲在用戶計算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。-
Blob對象表示一個不可變、原始數(shù)據(jù)的類文件對象。它的數(shù)據(jù)可以按文本或二進(jìn)制的格式進(jìn)行讀取，也可以轉(zhuǎn)換成 ReadableStream 來用于數(shù)據(jù)操作。Blob 表示的不一定是 JavaScript 原生格式的數(shù)據(jù)。File 接口基于 Blob，繼承了 blob 的功能并將其擴(kuò)展使其支持用戶系統(tǒng)上的文件。
| 屬性名稱 | 讀/寫 | 描述 |
|---|---|---|
| size | 只讀 | Blob 對象中所包含數(shù)據(jù)的大小（字節(jié)）。 |
| type | 只讀 | 一個字符串，表明該Blob對象所包含數(shù)據(jù)的MIME類型。如果類型未知，則該值為空字符串。例如 “image/png”. |
-
ArrayBuffer對象代表儲存二進(jìn)制數(shù)據(jù)的一段內(nèi)存，它不能直接讀寫，只能通過視圖（TypedArray 視圖和 DataView 視圖)來讀寫，視圖的作用是以指定格式解讀二進(jìn)制數(shù)據(jù)。 -
Uint8Array對象是 ArrayBuffer 的一個數(shù)據(jù)類型（8 位不帶符號整數(shù)）。 -
TextEncoder接受代碼點流作為輸入，并提供 UTF-8 字節(jié)流作為輸出。 -
TextDecoder接口表示一個文本解碼器，一個解碼器只支持一種特定文本編碼，例如 utf-8、iso-8859-2、koi8、cp1261，gbk 等等。解碼器將字節(jié)流作為輸入，并提供代碼點流作為輸出。 -
base64?Base64是網(wǎng)絡(luò)上最常見的用于傳輸8Bit字節(jié)碼的編碼方式之一，Base64就是一種基于64個可打印字符來表示二進(jìn)制數(shù)據(jù)的方法。編碼規(guī)則：把3個字節(jié)變成4個字節(jié);每76個字符加一個換行符;最后的結(jié)束符也要處理。
注意： 二進(jìn)制數(shù)組并不是真正的
js各種數(shù)據(jù)流之間的格式轉(zhuǎn)換數(shù)組，而是類似數(shù)組的對象。
字符與ArrayBuffer，Uint8Array相互轉(zhuǎn)換
1、TextEncoder => ArrayBuffer
let encoder = new TextEncoder();
// 字符 轉(zhuǎn) Uint8Array
let uint8Array = encoder.encode("你好啊");
// Uint8Array 轉(zhuǎn) ArrayBuffer
let arrayBuffer = uint8Array.buffer
2、Blob?=>?ArrayBuffer
let str = 'hello，你好嗎？'
let blob = new Blob([str],{type:'text/plain;charset=utf-8'});
let utf8decoder = new TextDecoder()
blob.arrayBuffer().then(buffer=>{
// ArrayBuffer
console.log(buffer)
let text = utf8decoder.decode(buffer)
// String
console.log(text)
})
3.FileReader?=>?ArrayBuffer
let str = 'hello，你好嗎？'
let blob = new Blob([str],{type:'text/plain;charset=utf-8'});
let utf8decoder = new TextDecoder()
let fr = new FileReader()
fr.readAsArrayBuffer(blob)
fr.onload = function(res) {
// ArrayBuffer
let buffer = fr.result
console.log(buffer)
let text = utf8decoder.decode(buffer)
// String
console.log(text)
}
轉(zhuǎn)換及應(yīng)用
1.將file轉(zhuǎn)換成DataURL，實現(xiàn)本地圖片上傳預(yù)覽
<input type="file" id="file">
<img id="img">
- 利用URL.createObjectURL()
let img = document.getElementById('img')
let file = document.getElementById('file')
file.onchange = function () {
let imgFile = this.files[0]
img.src = URL.createObjectURL(imgFile)
img.onload = function () {
URL.revokeObjectURL(this.src)
}
}
- 利用FileReader.readAsDataURL()
let img = document.getElementById('img')
let file = document.getElementById('file')
file.onchange = function (e) {
let imgFile = this.files[0]
let fileReader = new FileReader()
fileReader.readAsDataURL(imgFile)
fileReader.onload = function () {
img.src = this.result
}
}
2、將DataURL轉(zhuǎn)成file
function dataURLToFile (dataUrl, fileName) {
const dataArr = dataUrl.split(',')
const mime = dataArr[0].match(/:(.*);/)[1]
const originStr = atob(dataArr[1])
return new File([originStr], fileName, { type: mime })
}
dataURLToFile('data:text/plain;base64,YWFhYWFhYQ==', '測試文件')
// File {name: '測試文件', lastModified: 1640784525620, lastModifiedDate: Wed Dec 29 2021 21:28:45 GMT+0800 (中國標(biāo)準(zhǔn)時間), webkitRelativePath: '', size: 7, …}
3.將canvas轉(zhuǎn)成DataURL，實現(xiàn)將canvans變成圖片，或生成指定格式的圖片，實現(xiàn)圖片格式的轉(zhuǎn)換
// html
<input type="file" accept="image/*" id="file">
// js
document.querySelector('#file').onchange = function () {
canvasToDataURL(this.files[0])
.then(res => console.log(res))
}
function canvasToDataURL (file) {
return new Promise(resolve => {
const img = document.createElement('img')
img.src = URL.createObjectURL(file)
img.onload = function () {
const canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
const ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0)
resolve(canvas.toDataURL('image/png', 1))
}
})
}
這個方法返回的是圖片base64，用來生成圖片的，默認(rèn)png格式，也可以通過傳遞參數(shù)改變圖片格式，還能改變圖片保存的質(zhì)量。
如：canvas.toDataURL(“images/jpeg”,0) ，第一個參數(shù)就是把圖片編碼為jpeg格式，第二個參數(shù)（0-1）就是指定圖片質(zhì)量，數(shù)值越大質(zhì)量越高，不過對于image/png格式?jīng)]法設(shè)置圖片質(zhì)量。
另外，chrome還支持自家的image/webp格式圖片，也能設(shè)置圖片質(zhì)量, 實現(xiàn)圖片壓縮。
4.將DataURL轉(zhuǎn)成canvas
function dataUrlToCanvas (dataUrl) {
return new Promise(resolve => {
const img = new Image()
img.src = dataUrl
img.onload = function () {
const canvas = document.createElement('canvas')
canvas.width = this.width
canvas.height = this.height
const ctx = canvas.getContext('2d')
ctx.drawImage(this, 0, 0)
resolve(canvas)
}
})
}
const dataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUh...'
dataUrlToCanvas(dataUrl)
.then(res => document.body.appendChild(res)
5.將canvas轉(zhuǎn)成file
1.將canvas轉(zhuǎn)成blob
利用canvas.toBlob()
// html
<input type="file" accept="image/*" id="file">
// js
document.querySelector('#file').onchange = function () {
canvasToDataURL(this.files[0])
.then(res => console.log(res))
}
function canvasToDataURL (file) {
return new Promise(resolve => {
const img = document.createElement('img')
img.src = URL.createObjectURL(file)
img.onload = function () {
const canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
const ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0)
canvas.toBlob(function (e) {
resolve(e)
}, 'image/png', 1)
}
})
}
2.將blob轉(zhuǎn)成file
利用new File();文章來源：http://www.zghlxwxcb.cn/news/detail-712410.html
function blobToFile(blob, filename, type) {
return new File([blob], filename, { type })
}
blobToFile('test info', 'test', 'text/plain' )?文章來源地址http://www.zghlxwxcb.cn/news/detail-712410.html
到了這里，關(guān)于JS各種數(shù)據(jù)流之間的格式（ArrayBuffer、Uint8Array、Blob、 File、DataURL）相互轉(zhuǎn)換及應(yīng)用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
