JavaScript 二进制转base64图片 and 对象转换为byte数组

最新推荐文章于 2025-05-11 15:33:07 发布

原创最新推荐文章于 2025-05-11 15:33:07 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

个人总结专栏收录该内容

21 篇文章

订阅专栏

本文记录了如何利用JavaScript处理后端返回的二进制流图片，涉及btoa进行base64编码，fromCharCode转换Unicode值，以及Uint8Array用于创建8位无符号整型数组。同时探讨了将大对象转换为byte数组的方法，以满足后端接收需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近有个项目后端返回的图片是个二进制流，把二进制流转换成图片，发现有几个有意思又比较少见的api，特意记录一下

btoa：用于创建一个 base-64 编码的字符串。
fromCharCode：将一个或多个 Unicode 值转换为字符串
Uint8Array：一个8位无符号整型数组

let imgUrl = 'data:image/jpeg;base64,' + btoa(String.fromCharCode(...new Uint8Array(response.data)))

拓展：刚好有个朋友问到我，大对象后端不接收，要转换成byte数组才行；决定探究一下。

// 字符串转Uint8Array
function stringToUint8Array(str){
  var arr = [];
  // 首先将字符串逐个转换为Unicode值
  for (var i = 0, j = str.length; i < j; ++i) {
    arr.push(str.charCodeAt(i));
  }
  // 再创建 Uint8Array 传递进去 
  var tmpUint8Array = new Uint8Array(arr);
  return tmpUint8Array
}
// 最后只要把大对象通过 JSON.stringify 转换成字符串就能使用了
const toUnit = stringToUint8Array(JSON.stringify(bigObj))