Someone wrote in asking how they might get the “original image” when all they had was the data URL version of the image. I’m not exactly sure how you get into that situation, but hey, I woke up in a trunk more than once.
You can absolutely get the original back, by exploiting the wonderful powers of the browser.
Here is the data they have:
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLTItMmgyNHYyNEgtMnoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTAgMjBDNC40OCAyMCAwIDE1LjUyIDAgMTBTNC40OCAwIDEwIDBzMTAgNC40OCAxMCAxMC00LjQ4IDEwLTEwIDEwem0xLTE1SDl2MmgyVjV6bTAgNEg5djZoMlY5eiIgZmlsbD0iIzE2ODJGOCIvPjwvc3ZnPgo=Plop that sucker in an <img> tag and open in the browser and you’ll see it render:
Now you can drag it out of the browser into your local file system:
And that file will be the original:
👔
“Save image as” in the context menu works in more browsers . Interestingly, Edge saves the image as PNG for some reason. Is that an #EdgeBug?
You can also paste it into the address bar, and save from there.
Achh that’s what I wanted to mention. I thought I was one those few chosen people to know this stuff.
Yes this is the easiest way, just paste it in the browser’s address bar.
just use your favorite programming language. do a base64 decoding. write the resulting data to a file
Following the programming way of doing it, suggested by Chris. I’ll let here a library that i’ve created for Node.js to easily do these steps of decoding the Data URI (also encoding) and saving it to a file
https://github.com/DiegoZoracKy/image-data-uri
In one of our applications we store a “signature on glass” as a data url in our database, then to display it we do exactly what Chris is suggesting here, stick it in an tag.
Thanks, nice to know.
By the way, when you woke in the trunk many times, I hope you had the key?
I am kinda thinking that after many times, without a key, maybe the dog let you out. I know the wife won’t (past experience).
You could also do:
That helped me SO MUCH! But, theres a way to convert a data url to a common url image link? Where can I learn/understand more from data urls???
i suppose you can’t, since the data isn’t a link a to a resource, but the image’s actual information, only encoded for saving bandwidth.
This Stackoverflow has some good explanations on where and why use it and where and why not.
http://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice
Very useful. I knew you could view it in a browser, didn’t know it saved back to SVG!