• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1447
  • Last Modified:

decoding and displaying a Base64 encoded image

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)>

<cfoutput>#binaryData#</cfoutput>
********************************************

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?



0
Judy Deo
Asked:
Judy Deo
  • 2
1 Solution
 
heathprovostCommented:
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.

Heath
0
 
heathprovostCommented:
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.

Heath
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now