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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Turn your laptop into a mobile console!

The CV211 Laptop USB Console Adapter provides a direct Laptop-to-Computer connection for fast and easy remote desktop access with no software to install.

Question has a verified solution.

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

Have you ever sent email via ColdFusion and thought of tracking this mail to capture the exact date and time when the message was opened ?  If yes, then this article is for you ! First we need a table user_email with columns user_id , email , sub…
What You Need to Know when Searching for a Webhost Provider
There are cases when e.g. an IT administrator wants to have full access and view into selected mailboxes on Exchange server, directly from his own email account in Outlook or Outlook Web Access. This proves useful when for example administrator want…
Michael from AdRem Software explains how to view the most utilized and worst performing nodes in your network, by accessing the Top Charts view in NetCrunch network monitor ( Top Charts is a view in which you can set seve…
Suggested Courses

628 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