blob和base64互转

简介: blob和base64互转

交易场上的朋友胜过柜子里的钱款——托·富勒

blobbase64

// blob转base64
async function blobToBase64(blob) {
    let buffer = await blob.arrayBuffer()
    let bytes = new Uint8Array(buffer);
    console.log(bytes)
    // do anything with the byte array here
    let binary = ''
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }
    base64 = 'data:image/webp;base64,' + window.btoa(binary)
    console.log(base64)
    return base64
}


base64blob

// base64转blob
      function base64ToBlob(code) {
          let parts = code.split(';base64,')
          let contentType = parts[0].split(':')[1]
          let raw = window.atob(parts[1]) // 解码base64得到二进制字符串
          let rawLength = raw.length
          let uInt8Array = new Uint8Array(rawLength) // 创建8位无符号整数值的类型化数组
          for (let i = 0; i < rawLength; ++i) {
              uInt8Array[i] = raw.charCodeAt(i) // 数组接收二进制字符串
          }
          return new Blob([uInt8Array], { type: contentType })
      }

下载blob资源路径与blobUrl互转

相关文章
element-ui table排序sortable三种状态,怎么去掉默认状态
在 element-ui 中,也定义了 sort-orders 有三种状态: ascending、descending、null,这三种状态形成一个循环切换。
3530 0
|
JavaScript Java Maven
Nexus3.6安装、setting配置和jar包deploy
Nexus3.6安装、setting配置和jar包deploy
Nexus3.6安装、setting配置和jar包deploy
|
JavaScript 前端开发
JS之url进行编码和解码(三种方式)
JS之url进行编码和解码(三种方式)
20029 2
|
JavaScript 前端开发
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
|
10月前
|
JavaScript 前端开发 UED
PDF在线预览实现:如何使用vue-pdf-embed实现前端PDF在线阅读
本文详细介绍了如何在Vue项目中使用vue-pdf-embed实现PDF文件的在线展示。从项目初始化、插件集成到高级功能的实现和部署优化,希望对你有所帮助。在实际项目中,灵活运用这些技术可以大大提升用户体验和项目质量。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
自动驾驶 物联网 5G
深入探索5G网络中的网络切片技术及其应用场景
深入探索5G网络中的网络切片技术及其应用场景
3901 3
深入理解 uni-app 页面生命周期(三):onHide vs onUnload
深入理解 uni-app 页面生命周期(三):onHide vs onUnload
1367 0
|
JavaScript
cnpm 的安装与使用
本文介绍了npm和cnpm的概念、安装nodejs的步骤,以及cnpm的安装和使用方法,提供了通过配置npm使用中国镜像源来加速包下载的替代方案,并说明了如何恢复npm默认仓库地址。
cnpm 的安装与使用
|
设计模式 前端开发 JavaScript
深入探索研究MVVM架构设计
【10月更文挑战第7天】
631 0
|
缓存 前端开发 Linux
哇塞!NPM 缓存竟成开发拦路虎?快来掌握清空秘籍,开启前端开发逆袭之旅!
【8月更文挑战第20天】NPM是前端开发中管理依赖的关键工具。有时需清空其缓存以解决版本不一致或包损坏等问题,确保使用最新依赖。可通过命令`npm cache clean --force`强制清空全部缓存,或手动删除各系统下的缓存文件夹。注意清空缓存可能延长后续安装时间,建议事先备份依赖或确保可重新安装。正确管理缓存有助于提升开发效率。
710 1