JavaScript - Blob,Canvas,base64(URL),File类型之间的转换

一.File对象与base64(URL)转换

        1.File对象转base64(URL)

        使用FileReader可将File对象中的内容读出，调用readAsDataURL()进行类型转换

模拟使用场景:

        input框选择图片后生成的是file对象，若要将其显示在img标签中，需将其转换为URL形式。

核心函数：

        FileReader() + readAsDataURL()

//假设已有一个文件对象【file】
if(window.FileReader){
  var fr = new FileReader()
  fr.readAsDataURL(file)
  //fr.onload为异步函数
  fr.onload = function (){
    //
    that.option.img【填保存url的变量】 = fr.result //fr.result可拿到转换后的url
  }
}

        2.base64(URL)转File对象

        base64(URL)的格式形如:data:image/jpeg;base64,/XXXXXXXXXXXXXXXXXXXXX(编码部分),

        可编写自定义的函数dataURLtoFile对其按格式切片后进行转换。

模拟使用场景:

        前端当前有一个base64格式的文件，想将其转换为File对象后使用FormData发送   

核心函数:

        new File(fileParts,filename,[options])   

//charCodeAt()方法可返回指定位置的字符的Unicode 编码

dataURLtoFile(dataurl, filename = 'file') {
      let arr = dataurl.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]  //切出文件类型
      let suffix = mime.split('/')[1]  //切出文件后缀
      let bstr = atob(arr[1]) //返回ASCII编码
      let n = bstr.length  //获取编码长度
      let u8arr = new Uint8Array(n)  //创建一个无符号8位视图对象
      while (n--) {
        //还原unicode
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime
      })
},

//使用示例：
const newFileObject = dataURLtoFile("待转换的URL","转换后的文件名")

---

二.Blob转File对象

        一般使用场景为Blob转File对象

核心函数：

        new File([Blob],filename,[options])   

const blob = data  //假设有一blob类型的数据data待转换
const newFileObject = new File([blob],"转换后的文件名", {type: blob.type})

---

三.Canvas转base64(URL)

 使用场景：

        当使用canvas绘制一幅图后，想将其用img标签显示，则需要将canvas先转换为DataURL

核心函数:

        canvas.toDataURL(type, encoderOptions);
【encoderOptions】说明:
        // 在指定图片格式为 image/jpeg 或 image/webp 的情况下，
        // 可以从 0 到 1 的区间内选择图片的质量。
        // 如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略

//以压缩一张图片为例  
cutImg() {
    const that = this;
    const canvas = document.createElement('canvas')
    //图片最后的宽高 可自定义
    canvas.width = 200
    canvas.height = 200
    const ctx = canvas.getContext('2d')
    const img = document.createElement('img')
    img.src = "待切图的URL路径"
    //清除canvas原始缓存
    img.setAttribute("crossOrigin", 'Anonymous')
    img.onload = function () {
      //绘制图片，坐标需与width和height对应
      ctx.drawImage(this, 0, 0, 200, 200)
      //调用toDataURL可获取到图片的base64数据
      //可指定文件的类型和生成图片的质量
      that.OriginCut = canvas.toDataURL('image/jpeg',0.92)
      console.log("切图成功")
      // console.log(canvas.toDataURL())
    }
  },