Solved

decoding and displaying a Base64 encoded image

Posted on 2002-06-18
2
1,418 Views
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)>

<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
Comment
Question by:sagardeo
  • 2
2 Comments
 
LVL 5

Accepted Solution

by:
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.

Heath
0
 
LVL 5

Expert Comment

by:heathprovost
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.

Heath
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

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…
Meet the world's only “Transparent Cloud™” from Superb Internet Corporation. Now, you can experience firsthand a cloud platform that consistently outperforms Amazon Web Services (AWS), IBM’s Softlayer, and Microsoft’s Azure when it comes to CPU and …
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…

760 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now