0

I am trying to fetch a image with following code:

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

I am getting response in this format :

{"_bodyBlob": {"_data": {"__collector": [Object], "blobId": "7d70537a-3869-40d6-a9d1-bf092c2d7151", "offset": 0, "size": 10188}}, "_bodyInit": {"_data": {"__collector": [Object], "blobId": "7d70537a-3869-40d6-a9d1-bf092c2d7151", "offset": 0, "size": 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", "cache-control": "public, max-age=86400", "cf-cache-status": "DYNAMIC", "cf-ray": "6b432d06cb116b3f-AMS", "content-length": "10188", "content-type": "image/png", "date": "Fri, 26 Nov 2021 12:38:48 GMT", "etag": "W/"27cc-PGkLO2FScsiEoWiW9u+CmIhDkaQ"", "expect-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=tFCAld4YJbsHJotK05x0jrG%2FUB2tWO%2BOjAd0LTRyhuwuSJzpu5OkPtUo1CGavatZPQb62WYJL2J%2BGcD%2BI4R2GS0HItiwIBtpOPBqB70yyPCx6AU6N5BCuCtM5Ck4WgSN2cf0yWpKV6TIRxzwvqIz"}],"group":"cf-nel","max_age":604800}", "server": "cloudflare", "x-content-type-options": "nosniff", "x-download-options": "noopen", "x-frame-options": "DENY", "x-xss-protection": "1; mode=block"}}

How to extract image as base64 from this ? I have tried couple of packages like react-native-fs and rn-fetch-blob but they are not maintained or deprecated!

Ali Yar Khan
  • 1,231
  • 2
  • 11
  • 33
  • Is `https:\/\/a.nel.cloudflare.com\/report\/v3?s=tFCAld4YJbsHJotK05x0jrG%2FUB2tWO%2BOjAd0LTRyhuwuSJzpu5OkPtUo1CGavatZPQb62WYJL2J%2BGcD%2BI4R2GS0HItiwIBtpOPBqB70yyPCx6AU6N5BCuCtM5Ck4WgSN2cf0yWpKV6TIRxzwvqIz` your image URL? – Rohit Aggarwal Nov 26 '21 at 13:17
  • i can't say anything here i am stuck here ... @Rohit ... how to parse this into url and see whether this is the url ! i have tried to load it but not working – Ali Yar Khan Nov 26 '21 at 13:50
  • Does this answer your question? [React-Native: Convert image url to base64 string](https://stackoverflow.com/questions/34908009/react-native-convert-image-url-to-base64-string) – AndreyProgr Nov 26 '21 at 14:06
  • @AndreyProgr no it doesn't – Ali Yar Khan Nov 27 '21 at 15:57

1 Answers1

0

After using couple of packages, I got this trick to get base64. After you have uploaded any image, you can use rn-fetch-blob to convert the url to base64.

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

One point to note here is that when you upload file in iOS, you might get url in the format "file://", if thats the case then remove that from url and then pass it just like I have mentioned in the above code.

Akshay Shenoy
  • 1,194
  • 8
  • 10
  • it is unmaintained @Akshay – Ali Yar Khan Nov 27 '21 at 15:58
  • I have not faced any issue till now for reading, how much I have worked on RnFetchBlob, they have some issues when it comes to writing(Write Permissions). I have worked on multiple apps where we have used RnFetchBlob and we didn't notice any serious concern as of now. Also similar functionality can be seen in react-native-fs if that is better. – Akshay Shenoy Nov 27 '21 at 16:56
  • and one more thing ... i am not reading from local storage but from api ... – Ali Yar Khan Nov 27 '21 at 17:38
  • Any particular reason why you are looking to convert it into base64, when you get it from api? – Akshay Shenoy Nov 29 '21 at 07:19
  • want to use it with ViewShot for a sticker – Ali Yar Khan Nov 29 '21 at 10:23
  • Is it then possible for the backend to convert it onto base64 and send it to you, because in react-native, I did some research and found out that these 2 were the only running packages that does the job, other packages are either too new, not much downloads, or have some issues. – Akshay Shenoy Nov 30 '21 at 07:35