JS二进制文件转换：File、Blob、Base64、ArrayBuffer

类型转换

1. Blob、File → Base64

function fileToDataURL(file) {let reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (e) {return reader.result;};
}

2. Base64 → Blob、File

// Base64 转为 Blob
function dataURLToBlob(fileDataURL) {let arr = fileDataURL.split(","),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });
}// Base64 转为 File
function dataURLToBlob(fileDataURL, filename) {let arr = fileDataURL.split(","),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, { type: mime });
}

3. Blob、File → Object URL

// object：用于创建 URL 的 File 对象、Blob 对象
const objectUrl = URL.createObjectURL(object)

4. ArrayBuffer → Blob

const blob = new Blob([new Uint8Array(buffer, byteOffset, length)])

5. ArrayBuffer → base64

const base64 = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)))

6. Blob → ArrayBuffer

function blobToArrayBuffer (blob) { const reader = new FileReader()reader.readAsArrayBuffer(blob)reader.onload = () =>{return reader.result;}
}

7. Blob、File 文件数据绘制到 canvas

// 思路：Blob、File ——> dataURL(Base64) ——> canvas
function fileAndBlobToCanvas(fileDataURL) {let img = new Image()img.src = fileDataURLlet canvas = document.createElement('canvas')if (!canvas.getContext) {alert('浏览器不支持canvas')return}let ctx = canvas.getContext('2d')document.getElementById('container').appendChild(canvas)img.onload = function () {ctx.drawImage(img, 0, 0, img.width, img.height)}
}

8. 从 canvas 中获取文件 Base64

function canvasToDataURL() {let canvas = document.createElement('canvas')let canvasDataURL = canvas.toDataURL('image/png', 1.0)return canvasDataURL
}