Create a html image from json image data

Question

I get from the server an image as json format:

image=iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAIAA

for the google marker I have to assign an image this way:

  var myImage = "../Content/image.jpeg";

            var markerOptions = {
                position: bound,
                map: map,
                icon: myImage 
            };

How can I convert the json image data into an image google maps accepts?

I have tried this:

 var image = document.createElement('img');
 image.src = "data:image/png;base64" + base64JsonData;

but this result in an error on runtime.

This is the full json which I did not paste here before because of flood preventing...:

image=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

I'm looking into it at the moment but I can't even get the data URI to work for a normal image. As for setting it as a Google Marker, it may just take the Data URI directly if it takes the Path the same way. Would need to double check with the specs. — Turnerj
– Turnerj, Commented Jun 5, 2013 at 10:15
you are missing a comma en.wikipedia.org/wiki/Data_URI_scheme src="data:image/png;base64," — Eduard Gamonal
– Eduard Gamonal, Commented Jun 5, 2013 at 10:17
now I do not get an error anymore with the "comma" added but still the image is not visible on the map. — HelloWorld
– HelloWorld, Commented Jun 5, 2013 at 10:27

Rinku · Accepted Answer · 2013-06-05 10:18:42Z

13

var image = document.createElement('img');
image.src = "data:image/png;base64," + base64JsonData;

For further reading see this link

answered Jun 5, 2013 at 10:18

Rinku

1,0786 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eddie Taliaferro II Over a year ago

Almost exactly 10 years later, and you helped me finally understand binary to blog on Angular 14, etc. Thank you!

Collectives™ on Stack Overflow

Create a html image from json image data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related