How to decode my json string that should be a image url

Question

I have a json file that contains images url, I guess that's an url, it looks like this: iVBORw0KGgoAAAANSUhEUgAAADYAAAAzCAMAAADrVgtcAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA81BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AAABYFPD3AAAAT3RSTlMADgst6+QksgbqvQq+H9wctOEJFPb6F0IMw05gGEBHXE1ZYUYql6Ag3/AZ9dZ9rQEDtXLepw+v2ggz8+iAPCM+g+zxLDXiMRGPiQIWKy4i7fbkmgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAEuSURBVEjH7dPZUsJAEAXQBkxAQUBQQQfcFXHfd4PiDuj9/7/BQIpMQpZunrlvd2rOVFdXDVFoEkmaIKkZw5xEAXJnK7mzVTotdQOVyQidOWsrIpkzjaGSOVdJnK7+3RzPeRVRNsdxfsVz44rjglS8C1aOm5eqocsXpCrKRalwF63CnK2KESrY2SqXJZI5jhp3POV3XOV1fKW7wgJfua6UlyjHlai8KFIDt7RMVCmKFFF1ZdVZilI1Hqkp5X48BdR5rA6oKZsyGavw2BqwPiobwCaPbQHbo7ID7PLYHtBw2z6aZY46OMSRVo+Bk9N4dXYOXGg9eQlcVePU9Q1we6ef3D8Aj0/PViM0VuvlFWi/eV96N8DIx6d/gq/vdhxq/iQCRu90rd5vaHp/3Y57tw84CG6Xg3b41wAAAABJRU5ErkJggg==

So based on this, how to understand this and get the image it represents? Thanks.

dan · Answer 1 · 2016-11-10T16:54:03.737

That's a Base64 encoded image. You can display it in HTML like this:

body {
  background-color: green
}

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAADYAAAAzCAMAAADrVgtcAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA81BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AAABYFPD3AAAAT3RSTlMADgst6+QksgbqvQq+H9wctOEJFPb6F0IMw05gGEBHXE1ZYUYql6Ag3/AZ9dZ9rQEDtXLepw+v2ggz8+iAPCM+g+zxLDXiMRGPiQIWKy4i7fbkmgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAEuSURBVEjH7dPZUsJAEAXQBkxAQUBQQQfcFXHfd4PiDuj9/7/BQIpMQpZunrlvd2rOVFdXDVFoEkmaIKkZw5xEAXJnK7mzVTotdQOVyQidOWsrIpkzjaGSOVdJnK7+3RzPeRVRNsdxfsVz44rjglS8C1aOm5eqocsXpCrKRalwF63CnK2KESrY2SqXJZI5jhp3POV3XOV1fKW7wgJfua6UlyjHlai8KFIDt7RMVCmKFFF1ZdVZilI1Hqkp5X48BdR5rA6oKZsyGavw2BqwPiobwCaPbQHbo7ID7PLYHtBw2z6aZY46OMSRVo+Bk9N4dXYOXGg9eQlcVePU9Q1we6ef3D8Aj0/PViM0VuvlFWi/eV96N8DIx6d/gq/vdhxq/iQCRu90rd5vaHp/3Y57tw84CG6Xg3b41wAAAABJRU5ErkJggg==" />

Michał Perłakowski · Accepted Answer · 2016-12-05T21:12:58.340

It's a PNG file encoded in Base64. You can use a data URI to display it in a HTML <img> tag:

const imageBase64 = 'iVBORw0KGgoAAAANSUhEUgAAADYAAAAzCAMAAADrVgtcAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA81BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AAABYFPD3AAAAT3RSTlMADgst6+QksgbqvQq+H9wctOEJFPb6F0IMw05gGEBHXE1ZYUYql6Ag3/AZ9dZ9rQEDtXLepw+v2ggz8+iAPCM+g+zxLDXiMRGPiQIWKy4i7fbkmgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAEuSURBVEjH7dPZUsJAEAXQBkxAQUBQQQfcFXHfd4PiDuj9/7/BQIpMQpZunrlvd2rOVFdXDVFoEkmaIKkZw5xEAXJnK7mzVTotdQOVyQidOWsrIpkzjaGSOVdJnK7+3RzPeRVRNsdxfsVz44rjglS8C1aOm5eqocsXpCrKRalwF63CnK2KESrY2SqXJZI5jhp3POV3XOV1fKW7wgJfua6UlyjHlai8KFIDt7RMVCmKFFF1ZdVZilI1Hqkp5X48BdR5rA6oKZsyGavw2BqwPiobwCaPbQHbo7ID7PLYHtBw2z6aZY46OMSRVo+Bk9N4dXYOXGg9eQlcVePU9Q1we6ef3D8Aj0/PViM0VuvlFWi/eV96N8DIx6d/gq/vdhxq/iQCRu90rd5vaHp/3Y57tw84CG6Xg3b41wAAAABJRU5ErkJggg==';
const imageUrl = 'data:image/png;base64,' + imageBase64;
document.querySelector('img').src = imageUrl;

