{"id":244383,"date":"2016-08-11T12:57:34","date_gmt":"2016-08-11T19:57:34","guid":{"rendered":"http:\/\/css-tricks.com\/?p=244383"},"modified":"2016-08-12T06:40:26","modified_gmt":"2016-08-12T13:40:26","slug":"get-original-image-data-url","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/get-original-image-data-url\/","title":{"rendered":"Get the Original Image from a Data URL"},"content":{"rendered":"

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.<\/p>\n

You can absolutely get the original back, by exploiting the wonderful powers of the browser.<\/p>\n

<\/p>\n

Here is the data they have:<\/p>\n

data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLTItMmgyNHYyNEgtMnoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTAgMjBDNC40OCAyMCAwIDE1LjUyIDAgMTBTNC40OCAwIDEwIDBzMTAgNC40OCAxMCAxMC00LjQ4IDEwLTEwIDEwem0xLTE1SDl2MmgyVjV6bTAgNEg5djZoMlY5eiIgZmlsbD0iIzE2ODJGOCIvPjwvc3ZnPgo=<\/code><\/pre>\n
Plop that sucker in an <img><\/code> tag and open in the browser and you’ll see it render:<\/p>\n
\"\"<\/figure>\n
Now you can drag it out of the browser into your local file system:<\/p>\n
\"\"<\/figure>\n
And that file will be the original:<\/p>\n
\"\"<\/figure>\n
👔<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":248915,"url":"https:\/\/css-tricks.com\/google-analytics-can-show-screen-resolution-%e2%89%a0-browser-window\/","url_meta":{"origin":244383,"position":0},"title":"Google Analytics Can Show You Screen Resolution \u2260 Browser Window","date":"December 13, 2016","format":false,"excerpt":"It was five years ago when I wrote Screen Resolution \u2260 Browser Window. The idea was that, at the time, there was a lot of talk about monitor size in relation to how we design websites. JavaScript is happy to tell the dimensions of a monitor: screen.width. But how useful\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":159225,"url":"https:\/\/css-tricks.com\/dom\/","url_meta":{"origin":244383,"position":1},"title":"What is the DOM?","date":"December 29, 2013","format":false,"excerpt":"A reader recently wrote in asking me what the DOM was. They said they've heard it mentioned and alluded to, but aren't sure they really understand it. We can fix that. But the HTML you write is parsed by the browser and turned into the DOM. View Source just shows\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":9290,"url":"https:\/\/css-tricks.com\/border-radius-on-images\/","url_meta":{"origin":244383,"position":2},"title":"Border Radius on Images","date":"May 5, 2011","format":false,"excerpt":"If you ever tried to use border-radius on 's, you know that it doesn't always work (even if the browser supports that CSS3 property, like Firefox 3 and Opera 11). The root of it is that the image is content, not a container, and the container is what gets rounded\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":257120,"url":"https:\/\/css-tricks.com\/browser-statistics-matter\/","url_meta":{"origin":244383,"position":3},"title":"The Browser Statistics That Matter","date":"July 27, 2017","format":false,"excerpt":"Have you ever had a web development related conversation discussion where someone brought up global browser usage statistics? I might be a little weird, but I\u2019d say I at least overhear a conversation like just about every day: I\u2019d love to use FANCY NEW FEATURE, but it\u2019s not supported SOME\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/07\/1080x0180.jpg?fit=1080%2C1080&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":9778,"url":"https:\/\/css-tricks.com\/screen-resolution-notequalto-browser-window\/","url_meta":{"origin":244383,"position":4},"title":"Screen Resolution \u2260 Browser Window","date":"June 17, 2011","format":false,"excerpt":"The only statistic you get in most web analytics software is screen resolution. But there is a pretty good chance you just read this sentence in a browser that isn't open to the full size of your monitor. If you are looking at size analytics for you website, browser size\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/xnoty.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":22244,"url":"https:\/\/css-tricks.com\/swapping-out-text-five-different-ways\/","url_meta":{"origin":244383,"position":5},"title":"Swapping Out Text, Five Different Ways","date":"July 2, 2013","format":false,"excerpt":"It's a common need in web apps: you click something and the text of the thing you just clicked changes. Perhaps something simple like a \"Show\" button that swaps to \"Hide\", or \"Expand Description\" to \"Collapse Description.\" This is a fairly simple thing to do, but there are various considerations\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244383"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=244383"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244383\/revisions"}],"predecessor-version":[{"id":244399,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244383\/revisions\/244399"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=244383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=244383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=244383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}