decoding and displaying a Base64 encoded image

Posted on 2002-06-18
Last Modified: 2013-12-24
okay i have a base64 encoded .gif image represented as a string (i.e "R0lGODdhCAcgA+cAAAAAAAEBAQICAgMDAwQEBAUFBQYGBgcHBw...........")

what i want to do is decode this base64 encoded .gif image and display it in the browser.

this is what i am trying:
(where 'graphicimage' is the string listed above)

<cfset binaryData = toBinary(graphicimage)>


Cold Fusion documentation mentions the following:

"If you receive data in Base 64, you can re-create the actual binary object that it represents, such as a .gif, .jpeg, or executable file, by using the ToBinary function."

so why doesn't this work?

Question by:sagardeo
  • 2

Accepted Solution

heathprovost earned 500 total points
ID: 7091619
Because you cant send an image to the browser like that... To explain why, here is a little background on what is going on between the browser and the server.

An image, just like a web page, is considered an independant resource. When you put a url into your browser, that url points at a specific resource, and a determination of its mime-type is made.

A webpage is of type "text/html" and therefore cannot directly contain binary data, it can only contain text. In order to include other kinds of data you generally use a tag that contains a url that "points" to it, which causes the browser to retrieve _that_ resource. You cant "mix" resource types together, that is against the rules.

In the case of a resource being an image, you (usually) use the <IMG> tag to retrieve it. When the browser processes an html document and comes across an image tag, it goes and gets the image pointed to by the src attribute and displays it accordingly. The point here is that the image is NOT a part of the document containing it, it is a totally independant resource and the browser fetches it independantly of the document.

So in order to accomplish what you are setting out to do, you need to do the following:

1. once you have the base64 data for the gif, use <CFFILE> to write it out to disk. The data MUST be written to disk. CF has no mechansim to output binary data from memory. That said there are some CFX tags that can do stuff like this (at least for images stored in a database), check on the Developer's Exchange on Allaire's site.

2. Once on disk it can be displayed just like any other image (because it can then be addressed by a url). All you need to do is output and image tag pointing to the correct file.


Expert Comment

ID: 7091634
btw, if this is all involved with a database application that stores images, you should approach this problem in a different manner if at all possible. Unless you absolutely NEED to store the binary image data in the database, it is almost always simpler, easier, cleaner, etc. to just store the file to disk and only stored the _name_ of the image in the database... The reasons are as follows:

1. Pulling binary data through cfquery is impossible, so you must base64 encode everything.

2. base64 encoding greatly increases the size of the data.

3. Being images are already pretty big things by database standards, base64 encoding them makes them that much bigger.

4. Pulling large amounts of data through querys is ineffecient.

5. Since you must write the data to disk anyway in order to output it (for images at least) it is far simpler to just write it to disk in the first place and just store the url to point to it.


Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Periodically we have to update or add SSL certificates for customers. Depending upon your hosting plan you may be responsible for the installation and/or key generation. In the wake of Heartbleed many sites were forced to re-key. We will concen…
Introduction This article explores the design of a cache system that can improve the performance of a web site or web application.  The assumption is that the web site has many more “read” operations than “write” operations (this is commonly the ca…
Along with being a a promotional video for my three-day Annielytics Dashboard Seminor, this Micro Tutorial is an intro to Google Analytics API data.
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…

786 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