js 文件常用转换

获取上传文件的arrayBuffer：var u8arr = await file.arrayBuffer()

通过arrayBuffer转换成Buffer：Buffer.from(u8arr)

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 = fileDataURL
  let 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
}