Convert binary / unicode string to image

Question

I am using a library to recieve attachments (image) from salesforce using OAuth and a proxy. Without the library (and the proxy) I am able to the same using XHR, but I have to use the library because I need the proxy.

In chrome debugger I can see image is downloaded fine, but I can't get it to work in my code. Data looks like:

So far methods I have tried:

btoa(unescape(encodeURIComponent(file.body)));- produces a base64 that does not work. decoding it using online tools gives me back the same string.
escape(file.body) - using this as base64 also does not work.
Converting to a blob. var blob = new Blob([file.body], {type : "image/png"}); urlCreator.createObjectURL(blob); The url it points to displays nothing, and if I remove {type : "image/png"} the url points to a page displaying same binary string.

Can you give an example of such a binary so we can try to replicate it? — CertainPerformance
– CertainPerformance, Commented Apr 20, 2018 at 6:35
here it is: raw.githubusercontent.com/Varun-garg/CordovaPractice/master/… — Varun Garg
– Varun Garg, Commented Apr 20, 2018 at 6:51
and the respnse I get from chrome developer tools is: gist.githubusercontent.com/Varun-garg/… . It decodes fine online. — Varun Garg
– Varun Garg, Commented Apr 20, 2018 at 6:54
typeof just shows object for file and string for file.body — Varun Garg
– Varun Garg, Commented Apr 20, 2018 at 7:14

Bobakka · Accepted Answer · 2019-11-08 03:49:13Z

1

Long story short this looks like someone read the image with readAsText() which mangles ("interprets") binary into utf8, instead of utf16. You need to get the server to return the data in arraybuffer or blob format ideally, or even base64, these preserve binary.

Long version with snippet. (those question marks symbols in the snippet show the lost information, compare it to the binary where they are not question marks in utf16): https://stackoverflow.com/a/56523118/2962797

edited Nov 8, 2019 at 3:49

answered Nov 8, 2019 at 3:42

Bobakka

463 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

amedina · Accepted Answer · 2018-04-20 07:15:13Z

0

I would create an <img /> element, equal its src attribute to the image data you received. Now you have the image.

If you want to extract it or convert it to PNG, I would apply this another answer process.

answered Apr 20, 2018 at 7:15

amedina

3,7364 gold badges30 silver badges45 bronze badges

5 Comments

Varun Garg Over a year ago

You mean directly setting binary string as src? that did not work, and gave GET http://localhost:8000/%EF%BF%BDPNG%1A%EF%BF%BD%EF%BF%BD ....net::ERR_CONNECTION_REFUSED

amedina Over a year ago

@VarunGarg I tried to do it and it worked. And you provided me with the string.

Varun Garg Over a year ago

That string is what I see in chrome dev tools, not the one I got from the library (please see the sreenshot.).

amedina Over a year ago

@VarunGarg Ok, I understand. But that image is JPEG, and when you tried to decode it in the third method you used, you tried to decode a PNG one.

Varun Garg Over a year ago

It is actually a png, the content type returned here is wrong (jpeg), but that is just for this case only. In other cases it is correct, such as image/png .

Collectives™ on Stack Overflow

Convert binary / unicode string to image

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related