揭秘Base64图像转换的正确姿势

前端

2022-11-27 04:58:35

Base64图像转换指南：正确姿势避免坑

在前端开发中，Base64图像转换是家常便饭，它能将图像数据变身为字符串，方便我们在网络上传输和存储。不过，这个转换过程并非一帆风顺，稍不留神就会遇到坑，导致图像无法正常显示或使用。今天，我们就来避坑，掌握Base64图像转换的正确姿势。

常见的错误做法

转换Base64图像时，以下做法都是不可取的：

直接将Base64字符串丢给img元素的src属性。
忘记设置响应类型为Blob。
忘了在Base64字符串前加上固定的前缀“data:image/png;base64,”。
没指明图像类型（png、jpg、gif等等）。

正确转换姿势

想要正确转换Base64图像，牢记以下步骤：

设置响应类型 ：发送请求时，把responseType属性设为“blob”。这样浏览器就会接收Blob格式的响应，而不是默认的JSON或text格式。
添加固定前缀 ：在把Base64字符串赋给img元素的src属性前，务必加上固定的前缀“data:image/png;base64,”。它告诉浏览器，这个字符串是一个Base64编码的PNG图像。
指定图像类型 ：添加固定前缀时，别忘了指明图像的类型，如png、jpg或gif。类型不对，浏览器就可能无法正确显示图像。
正确拼接Base64字符串 ：赋值给img元素的src属性时，一定要确保Base64字符串是完整的。截断或损坏的字符串会导致图像显示异常。

代码示例

下面这个JavaScript代码演示了如何正确转换Base64图像：

function base64ToImage(base64String) {
  // 设置响应类型为Blob
  const xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';

  // 发送请求
  xhr.open('GET', 'image.png');
  xhr.send();

  // 监听请求状态
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 获取Blob对象
      const blob = xhr.response;

      // 创建文件阅读器
      const reader = new FileReader();

      // 监听文件读取状态
      reader.onload = function() {
        // 获取Base64字符串
        const base64String = reader.result;

        // 添加固定前缀
        const prefixedBase64String = 'data:image/png;base64,' + base64String;

        // 将Base64字符串赋值给img元素的src属性
        const img = document.getElementById('image');
        img.src = prefixedBase64String;
      }

      // 读取文件
      reader.readAsDataURL(blob);
    }
  };
}