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

tvz2xvvm  于 2023-03-09  发布在  React
关注(0)|答案(6)|浏览(523)

我打算在react native中将b64转换为blob。
但是我在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'});

有人知道吗?

tsm1rwdh

tsm1rwdh1#

不要使用atobbtoa,它们只在Debug Mode中有效。
因为当您使用调试模式时,您在浏览器(应该是V8)中运行JS代码,而如果您要在生产模式下运行应用程序,它将使用JavascriptCore,而JavascriptCore没有atobbtoa实现。
您可以使用base-64将数据转换为BASE64编码的字符串,但我不确定它是否可以为您创建正确的Blob对象。
据我所知,Blob是JS上下文和文件系统之间的桥梁,React Native本身还没有文件系统API,因此您可能会得到一个Blob对象,但它总是空的。
如果你要从包含数字的数组创建一个图像,你可以看看react-native-fetch-blob,这是我正在做的一个项目,希望它能解决这类问题:)

tyg4sfes

tyg4sfes2#

遇到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”。

xtfmy6hx

xtfmy6hx3#

右解
1 =下载此库npm i -S base-64
2=将其添加到屏幕的导入部分import {decode as atob, encode as btoa} from 'base-64';
3=在屏幕中设置此功能

const dataURLtoFile = (dataurl, filename) => {
var arr = dataurl.split(','),
  mime = arr[0].match(/:(.*?);/)[1],
  bstr = atob(arr[1]),
  n = bstr.length,
  u8arr = new Uint8Array(n);

while (n--) {
  u8arr[n] = bstr.charCodeAt(n);
}

return new File([u8arr], filename, {type: mime});
};

最后调用这个函数

let file = dataURLtoFile(
                'data:image/png;base64,' + response.assets[0].base64, //if your bas64 include <data:image/png;base64,> rmove this from parameter 
                'test.png',
              );


console.log(file )

哈哈一切准备就绪
我希望这个答案能帮助任何人

zz2j4svz

zz2j4svz4#

你可以试试fetch

let blob = await this.base64ToBlob(encoded);
  console.log('btoB64 resp === ', blob);

  async base64ToBlob(encoded) {
    let url = `data:image/jpg;base64,${encoded}`;
    let res = await fetch(url);
    let blob = await res?.blob();
    return blob;
  }
7gyucuyw

7gyucuyw5#

当我试图从视频创建一个blob时,这里没有一个解决方案对我有效-它一直导致文件损坏,尽管如此:
请注意,URI必须为“file://path”

function uriToBlob(uri: string): Promise<Blob> {
return new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest()
  xhr.responseType = 'blob'
  xhr.onload = () => {
    const blob = xhr.response
    resolve(blob)
  }
  xhr.onerror = (err) => {
    reject(err)
  }
  xhr.open('GET', uri)
  xhr.send()
})}

更新:这对我也有效

const res = await fetch(`file://${segment.uri}`) 
 const blobData = await res.blob()
qltillow

qltillow6#

我得到了一个图像的基地64。之后,我显示它从下面的代码。希望它可能会帮助你

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

相关问题