如何在React Native中将base64转换为Blob？

Question

我将把b64转换为blob in react native.

但我在atob功能上遇到错误.

这是我的代码.

var binary = atob(this.state.avatarSource.uri.split(',')[1]);
var byteNumbers = new Array(binary.length);

for(var i = 0; i < binary.length; i++) {
  byteNumbers.push(binary.charCodeAt(i));
}
var file = new Blob([new Uint8Array(byteNumbers)], {type: 'image/jpeg'});

有人有什么想法吗？

Answer 1

不要使用atob或btoa仅适用于Debug Mode.

因为当您使用调试模式时,您在浏览器中运行JS代码(应该是V8),而如果您要在生产模式下运行应用程序,则使用JavascriptCore没有atob或btoa实现的应用程序.

您可以使用base-64将数据转换为BASE64编码的字符串,但我不确定它是否可以为您创建正确的Blob对象.

根据我的理解,Blob是JS上下文和文件系统之间的桥梁,React Native本身还没有文件系统API,因此你可能得到一个Blob对象,但它总是空的.

如果你要从包含数字的数组创建一个图像,你可以看看react-native-fetch-blob这是我正在研究的项目,希望它可以解决这类问题:)

Answer 2

遇到这种情况：Android 上的 fetch() 无法使用数据 URI。相反，请尝试以下操作：

import { Buffer } from "buffer";


const base64 = 'iVBORw0KGgoAAAANSUhEU ....'
const buffer = Buffer.from(base64, "base64");

const blob = new Blob([buffer], { type: '[content-type]' })

如果 base64 是 PNG 文件，则此处的内容类型将为“image/png”。

Answer 3

我正在获取图像的基数 64。之后我从下面的代码中显示它。希望它可以帮助你

let imgSrc = "data:image/png;base64," + base64ImageData;
<Image source={{uri: imgSrc, scale: 1}} style={{ height: 80, width: 80}}/>