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

【问题标题】：How to get image as base 64 from url react native如何从 url react native 获取 base 64 的图像
【发布时间】：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 不，它没有

标签： react-native base64 tobase64string

【解决方案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 做贴纸