How to convert Base64 to image

Question

0.00/5 (No votes)

See more:

Hi,
I am trying to display image from database. I have converted the database image into base 64 format. I am using javascript for the conversion. But its not an image format. My code is as follows:
var che = btoa(data.d.ItemImage1);
$('#imgUpload').attr('src', "data:image/png;base64," + che);
On alerting this, the format will be as follows, but it cannot show an image.
MTAwLDk3LDExNiw5Nyw1OCwxMDUsMTA5LDk3LDEwMywxMDEsNDcsMTA2LDExMiwxMDEsMTAzLDU5LDk4LDk3LDExNSwxMDEsNTQsNTIsNDQsNDcsNTcsMTA2LDQ3LDUyLDY1LDY1LDgxLDgzLDEwNyw5MCw3NCw4MiwxMDMsNjUsNjYsNjUsMTAzLDY5LDY1LDg5LDY1LDY2LDEwMyw2NSw2NSw2OCw0Nyw1NSwxMDMsNjUsNzksODEsODcsODIsMTE4LDg5LDEwOSw4NSw2NSw5MCw2NSw2NSw2NSw2NSw2NSw2NSw2Niw0Nyw0Myw2OSw4Myw2Nyw2OSw4Niw1Miw5Nyw4Nyw4OSw2NSw2NSw2OSw0OSw3OCw2NSw2NywxMTEsNjUsNjUsNjUsNjUsNzMsNjUsNjUsOTksNjYsNzcsMTAzLDY1LDY3LDY1LDY1LDY1LDY1LDcwLDY1LDY1LDY1LDY1LDcxLDczLDY2LDc5LDExOSw2NSw2Nyw2NSw2NSw2NSw2NSw2NiwxMTksNjUsNjUsNjUsNzIsOTAsNzIsODIsMTAzLDY1LDY4LDY1LDY1LDY1LDY1LDY1LDgxLDY1LDY5LDY1LDY1LDY2LDcyLDgzLDgxLDY1LDY4LDY1LDY1LDY1LDY1LDY1LDgxLDY1LDQ3LDY1LDY1LDY3LDk5LDExMCw4MSw2NSw2Niw2NSw2NSw2NSw2NSw2OCwxMDMsNjUsNjUsNjUsNjUsNjgsMTEzLDcyLDY1LDY1LDcyLDY1LDY1LDY1LDcyLDk4LDEwMyw2NSw2NSw2NSw2NSw2Nyw3Miw5Nyw4MSw2NSw2OSw2NSw2NSw2NSw2NSw2NSw4MSw2NSw2NSw2NSw3Miw0OCw2NSw2NSw2NSw2OCwxMTAsNzcsMTA2LDY1LDExOSw3OSw4NCwxMTEsMTE5LDc3LDEyMiwxMTEsMTIwLDc3LDEwNSw2NSwxMjAsNzcsMTIyLDExMSw0OCw3OSw2OCwxMTEsMTIyLDc4LDgxLDY2LDY4LDk4LDUxLDc0LDEwNSw5Nyw4OCw3Nw==

Posted 9-Sep-14 20:16pm

My Doubt

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sinisa Hajnal · Answer 1 · 2014-09-09T20:25:00

Solution 1

atob and btoa were mozzila specific and IE still doesn't properly support it (as of IE 10, not sure about 11) - but since you get correct (and even padded) string, I don't know what else could be.

Try matching '' and "" you have both in your attr function. Use either double or single quotes, not both.

Check this :
Stackoverflow server solution[^]

Posted 9-Sep-14 20:25pm

Sinisa Hajnal

Comments

My Doubt 10-Sep-14 2:35am

No its just a convertion but I could not get image after the conversion. Image format will be like this:
For Example:
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

Sinisa Hajnal 10-Sep-14 2:56am

Did you try it on firefox, chrome and IE? I don't see anything wrong with your code per se. In the solution I mentioned things I would check.

Also, create an empty page with src element with your base64 string and see that it shows if no javascript is involved.

My Doubt 10-Sep-14 3:17am

I have tested with google chrome and firefox but the problem still there..

My Doubt 10-Sep-14 3:24am

there will be having / and + in the image format but in my conversion I could not get any symbols like that..

Sinisa Hajnal 10-Sep-14 3:47am

Use some online converter and see if it matches your conversion...Did you try empty page with static string?

My Doubt 10-Sep-14 5:28am

I have tried online converter and found my converted string doesn't works..

How to convert Base64 to image

1 solution

Solution 1

Add your solution here

Preview 0

How to convert Base64 to image

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us