Decoding base64 images and saving to a file

Question

I need to save a few base64 images from a web page to actual GIF and JPEG files on my hard drive. Is there a utility out there that can assist me? I've looked around and either I'm not seeing one or haven't figured out how to use one properly.

In other words I'm looking to take the image embedded in this link on a page:

<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="info" id="ext-gen1128">

..and save it to a file on my box. Thanks for your help.

Solution 1

To save data url to a temporary file, you could use urlretrieve() in Python 3.4:

#!/usr/bin/env python3
from mimetypes import guess_extension
from urllib.request import urlretrieve

# example image from http://tools.ietf.org/html/rfc2397
url = """data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw
   AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
   ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
   a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
   ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
   F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH
   hhx4dbgYKAAA7"""
filename, m = urlretrieve(url)
print(filename, guess_extension(m.get_content_type()))

Solution 2

I wrote this to go the other way (img to base64) for image URIs. I'm sure you could reverse this for what you need.

#!/usr/bin/env python
import sys
import os
import base64

if(__name__ == '__main__'):
    arglen = len(sys.argv)
    if arglen > 1:
        imgfile = open(sys.argv[1], 'rb').read()
        b64img = base64.b64encode(imgfile)
        file_name = os.path.splitext(sys.argv[1])
        fname = file_name[0]
        fext = file_name[1]

        b64imgfile = open(fname + fext + '.txt', 'w')
        for line in b64img:
            b64imgfile.write(line)
        print fname
        print fext
        print('done')
    else:
        print('No img file specified!')

Update

*Here is some code that will reverse the above. The only caveat is that you need to know if it was png, jpg, etc. That should be in the data URI's of the images within the HTML page your pulling them from "img src='data:image/png;base64...". (I'm assuming png below)*

#!/usr/bin/env python
import sys
import os
import base64

if(__name__ == '__main__'):
    arglen = len(sys.argv)
    if arglen > 1:
        b64file = open(sys.argv[1], 'rb').read()
        imgData = base64.b64decode(b64file)
        file_name = os.path.splitext(sys.argv[1])
        fname = file_name[0]
        fext = '.png'

        imgFile = open(fname + fext, 'wb')
        imgFile.write(imgData)
        print('done')
    else:
        print('No file specified!')

Solution 3

I went to the page you point to, with Chrome. Right-click on an image, Inspect an element... We go to an <img> tag with a Base64-encoded Gif image, but that's actually a simple 1x1 placeholder.
So we can go to the Resources tab of the Inspector (next to the Elements one), and we can see the images of interest, in Base64-encoded PNG.
Click on the data:image on the left, you get details on the resource, including a preview. You can right-click on the preview and save the image...

As advised, beware of copyright issues with these images...

Note: I tried another way: you can copy the URL of the resources, and paste them in a simple HTML file with <img src="<base64-encoded data>"> tags. View the HTML file in a good browser, and you can save the images by right-clicking on them.

Solution 4

If you use Total Commander, it will decode base64/UUE provided that you save the data to a file with a .b64 or .uue extension. Winzip and WinRar will do it too.

Solution 5

There's a number of tools out there that can help you decode base64. How best to download something like that largely depends on how you're getting to it.

Not much of web-traffic is base64 encoded... largely because it's not very efficient, and it's not at all secure. (base64 is not encryption... it just obscures the data to make it not-human readable) If you can get the raw stream data to a text-file or some such... there's several ways to re-assemble it. Additionally, the data will not contain information about the file... i.e. file-name, size, type, etc... it'l be a stream of data... and it's up to you to determine what it is.

Any chance we can peek at where the data is coming from? ...it would really help to give you a more appropriate answer.

View more solutions

Comments

[larryq]

Sure, the page I'm looking at is at dev.sencha.com/deploy/touch/examples/kitchensink (Chrome browser only I'm afraid, doesn't work in IE or FireFox) If you go to the examples on the left, look for "User Interface", then "Bottom Tabs" The icons at the bottom of the page are in base64 format, embedded in <img> tags. I'd love to get at them and save them to gif files.

[larryq]

I've tried that, and it's a great idea. But the "images" are defined in a css file as base64 strings, and saving the page saves the css file, not the actual images. (See the URL I pasted in the comment below to follow what I'm dealing with and what I'm trying to save.) I may wind up doing a screen capture and saving them that way, but it'd be nice not to.

[user5249203]

It looks like the site goes to some lengths to dissuade people from copying the images. I'd look elsewhere for where the copyright owner has made similar images available under a creative commons licence.

[Cesar Canassa]

Wow! This deserves more upvotes

[Bhumi Singhal]

Correct ans. Such a sweet solution.