Base64 to PNG with JS

Question

Do you guys know of a method to convert a base64 string to a PNG with javascript. I basically want to display it in a website.

Example string:

"imageData": "iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAC9JREFUOI1jYaAyYKGdgYse/6fIpDhZRlQDqQRGDRw1cNTAUQPpbSC0PKOegVQCADCrA81JwUxoAAAAAElFTkSuQmCC"

You should check this: http://stackoverflow.com/questions/16968945/convert-base64-png-data-to-javascript-file-objects — Vinod Srivastav, Oct 13 '14 at 07:26
hey @VinodSrivastav: i saw the entry before but unfortunately it does not answer my question as it only converts PNGs to file objects. — chaitanya.varanasi, Oct 13 '14 at 15:51
I figured it out. If this question is reopened, then I can answer my question. — chaitanya.varanasi, Oct 16 '14 at 05:48

Vinod Srivastav · Answer 1 · 2021-11-25T22:10:50.273

You can use document.getElementById() to get the element and set the src to look like this:

    <img id="dynImg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
    AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

for example: this creates a small red dot

    document.getElementById("dynImg").src = "data:image/png;base64,iVBORw0K...";

Example:

<img id="dynImg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Harikaran K · Answer 2 · 2014-10-13T07:30:15.667

I'm not you can use AJAX in Javascript library to load image

Use AJAX like below code

$(document).ready(function(e) {
         $("#mydiv").load("myfile.php");
});

Use this script file for library jquery-1.9.1.js

Below code did in php. call this in ajax. For getting in base64 image src.

<?php
$path= 'http://harikarank.com/harikarank/harikarank.png';
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
?>
<img src="<?php echo $base64;?>" />

Then store the base64 image in your folder using server side script. then call saved path in javascript

Base64 to PNG with JS

2 Answers2