url base64 file blob canvas转换

urlToBase64:

const urlToBase64 = (url) => {
    const img = new Image()
    img.src = url
    img.onload = () => {
        const canvas = document.createElement('canvas')
        const context = canvas.getContext('2d')
        canvas.width = img.width
        canvas.height = img.height
        context.drawImage(img, 0, 0, img.width, img.height)
        const base64 = canvas.toDataURL('image/png')
        return base64
    }
}

base64ToBlob:

const base64ToBlob = (base64) => {
    const arr = base64.split(',')
    const mime = arr[0].match(/:(.*?);/)[1]
    const bstr = atob(arr[1])
    let n = bstr.length
    const u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    return new Blob([u8arr], { type: mime })
}

base64ToFile:

const base64ToFile = (base64, fileName) => {
    const arr = base64.split(',')
    const mime = arr[0].match(/:(.*?);/)[1]
    const bstr = atob(arr[1])
    let n = bstr.length
    const u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    const blob = new Blob([u8arr], { type: mime })
    return new File([blob], fileName)
}

fileToBase64:

const fileToBase64 = (file) => {
  return new Promise((resolve, reject) => {
    try {
      const read = new FileReader()
      read.onload = function (e) {
        resolve(e.target.result)
      }
      read.readAsDataURL(file)
    } catch (err) {
      reject(err)
    }
  })
}
const res = await fileToBase64(file)

fileToUrl:

const fileToUrl = (file) => {
    return URL.createObjectURL(file)
}

blobToUrl:

const blobToUrl = (blob) => {
    return URL.createObjectURL(blob)
}

blobToBase64:

const blobToBase64 = (blob) => {
  return new Promise((resolve, reject) => {
    try {
      const read = new FileReader()
      read.onload = function (e) {
        resolve(e.target.result)
      }
      read.readAsDataURL(blob)
    } catch (err) {
      reject(err)
    }
  })
}
const res = await blobToBase64(blob)

blobToFile:

const blobToFile = (blob) => {
    return new File([blob], fileName)
}

canvasToBase64:

const canvasToBase64 = (canvas, type = 'image/png')=> {
    return canvas.toDataURL(type)
}

canvasToBlob:

const canvasToBlob = (canvas) => {
    canvas.toBlob((blob) => {
        return blob
    }
}

stringToBase64:

const stringToBase64 = str => {
  const encode = encodeURI(str)
  const base64 = btoa(encode) // 若str中含中文或特殊字符，直接btoa会报错，所以需要先encode编码
  return base64
}

base64ToString:

const base64ToString = base64 => {
  const decode = atob(base64)
  const str = decodeURI(decode)
  return str
}