Blob，ArrayBuffer，Base64 分别有哪些使用场景？
Blob
- 文件上传和下载：Blob对象可以用于将文件数据存储为二进制形式，并进行上传或下载操作。
- 图片处理：可以将图像数据存储为Blob对象，并进行处理、显示或上传。
- 多媒体处理：可用于处理音频和视频等多媒体数据。
- 生成临时URL：可以使用Blob对象创建临时URL，用于在浏览器中显示或分享文件。
文件下载demo：
//demo1
import { saveAs } from 'file-saver';
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
//demo2
downloadFileByUrl(url: string, name: string): void {
const xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.responseType = 'blob'
xhr.onload = (): void => {
if (xhr.status === 200) {
const a = document.createElement('a')
a.download = name
a.href = URL.createObjectURL(xhr.response)
a.click()
}
}
xhr.send()
}
ArrayBuffer
- 图像处理：可以使用ArrayBuffer来处理图像数据，例如图像解码、图像滤镜等操作。
- 网络请求：可用于处理二进制数据的网络请求，例如WebSocket通信或二进制协议的数据传输。
- 数据加密：ArrayBuffer可以用于加密算法的处理和操作。
- Web Workers：ArrayBuffer可用于在Web Worker中进行多线程数据处理。
//demo1 获取一个arraybuffer格式的图片地址并转换成base64
$api.get(xxx, {
responseType: 'arraybuffer',
})
.then(({ data: res }) => {
const buffers = window.btoa(String.fromCharCode(...new Uint8Array(res)))
base64Str = `data:image/png;base64,${buffers}`
})
.catch(err => {})
Base64
- 图片嵌入：Base64编码可以将图片数据转换为字符串，可用于将图片嵌入到HTML、CSS或JavaScript中，减少网络请求。
- 图片传输：在文本协议中，如JSON或XML，可以使用Base64编码将图片数据传输到服务器或其他系统。
- 数据URL：可以将Base64编码的数据作为数据URL嵌入到HTML中，用于显示图像或其他媒体内容。
- 数据存储：某些浏览器API或本地存储机制支持Base64编码的数据存储。
//canvas转换成base64
const base64 = canvas.toDataURL('image/png').replace(/^data:image\/\w+;base64,/, '')
Blob，ArrayBuffer，Base64 之间如何相互转换？
Blob和ArrayBuffer
function ArrayBuffer2Blob(buffer: ArrayBuffer){
return new Blob([buffer]);
}
function Blob2ArrayBuffer(blob: ArrayBuffer){
const reader = new FileReader();
reader.onload = function() {
console.log(this.result);
}
reader.readAsArrayBuffer(blob);
}
ArrayBuffer和Base64
function arrayBufferToBase64String(arrayBuffer: ArrayBuffer) {
var byteArray = new Uint8Array(arrayBuffer)
var byteString = ''
for (var i = 0; i < byteArray.byteLength; i++) {
byteString += String.fromCharCode(byteArray[i])
}
return btoa(byteString)
}
function base64StringToArrayBuffer(b64str: string) {
var byteStr = atob(b64str)
var bytes = new Uint8Array(byteStr.length)
for (var i = 0; i < byteStr.length; i++) {
bytes[i] = byteStr.charCodeAt(i)
}
return bytes.buffer
}
补充：file和Base64
function fileToBase64(file: File): Promise<string | null> {
// eslint-disable-next-line no-shadow
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function cb() {
if (isString(this.result)) {
resolve(this.result)
} else {
resolve(null)
}
}
reader.onerror = function errorCb(err) {
reject(err)
}
})
}
function base64ToFile(srcBase64: string): File | null {
const matchreg = srcBase64.match(/^data:image\/(\w+);base64,(.*)/)
if (!matchreg || matchreg.length !== 3) return null
const [, mime, base64] = matchreg
const bstr = atob(base64)
let n = bstr.length
const u8arr = new Uint8Array(n)
// eslint-disable-next-line no-plusplus
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
const rs = new File([u8arr], `clipboard.${mime}`, { type: `image/${mime}` })
return rs
}
图片url转base64
async function imgUrl2base64(url: string): Promise<string | null> {
return new Promise(resolve => {
const image = new Image()
image.src = url
image.onload = () => {
const canvas = document.createElement('canvas')
canvas.width = image.naturalWidth
canvas.height = image.naturalHeight
canvas.style.width = `${canvas.width / window.devicePixelRatio}px`
canvas.style.height = `${canvas.height / window.devicePixelRatio}px`
const ctx = canvas.getContext('2d')
if (!ctx) {
return resolve(null)
}
ctx.drawImage(image, 0, 0)
const base64 = canvas.toDataURL('image/png')
return resolve(base64)
}
image.onerror = () => {
resolve(null)
}
})
}
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications
