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

更新时间：2023年04月13日 10:26:28 作者：冬天不会冷lz

Blob对象表示一个不可变、原始数据的类文件对象,Blob表示的不一定是JavaScript原生格式的数据,下面这篇文章主要给大家介绍了关于js实现base64、url和blob之间相互转换的三种方式,需要的朋友可以参考下

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

原理：利用fileReader的readAsDataURL，将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

原理： Uint8Array，ArrayBuffer构造

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 之间互转

原理：atob 和 btoa

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相互转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
这篇文章主要介绍了深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制,需要的朋友可以参考下
2014-06-06
js实现继承的5种方式
这篇文章主要介绍了js实现继承的5种方式,具体分析了JavaScript对象冒充、call()方法方式、apply()方法方式、原型链方式及混合方式的具体使用技巧,需要的朋友可以参考下
2015-12-12
Jupyter Notebook运行JavaScript的方法
Jupyter Notebook是一块所见即所得的画布，通过在浏览器上编辑代码，让开发人员实现展示与快速迭代的利器，本文主要介绍了Jupyter Notebook运行JavaScript的方法，感兴趣的可以了解一下
2021-05-05
javascript定义函数的方法
javscript中定义和声明函数有三种方式：正常方法构造函数函数直接量。
2010-12-12
js cavans实现静态滚动弹幕
这篇文章主要为大家详细介绍了js cavans实现静态滚动弹幕，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
微信小程序封装的HTTP请求示例【附升级版】
这篇文章主要介绍了微信小程序封装的HTTP请求,结合实例形式分析了微信小程序封装基于wx.request方法的http请求相关操作与使用技巧,并附带升级版示例供大家参考,需要的朋友可以参考下
2019-05-05
JavaScript单一职责原则深入分析
这篇文章主要介绍了理解JavaScript单一职责原则，单一职责原则（SRP：Single responsibility principle）又称单一功能原则，面向对象五个基本原则（SOLID）之一，下文更多相关介绍感兴趣的小伙伴可以参考一下
2022-08-08
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
这篇文章主要介绍了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
2019-01-01
Dom元素变换效果（工具函数）
　做前端或者js程序员的同学应该都有感受，在日常工作中，用的最多的功能，一个是ajax与后台的数据接口，另一个就是对Dom元素的style控制，来达到不同的变换效果。
2010-10-10
JS实现商品橱窗特效
这篇文章主要为大家详细介绍了JS实现商品橱窗特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01