dataURL/blob/file/image

dataURL

一种特殊的URL格式，区分于传统的URL, 传统的URL可以看得出来域名地址等，而DataURL看不出来
主要结构是
data:[<mediatype>][;base64],<data>

blob

（binary large object），二进制大对象，是一个可以存储二进制文件的容器; 对象表示一个不可变、原始数据的类文件对象

将 blob 或 file 转成 DataURL（base64） 形式

readBlob(somfile).then((data) => {
    console.log(data)
})
function readBlob(file) {
    return new Promise((resolve, reject)=> {
      let reader = new FileReader()
    reader.onload = (e) => {
        resovle(e.target.result)
    }
    reader.readAsDataURL(blob)
  })
}

DataURL、Blob、 File、 Image之间的关系与转换

// dataUrl 转成blob
function dataUrl2Blob(dataUrl) {
    let arr = dataUrl.split(',') // 根据data:mimeType[;base64],<data>的形式拆分数据
  let mimeType = arr[0].match(/:(.*?);/)[1] // 获取mimeType
  let contentStr = atob(arr[1]) // 将base64转码成string; btoa表示将字符串转成base64
  let len = contentStr.length
  let u8arr = new Uint8Array(len)
  while(len--) {
      u8arr[len] = contentStr.charCodeAt(len)
  }
  // 拿到数据后生成
  return new blob([u8arr], {type: mimeType})
}
// dataUrl转image
function dataUrl2Image() {
    let img = new Image()
  img.src = dataUrl
  return img
}
// dataUrl转canvas
function dataUrl2Cnavas (dataUrl) {
    return new Promise((resolve, reject) => {
    let canvas = document.createElement('canvas')
    let content = canvas.getContext('2D')
    let img = new Image()
    img.onload = () => {
      canvas.width = img.width
      canvas.height = img.height
      canvas.drawImage(img,0,0)
      resolve(canvas)
    }
    img.src = dataUrl
  })
}
// file转blob？很少这么用，因为file就是一个blob对象了
function file2Blob(file) {
    let reader = new fileReader(file)
  let arrayBf = reader.readAsArrayBuffer()
  return new Blob(arrayBf)
}
// canavas 转image
function canvas2Image (canvas) {
    let image = new Image()
  image.src = canvas.toDataURL('image/png', 1.0)
  return image
}
// blob 转file
function blob2File(array, fileName) {
    let blobOrign = new Blob([array], {type: 'text/html'})
  let file = new File([blobOrign], fileName, {type: 'text/html'})
  return file
}
// blob/file 转 dataURL
function blob2dataURL(blob) {
    return Promise((resolve, reject) => {
      let reader = new FileReader()
    reader.readAsDataURL(blob)
    reader.onload = (e) => {
            resolve(e.target.result)
    }
    })
}