Angular2中图片与Base64互转及HTML页面展示实现方法

嘿，看起来你已经迈出了图片转Base64的关键一步！我来帮你补全完整的转码逻辑，以及在Angular中解码Base64并展示图片的具体方法~

你的现有代码已经搭建了基础，我帮你补全剩余部分，确保能正确生成可直接使用的Base64字符串：

// 组件类中的代码
files: File[] = [];
base64Image: string = '';
imageSrc: string = ''; // 用于直接在HTML展示的图片地址

getFiles(event: any) {
  this.files = event.target.files;
  // 确保有选中文件再执行后续操作
  if (this.files.length > 0) {
    const reader = new FileReader();
    reader.onload = this._handleReaderLoaded.bind(this);
    reader.readAsBinaryString(this.files[0]);
  }
}

_handleReaderLoaded(readerEvt: ProgressEvent<FileReader>) {
  const binaryString = readerEvt.target?.result as string;
  // 将二进制字符串转换为Base64编码
  this.base64Image = btoa(binaryString);
  // 拼接data URI前缀，这样就能直接在img标签中使用
  const imageFormat = this.files[0].type.split('/')[1]; // 获取图片格式（如png、jpeg）
  this.imageSrc = `data:image/${imageFormat};base64,${this.base64Image}`;
}

根据你的需求，分两种场景来处理：

1. 直接展示Base64图片（最简单方式） #

如果已经生成了带data:image/[格式];base64,前缀的imageSrc，直接在HTML模板中绑定即可：

<!-- 组件的HTML模板 -->
<img [src]="imageSrc" alt="转码后的图片" style="max-width: 100%;">

如果你的Base64字符串是纯编码内容（没有前缀），只需要先补上前缀再绑定：

// 假设你拿到的纯Base64字符串是pureBase64
const imageFormat = 'png'; // 根据实际图片类型修改（如jpeg、gif）
this.imageSrc = `data:image/${imageFormat};base64,${pureBase64}`;

2. 将Base64解码为Blob对象（用于上传/高级处理） #

如果需要把Base64转换成Blob对象（比如要重新上传到服务器），可以编写解码方法：

decodeBase64ToBlob(base64String: string): Blob {
  // 移除Base64字符串的前缀（如果存在）
  const base64Data = base64String.replace(/^data:image\/(png|jpeg|jpg|gif);base64,/, '');
  // 解码Base64为二进制字符串
  const byteCharacters = atob(base64Data);
  // 将二进制字符串转换为Uint8Array
  const byteNumbers = new Array(byteCharacters.length);
  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }
  const byteArray = new Uint8Array(byteNumbers);
  // 返回Blob对象，注意type要和实际图片类型匹配
  return new Blob([byteArray], { type: 'image/png' });
}

如果要把Blob对象转为可展示的图片地址，可以使用URL.createObjectURL：

const blob = this.decodeBase64ToBlob(this.base64Image);
this.blobImageSrc = URL.createObjectURL(blob);

然后在HTML中展示：

<img [src]="blobImageSrc" alt="解码后的Blob图片">

注意：使用URL.createObjectURL生成的URL会占用浏览器内存，建议在组件销毁时释放资源：

import { OnDestroy } from '@angular/core';

// 确保组件实现OnDestroy接口
export class YourComponent implements OnDestroy {
  blobImageSrc: string = '';

  ngOnDestroy() {
    if (this.blobImageSrc) {
      URL.revokeObjectURL(this.blobImageSrc);
    }
  }
}

内容的提问来源于stack exchange，提问作者Depi