Decoding Base64 to an Image in ColdFusion

Question

A while back I posted a question regarding decoding a Base64 string into a image to store in my ColdFusion application. Here's the link.

I was getting the string from a Topaz signature pad that had an NAPI browser plugin that created the Base64 string. I would then take that string and use the following code to decode it:

 <cfscript>
        binaryValue = binaryDecode( form.SigImgData, "hex" );
        FileWrite("c:\Inetpub\wwwroot\signatures\#fullfilename#.bmp", "#binaryValue#");
</cfscript>

I would then store it to disk and display it in the browser using the tag.

Well now that Google Chrome has discontinued support for NAPI plugins, I am now creating the Base64 string using JavaScript supplied from the signature pad manufacturer. I can successfully create the Base64 string using the new JS but when I plug the string into my same CFScript code from above, it creates a non-usable image. Basically a corrupted image file.

Here is an example of my Base64 string:

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

I found a site that allows you to past a string into a box and decode it to the original image and it seems to decode it fine.

As per the suggestions, I have tried the following modification:

<cfset image = imageReadBase64("data:image/bmp;base64,form.SigImgData")>
    <cfimage 
    source="#image#"
    destination="c:\Inetpub\wwwroot\signatures\#fullfilename#.bmp" 
    action="write">

But I receive the following error:

Can not decode string "form.SigImgData". The input string is not base64-encoded.

Answer 1

As your binary data doesn't have image headers(Contains Mime type e.g. data:image/png;base64 for png image) so you can simply use imageReadBase64 like this:

<cfset image = imageReadBase64(form.SigImgData)>
<cfimage 
   source="#image#"
   destination="c:\Inetpub\wwwroot\signatures\#fullfilename#.bmp" 
   action="write">

I tried it locally with same code. Is this your image?

Answer 2

With a Base64 string you can use this function to get an image:

ImageReadBase64(yourstring)

Example:

<cfset image = ImageReadBase64(form.SigImgData)>
<cfimage source="#image#" destination="C:\Inetpub\wwwroot\signatures\#fullfilename#.bmp" action="write">