0

I have API url, that send me in response an image. When i try to console.log my response i see something like that:

Response with image in console

Please tell me what is the best way to display that raw-data in my page? What format of raw-data is it? I can not even google it, because I really don`t know what format is it. 

const img = document.createElement('img');
document.body.appendChild(img);

const src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png';

fetch(src)
  .then(resp => resp.blob())
  .then(blob => URL.createObjectURL(blob))
  .then(uri => (img.src = uri));
<!-- Polyfill for older browsers -->
<script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script>
Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
EuGorDD
  • 11
  • 1
  • 1
  • 2
    it's just the binary image data displayed as text, I'd imagine. Same as you'd get if you tried to open the file in Notepad or something. Why did you expect to be able to view an image in a text-based console? – ADyson Mar 27 '18 at 15:49
  • thx for clarification. but he might have trouble receiving binary data without encoding it (for example in base64), as some chars turns out to be invalid for requests. just saying – Kaddath Mar 27 '18 at 15:51
  • @Kaddath there seems to be no trouble receiving it, only a misunderstanding about the context in which the data might be displayed or used – ADyson Mar 27 '18 at 15:54
  • Do you want to display the byte values (in hexadecimal) that represent each pixel; in a two-dimensional array? – Mr. Polywhirl Mar 27 '18 at 15:56
  • I do not try to view my image in console. I just get image in raw and want to understand how can i work with that image. – EuGorDD Mar 27 '18 at 15:58
  • Just talking from my experience, i also used the word "might" for a reason. – Kaddath Mar 27 '18 at 15:59
  • @Mr.Polywhirl i tried to convert it to base64. But I am not sure, is it hex-data or something else. I think, converting it to base64 will solve my problem. – EuGorDD Mar 27 '18 at 16:01
  • "want to understand how can i work with that image". Well what do you actually want to do with it, really? Did you download it via an ajax request? There's not much you can do with it in that context. If you want to display the image in your page, create an img tag and set the src to the URL of your API where you download the image. – ADyson Mar 27 '18 at 16:02
  • @ADyson I get it by request with parameters – EuGorDD Mar 27 '18 at 16:04
  • If you want to DISPLAY the image, don't print the image data to the console. Wrap the returned request in a `Content-type` of `image/png`. Lookup "HTML page headers". – Mr. Polywhirl Mar 27 '18 at 16:05
  • Does this help? https://jsbin.com/kadopelanu/edit?js,output – Vivek Mar 27 '18 at 16:05
  • That JS Bin example works... I am including it in your post. – Mr. Polywhirl Mar 27 '18 at 16:06
  • @Vivek yep, I think i can use it, thanks – EuGorDD Mar 27 '18 at 16:14
  • Possible duplicate of [How to display binary data as image - extjs 4](https://stackoverflow.com/questions/14915058/how-to-display-binary-data-as-image-extjs-4) – Matthew Schlachter Jun 26 '18 at 14:33

1 Answers1

1

I would recommend looking at this question.

The basic premise would be to base64 encode using btoa and then add it to the page, like so:

var img = document.createElement('img');
img.src = 'data:image/png;base64,' + btoa('your-binary-data');
document.body.appendChild(img);
Matthew Schlachter
  • 3,250
  • 1
  • 12
  • 26