js实现base64,url,blob之间的相互转换

这篇具有很好参考价值的文章主要介绍了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展示地址

关系图
js实现base64,url,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回来。文章来源地址https://www.toymoban.com/news/detail-426758.html

到了这里,关于js实现base64,url,blob之间的相互转换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js里base64与file之间的转换

    在 js中,可以使用 Blob 对象将 base64 字符串转换为 File 对象。 方法一、base64 直接转换为 File 对象: 首先, 需要从 base64 字符串中获取文件类型, 然后将文件类型和 base64 字符串转换为 Blob 对象。最后, 使用 Blob 对象构造函数创建一个 File 对象。 下面是一个示例函数,它接收一个

    2024年02月09日
    浏览(39)
  • JS各种数据流之间的格式(ArrayBuffer、Uint8Array、Blob、 File、DataURL)相互转换及应用

    前端网页 File 上传、下载,Canvas 保存图片,Ajax 和 Fetch 二进制流传输,PDF 预览,浏览器上 WebAssembly 的应用 等等都需要到 ArrayBuffer 和 Blob 。 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要

    2024年02月08日
    浏览(41)
  • 图片与Base64编码相互转换、优势分析和技术实现

    在Web开发中,图片与Base64编码的相互转换是一个非常实用的技能。图片 Base64编码是将图片文件转换为字符串格式,以便于在网络上传输和存储。本文将详细介绍图片与Base64编码的转换方法,以及图片Base64编码的优势。 图片Base64相互转换 | 一个覆盖广泛主题工具的高效在线平

    2024年01月19日
    浏览(58)
  • 图片格式转换(File、Blob、base64)

    前言 记录一下比较常见的图片格式(File、Blob、base64)在不同的场景他们之间的相互转换的方法。 一、类型简介 Blob BLOB(binary large object): 二进制大对象,是一个可以存储二进制文件的容器。 在计算机中,BLOB常常是数据库中用来存储二进制文件的字段类型。 属性名称 读/写 描

    2024年02月02日
    浏览(67)
  • base64 字符串转换为 Blob 对象

    在 JavaScript 中,可以使用以下代码将 base64 字符串转换为 Blob 对象: 其中, base64 是待转换的 base64 字符串, type 是 Blob 对象的 MIME 类型,默认值为 \\\'application/octet-stream\\\' 。该函数返回一个 Blob 对象。 可以像下面这样使用该函数: 其中, base64Str 是待转换的 base64 字符串, ima

    2024年02月15日
    浏览(42)
  • 将 base64 字符串转换为 Blob 对象

    在 JavaScript 中,可以使用以下代码将 base64 字符串转换为 Blob 对象: 其中, base64 是待转换的 base64 字符串, type 是 Blob 对象的 MIME 类型,默认值为 \\\'application/octet-stream\\\' 。该函数返回一个 Blob 对象。 可以像下面这样使用该函数: 其中, base64Str 是待转换的 base64 字符串, ima

    2024年02月16日
    浏览(65)
  • 文件流互相转换(blob转base64,二进制流)

    跟用input上传文件的获取到的差不多 用URL.createObjectURL(blob)转化后是这样

    2024年02月10日
    浏览(54)
  • 前端 base64与图片相互转换

    base64转图片 如下图:(后端返回的数据) base64转换图片文件 图片(url)转换base64 便捷的图片转化base64 利用 Chrome 浏览器,在 chrome 下新建一个窗口,然后把要转化的图片直接拖入浏览器,打开控制台,点 Source,如下图所示,点击图片,右侧就会显示该图片的 base64 编码

    2024年02月12日
    浏览(52)
  • Base64字符串与图片的相互转换

    本篇博客记载的是一个我们在开发过程中很常用的一个小功能,就是我们在处理图片的时候做数据存放到数据库的功能, 我们存放的不再是本地路径而是一个Base64的字符串! 然后我们在取值的时候又将Base64转换为一个图片文件的做法 简单的两个步骤: Base64Util: ImageUtils: 使用

    2024年02月15日
    浏览(57)
  • 微信小程序 本地图片和base64图片相互转换

    wx.chooseImage === 从本地相册选择图片或使用相机拍照 wx.getFileSystemManager() === 获取全局唯一的文件管理器 wx.getFileSystemManager().readFile === 读取本地文件内容 wx.base64ToArrayBuffer() === 将 Base64 字符串转成 ArrayBuffer 对象 wx.downloadFile === 下载文件资源到本地 从手机上选择图片转base64 网络

    2024年02月03日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包