如何从 url react native 获取 base 64 的图像

Posted 2023-03-14

【中文标题】如何从 url react native 获取 base 64 的图像

【英文标题】：How to get image as base 64 from url react native

【发布时间】：2022-01-04 12:52:25

【问题描述】：

我正在尝试使用以下代码获取图像：

await fetch(
        `$BACKEND_URL/api/visitors/getAvatar/$visitor.visitor.accountId`
      )

我收到了这种格式的回复：

“_bodyBlob”：“_data”：“__collector”：[对象]，“blobId”：“7d70537a-3869-40d6-a9d1-bf092c2d7151”，“偏移量”：0，“大小”：10188 ，“_bodyInit”：“_data”：“__collector”：[对象]，“blobId”：“7d70537a-3869-40d6-a9d1-bf092c2d7151”，“偏移量”：0，“大小”：10188， “bodyUsed”：false，“headers”：“map”：“access-control-allow-credentials”：“true”，“access-control-allow-origin”：“*”，“alt-svc”： "h3=":443"; ma=86400, h3-29=":443"; ma=86400, h3-28=":443"; ma=86400, h3-27=":443"; ma=86400 ”，“缓存控制”：“公共，最大年龄=86400”，“cf-cache-status”：“动态”，“cf-ray”：“6b432d06cb116b3f-AMS”，“内容长度”：“10188 "，"内容类型"："图像/png"，"日期"："格林威治标准时间 2021 年 11 月 26 日星期五 12:38:48"，"etag"："W/"27cc-PGkLO2FScsiEoWiW9u+CmIhDkaQ""，"期望-ct": "max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"", "nel": ""success_fraction": 0,"report_to":"cf-nel","max_age":604800", "report-to": ""endpoints":["url":"https:\/\/a.nel.cloudflare .com\/report\/v3?s=tFCAld 4YJbsHJotK05x0jrG％2FUB2tWO％2BOjAd0LTRyhuwuSJzpu5OkPtUo1CGavatZPQb62WYJL2J％2BGcD％2BI4R2GS0HItiwIBtpOPBqB70yyPCx6AU6N5BCuCtM5Ck4WgSN2cf0yWpKV6TIRxzwvqIz “]，” 基团 “：” CF-NEL “ ”MAX_AGE“：604800”， “服务器”： “的CloudFlare”， “X-内容类型的选项”：“ nosniff”，“x-download-options”：“noopen”，“x-frame-options”：“DENY”，“x-xss-protection”：“1；模式=块“

如何从中提取图像为base64？我已经尝试了几个软件包，例如 react-native-fs 和 rn-fetch-blob，但它们没有得到维护或弃用！

【问题讨论】：

https:\/\/a.nel.cloudflare.com\/report\/v3?s=tFCAld4YJbsHJotK05x0jrG%2FUB2tWO%2BOjAd0LTRyhuwuSJzpu5OkPtUo1CGavatZPQb62WYJL2J%2BGcD%2BI4R2GS0HItiwIBtpOPBqB70yyPCx6AU6N5BCuCtM5Ck4WgSN2cf0yWpKV6TIRxzwvqIz 是您的图片网址吗？

我不能在这里说什么我被困在这里...@Rohit ...如何将其解析为 url 并查看这是否是 url ！我已尝试加载它但无法正常工作

这能回答你的问题吗？ React-Native: Convert image url to base64 string

@AndreyProgr 不，它没有

【参考方案1】：

在使用了几个包之后，我得到了这个技巧来获取 base64。上传任何图片后，您可以使用 rn-fetch-blob 将 url 转换为 base64。

RNFetchBlob.fs
      .readFile(
        Platform.OS === 'android' ? url : url.replace('file://', ''),
        'base64',
      ).then(res => 
         console.log(res, "base64 result");
     )

这里需要注意的一点是，当您在 ios 中上传文件时，您可能会得到格式为“file://”的 url，如果是这种情况，请将其从 url 中删除，然后传递就像我在上面的代码中提到的那样。

【讨论】：

它没有维护@Akshay

到目前为止，我在阅读方面没有遇到任何问题，我在 RnFetchBlob 上做了多少工作，他们在写作方面遇到了一些问题（写权限）。我曾在多个使用过 RnFetchBlob 的应用程序上工作过，到目前为止我们还没有注意到任何严重的问题。如果更好的话，在 react-native-fs 中也可以看到类似的功能。

还有一件事……我不是从本地存储读取，而是从 api 读取……

当您从 api 获取它时，您希望将其转换为 base64 的任何特殊原因？

想用 ViewShot 做贴纸