JS中各类型文件(ArrayBuffer、File、Blob、DataURL、OjectURL、canvas )转换方式汇总

// 假设我们有一个ArrayBuffer对象
let arrayBuffer = new ArrayBuffer(8);
 
// 将ArrayBuffer转换为Blob
let blobFromArrayBuffer = new Blob([arrayBuffer]);
 
// 如果先有一个File对象
let file = new File(["text"], "filename.txt", { type: "text/plain" });
 
// 将File对象转换为ArrayBuffer
file.arrayBuffer().then(arrayBuffer => {
  console.log(arrayBuffer);
});
 
// 将Blob转换为ArrayBuffer
blobFromArrayBuffer.arrayBuffer().then(arrayBuffer => {
  console.log(arrayBuffer);
});
 
// 将ArrayBuffer转换为DataURL
let dataUrl = URL.createObjectURL(new Blob([arrayBuffer]));
 
// 将ArrayBuffer转换为Canvas
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let imageData = ctx.createImageData(arrayBuffer.byteLength, 1);
imageData.data.set(new Uint8Array(arrayBuffer));
ctx.putImageData(imageData, 0, 0);
 
// 将Canvas转换为Blob
canvas.toBlob(blob => {
  console.log(blob);
});
 
// 注意：ObjectURL和DataURL通常是相对于特定数据类型的，
// 所以需要根据具体情况选择合适的转换方法。

这段代码展示了如何在不同数据类型之间转换数据，包括从ArrayBuffer开始，通过创建Blob，File，DataURL，Canvas，最后又回到Blob。注意，实际应用中可能需要考虑错误处理和异步流程控制。