Handle base64 encoded images in ColdFusion

In my previous post, I wrote about an excellent Croppy library. It provides the image cropping – client-side, with the defined aspect ratio. I decided to send the results of the image crop operation as the base64 encoded image in one of the form fields. This means that ColdFusion is receiving a string instead of the actual image.

The steps to save such an image are really easy. You simply have to read the contents of the field into the built-in image object and save it to the drive:

<cfset pictureImg = imageReadBase64(form.picturebase)>
<cfimage 
    source="#pictureImg#"
    destination="#pathOnTheDrive#\picture.png" 
    action="write">

Of course, the cfimage tag is much more powerful. It provides an ability to resize images, change its format, rotate, so on and so forth. One of the powerful options is to retrieve the image information.

You might ask why I’m using base64 encoded image instead of the regular file. There are few reasons – the most important is that it was the easiest way to obtain a small cropped image directly from the browser. The second is that base64 encoded image can be easily used in other languages, can be transferred using a simple post (contains only letters and numbers) and can even be saved easily in the text field in the database if needed.