图片或文件Blob、File、Base64之间的相互转换

举报
叶 秋 发表于 2023/02/16 10:43:00 2023/02/16
【摘要】 在做前端项目的时候,遇到图片的上传或者下载时,不可避免的会遇到Blob、File、Base64三种类型的转换。那么今天就总结下,三者之间的相互转换。 首先我们看看base64 ,File 对象,Blob 对象长什么样的,怎么来的。

前言

在做前端项目的时候,遇到图片的上传或者下载时,不可避免的会遇到Blob、File、Base64三种类型的转换。那么今天就总结下,三者之间的相互转换。

首先我们看看base64 ,File 对象,Blob 对象长什么样的,怎么来的。

  1. base64 : 可以直接当作链接地址使用
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGU....
  1. File 对象:
File{
    lastModified: 1649490762164
    lastModifiedDate: Sat Apr 09 2022 15:52:42 GMT+0800 (GMT+08:00) {}
    name: "1649490762160-251.png"
    size: 25748
    type: "image/png"
    webkitRelativePath: ""
    [[Prototype]]: File
}
  1. Blob 对象
Blob{
    size: 25748
    type: "image/png"
    [[Prototype]]: Blob
}
  1. blob链接
blob:url/22ec44b8-5864-4960-8ea8-a71a7e40bb63

base64 转 Blob 对象

//base64 转 Blob对象
/* base64: data:image/png;base64,iVB....
/* Blob:{...}
*/
function base64ToBlob(data) {
    var arr = data.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 对象

/** base64 转 File 对象
  /* @param data base64
  /* @param filename 自定义文件名
  /* @return File 对象
  */
  function base64ToFile(data, filename) {
      var arr = data.split(','), mime = arr[0].match(/:(.*?);/)[1],
 
          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      
      let suffixArr = mime.split("/")
      if (suffixArr.length && !filename) {
          let suffix = suffixArr[suffixArr.length - 1]
          filename = new Date().getTime() + "-" + Math.floor((Math.random() * 10000)) + "." + suffix
      }
 
      while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
  }

File 对象,Blob 对象 转base64

//blob ,File 对象 转 base64
function blobFileTobase64(blobFile) {
    let reader = new FileReader()
    reader.readAsDataURL(blobFile);
    return new Promise((resolve, reject) => {
        reader.onload = function () {
 
            resolve(this.result)
        }
        reader.onerror = (err) => {
            reject(err);
        };
    })
}   

blob链接转 base64 :

利用canvas.toDataURL的API转化成base64

function urlToBase64(url, type = "image/png") {
    return new Promise((resolve, reject) => {
        let img = new Image()
        img.src = url
        img.onload = function () {
            let canvas = document.createElement("canvas")
            canvas.width = this.naturalWidth
            canvas.height = this.naturalHeight
            let ctx = canvas.getContext("2d")
            ctx.drawImage(img, 0, 0)
            let result = canvas.toDataURL(type || 'image/png')
            resolve(result)
        }
        img.onerror = function (err) {
            reject(err)
        }
    })
 
}   
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。