js显示byte[] 转 Base64 编码显示图片

最新推荐文章于 2023-08-13 17:19:42 发布

原创最新推荐文章于 2023-08-13 17:19:42 发布 · 5.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

本文介绍了如何在前端项目中处理后台传来的byte[]类型图片数据，通过将其转换为Base64编码并结合Data URI scheme实现图片在页面上的显示。主要涉及arrayBufferToBase64方法及图片数据的拼接过程。

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

背景

项目中经常会用到页面显示图片的功能，比如前端接收后台传输的数据是 byte[] 类型的数据，这时我们可以转成 Base64编码的图片再进行显示。

byte[] 转 Base64 编码

private arrayBufferToBase64(buffer) {
  let binary = "";
  const bytes = new Uint8Array(buffer);
  const len = bytes.byteLength;
  for (let i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  //window.btoa():将ascii字符串或二进制数据转换成一个base64编码过的字符串,该方法不能直接作用于Unicode字符串.
  return window.btoa(binary);
}

private getImage() {
    const image = [-199,80...50];//从后台接收的 byte[] 类型的图片
    let imageBase64;
    imageBase64 = arrayBufferToBase64(image);
    //把Data URI scheme的图片类型和图片拼接起来
	imageBase64 = "data:image/png;base64," + imageBase64;    
}