Solved

data:image/png;base64 - decoding the HTML

Posted on 2014-07-28
1
1,072 Views
Last Modified: 2014-07-29
Hi
I have seen some code which really puzzles me, it is:

<image id="OpenLayers_Geometry_Point_6367" cx="312.4132960588904" cy="218.4827694234491" r="1" preserveAspectRatio="none" x="312" y="206" width="125" height="50" xlink:href="data:image/png;base64,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" style="opacity: 1" fill="#000000" fill-opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></image>

Open in new window



I'm looking at doing something similar myself
However, I would like to know how its done on this site first
Is there a way to decode the Data Image link?

Its shows this popup bubble image:
testtest3333Depending on the length of the driver name, the bubble changes in size
the text is not text in the HTML, its all part of the image, so its obviously created server side, but i just wanted to try and figure out a bit more on how to do it and was hoping decoding html might help
0
Comment
Question by:websss
1 Comment
 
LVL 74

Accepted Solution

by:
käµfm³d   👽 earned 500 total points
ID: 40226008
Is there a way to decode the Data Image link?
Yes. These are known as data URIs. They are most-often encoded, as is the case with this one, in base 64 encoding. So all you need to do is decode the base 64 string. However, the result you end up with will be binary data, so you would want to write it out to disk in order to actually view it. In this example, your image data is:

Decoded Image
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now