js实现base64、url和blob之间相互转换的三种方式

 更新时间:2023年04月13日 10:26:28   作者:冬天不会冷lz  
Blob对象表示一个不可变、原始数据的类文件对象,Blob表示的不一定是JavaScript原生格式的数据,下面这篇文章主要给大家介绍了关于js实现base64、url和blob之间相互转换的三种方式,需要的朋友可以参考下

一般来说前端展示图片会通过三种方式: url、base64、blob

1.url: 一般来说,图片的显示还是建议使用url的方式比较好。

let url = "http://xxxxxx"

2.base64: 如果图片较大,图片的色彩层次比较丰富,则不适合使用这种方式,因为其Base64编码后的字符串非常大,会明显增大HTML页面,影响加载速度。如果图片像loading或者小图标,小图片这样的,大小极小,但又占据了一次HTTP请求,而很多地方都会使用。则非常适用“base64:URL图片”技术进行优化了!

let base64Str = "data:image/png;base64,iVBORw0KG.....AAAAElFTkSuQmCC"

3.blob: 当后端返回特定的图片二进制流的时候,前端用blob容器接收二进制流,再通过 URL.createObjectURL(blob)生成一个临时blob展示地址

关系图

url 转 base64

原理: 利用canvas.toDataURL的API转化成base64

function urlToBase64(url) {
      return new Promise ((resolve,reject) => {
        let image = new Image();
        image.onload = function() {
          let canvas = document.createElement('canvas');
          canvas.width = this.naturalWidth;
          canvas.height = this.naturalHeight;
          // 将图片插入画布并开始绘制
          canvas.getContext('2d').drawImage(image, 0, 0);
          // result
          let result = canvas.toDataURL('image/png')
          resolve(result);
        };
        // CORS 策略,会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
        image.setAttribute("crossOrigin",'Anonymous');
        image.src = url;
        // 图片加载失败的错误处理
        image.onerror = () => {
          reject(new Error('urlToBase64 error'));
      };
    }

使用

let imgUrL = `http://XXX.jpg`
urlToBase64(imgUrL).then(res => {
  // 转化后的base64图片地址
  console.log('base64', res)
})

blob 转 url

原理: 利用URL.createObjectURL为blob对象创建临时的URL

var url = URL.createObjectURL(blob)

blob 转 base64

原理: 利用fileReaderreadAsDataURL,将blob转为base64

blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
      resolve(e.target.result);
    };
    // readAsDataURL
    fileReader.readAsDataURL(blob);
    fileReader.onerror = () => {
      reject(new Error('blobToBase64 error'));
    };
  });
}

使用

blobToBase64(blob).then(res => {
  // 转化后的base64
  console.log('base64', res)
})

base64 转 Blob

原理: Uint8ArrayArrayBuffer构造

function base64toBlob(dataurl) {
    var arr = dataurl.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 });
}

或者

function baseToBlob (b64) {
      const byteCharacters = atob(b64)
      const byteNumbers = new Array(byteCharacters.length)
      for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i)
      }
      const byteArray = new Uint8Array(byteNumbers)
      const blob = new Blob([byteArray], { type: 'image/jpeg' })
      return blob
    }
//需要你手动去掉data:image/png;base64,

使用:

let base64Str = "data:image/png;base64,iVBORw0KGgoA.....AAANSUhEUgAA"
dataURLtoBlob(base64Str)

或者,利用fetch(推荐)

fetch(`data:${type};base64,${base64}`).then(res => res.blob())

字符串 和 base64 之间互转

原理:atobbtoa

let str = btoa("Dsgsg1234567890-=[];'m,,./")
console.log(str)  //RHNnc2cxMjM0NTY3ODkwLT1bXTsnbSwsLi8=
console.log(atob(str))  //Dsgsg1234567890-=[];'m,,./

而且大部分浏览器都支持 除了 IE9-btoa 方法不支持中文和特殊字符,否则会报错

所以保险起见,在转换之前还是 encodeURIComponent/encodeURI一下吧, 当然别忘了在 atob 后,再 decodeURIComponent/decodeURI回来。

总结

到此这篇关于js实现base64、url和blob之间相互转换的三种方式的文章就介绍到这了,更多相关js base64 url blob相互转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现倒计时秒杀效果

    js实现倒计时秒杀效果

    这篇文章主要为大家详细介绍了js实现倒计时秒杀效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • 完美实现js拖拽效果 return false用法详解

    完美实现js拖拽效果 return false用法详解

    这篇文章主要为大家详细介绍了完美实现js拖拽效果的代码,一起学习return false的用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • js数组实现权重概率分配

    js数组实现权重概率分配

    今天写了一个js控制页面轮播的功能,如果仅仅使用队列很简单,但是考虑到为每一个页面分配权重的是否变的异常复杂,使用switch和if else也无法解决,于是想到使用js数组实现
    2017-09-09
  • 浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结

    浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结

    下面小编就为大家分享一篇浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结。小编觉得写的非常不错,需要的朋友可以过来参考一下
    2016-03-03
  • Bootstrap编写导航栏和登陆框

    Bootstrap编写导航栏和登陆框

    这篇文章主要为大家详细介绍了Bootstrap导航栏和登陆框的编写代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 比较详细的XMLDOM对象方法详解

    比较详细的XMLDOM对象方法详解

    主要介绍了一些xml dom对象的使用方法
    2008-08-08
  • koa2服务端使用jwt进行鉴权及路由权限分发的流程分析

    koa2服务端使用jwt进行鉴权及路由权限分发的流程分析

    这篇文章主要介绍了koa2服务端使用jwt进行鉴权及路由权限分发 ,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • js模拟实现Array的sort方法

    js模拟实现Array的sort方法

    JavaScript的Array对象有一个sort方法,用于实现对数组元素的排序,该方法默认按照数组项ASCII 字符顺序升序排列。这篇文章重点给大家介绍js模拟实现Array的sort方法,一起看看吧
    2007-12-12
  • 详细分析JavaScript函数定义

    详细分析JavaScript函数定义

    这篇文章主要给大家详细分析了JavaScript函数定义的相关资料,需要的朋友可以参考下
    2015-07-07
  • 解析Javascript单例模式概念与实例

    解析Javascript单例模式概念与实例

    本文将介绍Javascript模式中较为常见和实用的模式——单例模式,主要分为概念和实例部分。在介绍实例的同时也会对代码中额外的知识点进行讲解。需要的朋友可以看下
    2016-12-12

最新评论