如何在React Native中将图片base64转换为符合要求的JavaScript Blob对象？

我需要生成如下所示的图片Blob对象：

目前我已经在React Native中获取到图片的base64 url并存储在变量中，代码如下：

const base64 = img.data;

我尝试了如下方法但未能生效：

function b64toBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], {type: 'image/jpeg'});
  }
  const blob = b64toBlob(base64);

  console.log(blob);

运行结果如下：

我的base64变量为const base64 = img.data;，请问如何基于该变量在React Native中生成符合预期的Blob对象？

解决方案 #

你的转换失败通常由两个常见原因导致：

• 你当前的img.data返回的是没有data:image/jpeg;base64,前缀的纯base64编码，原代码中split(',')[1]会取到undefined，导致转换逻辑失效
• React Native环境下原生atob、Blob的实现和浏览器存在差异，手动构造Blob的兼容性不足

推荐优先使用兼容性更强的fetch方案实现转换：

// 先处理base64前缀，没有前缀的话补上，图片格式按需调整
const fullBase64 = base64.startsWith('data:') ? base64 : `data:image/jpeg;base64,${base64}`;
// 调用fetch转换为blob
const imageBlob = await fetch(fullBase64).then(res => res.blob());
console.log(imageBlob);

如果需要沿用手动转换的方式，修改原函数兼容前缀问题即可：

import { decode as atob } from 'base-64'; // 若环境提示atob未定义，安装base-64包引入后使用

function b64toBlob(dataURI, fileType = 'image/jpeg') {
  const pureBase64 = dataURI.includes(',') ? dataURI.split(',')[1] : dataURI;
  const byteString = atob(pureBase64);
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], { type: fileType });
}

const blob = b64toBlob(base64);

注意事项 #

• 若图片为png、webp等其他格式，记得将fileType参数修改为对应格式的MIME类型
• 若运行报错atob is not defined，执行npm install base-64安装依赖后引入替换原生atob即可

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