body {
  background: black;
}

<img>

The image is white and has transparent background, so I changed the page background to black to make the image visible.

If you want to just decode the string, you can use the atob() function:

const imageBase64 = 'iVBORw0KGgoAAAANSUhEUgAAADYAAAAzCAMAAADrVgtcAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA81BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AAABYFPD3AAAAT3RSTlMADgst6+QksgbqvQq+H9wctOEJFPb6F0IMw05gGEBHXE1ZYUYql6Ag3/AZ9dZ9rQEDtXLepw+v2ggz8+iAPCM+g+zxLDXiMRGPiQIWKy4i7fbkmgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAEuSURBVEjH7dPZUsJAEAXQBkxAQUBQQQfcFXHfd4PiDuj9/7/BQIpMQpZunrlvd2rOVFdXDVFoEkmaIKkZw5xEAXJnK7mzVTotdQOVyQidOWsrIpkzjaGSOVdJnK7+3RzPeRVRNsdxfsVz44rjglS8C1aOm5eqocsXpCrKRalwF63CnK2KESrY2SqXJZI5jhp3POV3XOV1fKW7wgJfua6UlyjHlai8KFIDt7RMVCmKFFF1ZdVZilI1Hqkp5X48BdR5rA6oKZsyGavw2BqwPiobwCaPbQHbo7ID7PLYHtBw2z6aZY46OMSRVo+Bk9N4dXYOXGg9eQlcVePU9Q1we6ef3D8Aj0/PViM0VuvlFWi/eV96N8DIx6d/gq/vdhxq/iQCRu90rd5vaHp/3Y57tw84CG6Xg3b41wAAAABJRU5ErkJggg==';
document.body.textContent = atob(imageBase64);

score 1 · Answer 3 · answered Nov 10 '16 at 17:02

This is an Base64 image source, if you try to do this in an html page

You will get an image an embedded on html

I've tried on the chrome and get an image 54x51 transparent with a symbol on it.

Also if you try to decode this with Base64 and save in a file with it respect extension, you will get your image file. I've done in ruby like this and i could get the file.

File.open(`pwd`.chomp+"/image.png", "w+") do|f| f.write(Base64.decode64("iVBORw0KGgoAAAANSUhEUgAAADYAAAAzCAMAAADrVgtcAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA81BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AAABYFPD3AAAAT3RSTlMADgst6+QksgbqvQq+H9wctOEJFPb6F0IMw05gGEBHXE1ZYUYql6Ag3/AZ9dZ9rQEDtXLepw+v2ggz8+iAPCM+g+zxLDXiMRGPiQIWKy4i7fbkmgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAEuSURBVEjH7dPZUsJAEAXQBkxAQUBQQQfcFXHfd4PiDuj9/7/BQIpMQpZunrlvd2rOVFdXDVFoEkmaIKkZw5xEAXJnK7mzVTotdQOVyQidOWsrIpkzjaGSOVdJnK7+3RzPeRVRNsdxfsVz44rjglS8C1aOm5eqocsXpCrKRalwF63CnK2KESrY2SqXJZI5jhp3POV3XOV1fKW7wgJfua6UlyjHlai8KFIDt7RMVCmKFFF1ZdVZilI1Hqkp5X48BdR5rA6oKZsyGavw2BqwPiobwCaPbQHbo7ID7PLYHtBw2z6aZY46OMSRVo+Bk9N4dXYOXGg9eQlcVePU9Q1we6ef3D8Aj0/PViM0VuvlFWi/eV96N8DIx6d/gq/vdhxq/iQCRu90rd5vaHp/3Y57tw84CG6Xg3b41wAAAABJRU5ErkJggg==")) end Hope it helps.

score 0 · Answer 4 · answered Nov 10 '16 at 16:47

0

This is not an URL; it is the base64 representation of a PNG image. You could display it like this, assuming you have jQuery and an image with ID myimg in your document:

$("#myimg").attr("src","data:image/png;base64,"+yourData);

answered Nov 10 '16 at 16:47

solendil

8,432
4
28
29

How did you tell it's an png? – Xinrui Ma Nov 10 '16 at 16:49
I just used one of the many base64 decoder online; I saw the header of the file is PNG – solendil Nov 10 '16 at 16:50

score 0 · Answer 5 · edited May 23 '17 at 12:24

0

This is actually a base64 encoded image. You have standard functions to decode it. Check out some examples here.

edited May 23 '17 at 12:24

Community

1
1

answered Nov 10 '16 at 16:47

xyz

3,349
1
23
29

How to decode my json string that should be a image url

5 Answers5