5

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.

7 Answers 7

5

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()))
2
  • Wow! This deserves more upvotes Jul 25, 2017 at 8:22
  • Correct ans. Such a sweet solution. Dec 27, 2018 at 20:13
4

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!')
2

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.

2

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.

1

When you save a web page from a web-browser it should save the images too. In IE you choose save as web page, complete. The images will be in a subfolder and will be in jpg or png format - the browser deals with any encoding used for the HTTP data transfer.

2
  • 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.
    – larryq
    Mar 28, 2011 at 21:09
  • 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. Mar 29, 2011 at 10:35
1

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.

1
  • 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
    Mar 28, 2011 at 21:00
0

It's funny because you totally gave me the answer, let me share what I mean. I had the 'data:image/gif;base64," followed by some crazy base64 string. I wanted to convert the image back to JPEG but I didn't know how either and I really just wanted to do it quickly without using a script, python, etc (though that's a fine way to go in many cases). I just had one image I needed to convert right now.

As soon as you showed me the tag "img src=", I instantly understood that the browser already understands the base64 code. I just open a text document, added the tag <img src="data:image/gif;base64,..."> saved it as an *.html extension and opened it up in the browser (any of them work), right clicked on the image and saved. Voila insta-image from base64.

Thanks!!

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .