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.

Michał Perłakowski · Accepted Answer · 2016-12-05 21:12:58Z

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);

dan · Accepted Answer · 2016-11-10 16:54:03Z

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==" />

Shirow · Accepted Answer · 2016-11-10 17:02:01Z

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.

solendil · Accepted Answer · 2016-11-10 16:47:12Z

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, 2016 at 16:47

solendil

8,4684 gold badges30 silver badges29 bronze badges

2 Comments

Xinrui Ma Over a year ago

How did you tell it's an png?

solendil Over a year ago

I just used one of the many base64 decoder online; I saw the header of the file is PNG

Community · Accepted Answer · 2017-05-23 12:24:29Z

0

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

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Nov 10, 2016 at 16:47

xyz

3,4191 gold badge26 silver badges29 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related