Convert Topaz Signature String (Hexadecimal) to Image

Question

I am trying to integrate a topaz signature pad into my ColdFusion application. I would like to capture the signature from the pad, convert it to format that ColdFusion can show in the browser and save to the disk.

Using their documentation, I am able to retrieve the captured signature in a Hexadecimal format (I think). I am following the documentation found on their site here: Basic Javascript Demo

I have then tries to convert that Hexadecimal to Base64 so that I can write the image to the browser and the disk of the ColdFusion server. However ColdFusion doesn't seem to like my format and throw an error.

Can anybody help me with this??

Here is the code that converts the Hexadecimal string and also tries to make an image out of it.

<cfoutput>

Form Data: #form.sigImageData#<br />

<cfscript>
binaryValue = binaryDecode( form.sigImageData, "hex" );
    base64Value = binaryEncode( binaryValue, "base64" );
</cfscript>

Converted Data: #base64Value#<br />

<center>
<cfimage
action="write"
destination="c:\V:\Inetpub\wwwroot\signatures\test.png"
source="#base64Value#"
/>
</center>

</cfoutput>

Javascript Provided By Manufacturer:

<script type="text/javascript">
var Index;

function pluginLoaded()
    {
    //alert("Plugin loaded!");
    }

function onClear()
    {
    document.getElementById('sigplus').clearSignature();
    }

function onSign()
    {
    document.getElementById('sigplus').tabletState = 1;
    document.getElementById('sigplus').captureMode = 1;
    Index = setInterval(Refresh, 50);

            document.getElementById('sigplus').antiAliasSpotSize = .85;
            document.getElementById('sigplus').antiAliasLineScale = .55;
    }


function onDone()
    {
            if(document.getElementById('sigplus').totalPoints==0)
               {
               alert("Please sign before continuing");
               return false;
               }
            else
               {
       document.getElementById('sigplus').tabletState = 0;
               clearInterval(Index);

               //RETURN TOPAZ-FORMAT SIGSTRING
               document.getElementById('sigplus').compressionMode=1;
               document.SigForm.bioSigData.value=document.getElementById('sigplus').sigString;
               document.SigForm.sigStringData.value+=document.getElementById('sigplus').sigString;

               //this returns the signature in Topaz's own format, with biometric information


               //RETURN BMP BYTE ARRAY CONVERTED TO HEXADECIMAL STRING
               document.getElementById('sigplus').imageXSize = 500;
               document.getElementById('sigplus').imageYSize = 100;
               document.getElementById('sigplus').penWidth = 5;
               //SigPlus1.JustifyMode = 5;
               var bmpString = '';
               document.getElementById('sigplus').bitmapBufferWrite(5);
               var bmpSize = document.getElementById('sigplus').bitmapBufferSize();
               for(var a = 0; a < bmpSize; a++)
               {
                 var byte =    document.getElementById('sigplus').bitmapBufferByte(a).toString(16);
                 if(byte.length === 1)
                 {
                    bmpString += '0';
                 }
                 bmpString += byte;
               }
               document.SigForm.sigImageData.value+=bmpString;
               document.SigForm.sigImgData.value=bmpString;
               //this example returns a bitmap image converted to a hexadecimal string
               //convert the string back to a byte array on the server for final imaging


               document.SigForm.submit(); //SUBMIT THE FORM HERE
               }

    }

function Refresh()
    {
    document.getElementById('sigplus').refreshEvent();
    }


</script>

Here is My ColdFusion Error Output:

The web site you are accessing has experienced an unexpected error. Please contact the website administrator. 

The following information is meant for the website developer for debugging purposes. Error Occurred While Processing Request An exception occurred while trying to read the image.

''   The error occurred in C:\Inetpub\wwwroot\serviceticket\sigpad\action.cfm: line 29
    27 : action="writeToBrowser" 
    28 : source="#binaryValue#"
    29 : isBase64="no">
    30 : 
    31 : </cfoutput> Resources: Check the ColdFusion documentation to verify that you are using the correct syntax. Search the Knowledge Base to find a solution to your problem. Browser   Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.102 Safari/537.36 Remote Address    192.168.10.103 Referrer     https://jaydien.ezservicetrax.com/serviceticket/sigpad/index.cfm Date/Time      11-Mar-14 03:37 PM Stack Trace at cfaction2ecfm1686568327.runPage(C:\Inetpub\wwwroot\serviceticket\sigpad\action.cfm:29) 

coldfusion.image.ImageReader$ImageReadingException: An exception occurred while trying to read the image.   at coldfusion.image.ImageReader.readImage(ImageReader.java:133)     at coldfusion.image.Image.<init>(Image.java:132)    at coldfusion.tagext.io.ImageTag.doStartTag(ImageTag.java:401)  at coldfusion.runtime.CfJspPage._emptyTcfTag(CfJspPage.java:2661)   at cfaction2ecfm1686568327.runPage(C:\Inetpub\wwwroot\serviceticket\sigpad\action.cfm:29)   at coldfusion.runtime.CfJspPage.invoke(CfJspPage.java:196)  at coldfusion.tagext.lang.IncludeTag.doStartTag(IncludeTag.java:483)    at coldfusion.filter.CfincludeFilter.invoke(CfincludeFilter.java:65)    at coldfusion.filter.ApplicationFilter.invoke(ApplicationFilter.java:288)   at coldfusion.filter.RequestMonitorFilter.invoke(RequestMonitorFilter.java:48)  at coldfusion.filter.MonitoringFilter.invoke(MonitoringFilter.java:40)  at coldfusion.filter.PathFilter.invoke(PathFilter.java:86)  at coldfusion.filter.ExceptionFilter.invoke(ExceptionFilter.java:70)    at coldfusion.filter.ClientScopePersistenceFilter.invoke(ClientScopePersistenceFilter.java:28)  at coldfusion.filter.BrowserFilter.invoke(BrowserFilter.java:38)    at coldfusion.filter.NoCacheFilter.invoke(NoCacheFilter.java:46)    at coldfusion.filter.GlobalsFilter.invoke(GlobalsFilter.java:38)    at coldfusion.filter.DatasourceFilter.invoke(DatasourceFilter.java:22)  at coldfusion.filter.RequestThrottleFilter.invoke(RequestThrottleFilter.java:126)   at coldfusion.CfmServlet.service(CfmServlet.java:198)   at coldfusion.bootstrap.BootstrapServlet.service(BootstrapServlet.java:89)  at jrun.servlet.FilterChain.doFilter(FilterChain.java:86)   at coldfusion.monitor.event.MonitoringServletFilter.doFilter(MonitoringServletFilter.java:42)   at coldfusion.bootstrap.BootstrapFilter.doFilter(BootstrapFilter.java:46)   at jrun.servlet.FilterChain.doFilter(FilterChain.java:94)   at jrun.servlet.FilterChain.service(FilterChain.java:101)   at jrun.servlet.ServletInvoker.invoke(ServletInvoker.java:106)  at jrun.servlet.JRunInvokerChain.invokeNext(JRunInvokerChain.java:42)   at jrun.servlet.JRunRequestDispatcher.invoke(JRunRequestDispatcher.java:286)    at jrun.servlet.ServletEngineService.dispatch(ServletEngineService.java:543)    at jrun.servlet.jrpp.JRunProxyService.invokeRunnable(JRunProxyService.java:203)     at jrunx.scheduler.ThreadPool$DownstreamMetrics.invokeRunnable(ThreadPool.java:320)     at jrunx.scheduler.ThreadPool$ThreadThrottle.invokeRunnable(ThreadPool.java:428)    at jrunx.scheduler.ThreadPool$UpstreamMetrics.invokeRunnable(ThreadPool.java:266)   at jrunx.scheduler.WorkerThread.run(WorkerThread.java:66)

http://stackoverflow.com/questions/16425643/embedding-ascii-hex-string-sigstring-into-html-page-not-base64 — barnyr, Mar 11 '14 at 17:14
also, I'm sure it's not your main issue, but the destination on your `` call doesn't look valid — barnyr, Mar 11 '14 at 17:15
Never mind. I should have read @barnyr's link first ;-) It confirms what I suspected. The string does *not* contain hex encoded bytes of a standard image. See also FAQ's [SigPlus1.WriteImageFile](http://www.topazsystems.com/faq/softwarefaq.htm#7). — Leigh, Mar 11 '14 at 17:47
I must say I'm a bit lost here. I've updated my original question to include the Javascript that Topaz provides in their documentation. The comments indicate that they convert the BMP to a hexadecimal string and that I should convert it back. — Brian Fleishman, Mar 11 '14 at 18:03
They seem to have several API's. Can you update your question to include the URL for the *specific* API you are using? — Leigh, Mar 11 '14 at 18:40
Just updated the question. I am trying to implement the "Basic Javascript Demo". — Brian Fleishman, Mar 11 '14 at 18:57
Oh, I thought you were using the java API. Looking at the comments it says *"..this example returns a bitmap image converted to a hexadecimal string"*, so you should not need any of the base64 stuff. Temporarily comment everything out except `binaryDecode( form.sigImageData, "hex" )`. Do the decoded bytes display an image with `` ? — Leigh, Mar 11 '14 at 19:14
No, I receive an error: An exception occurred while trying to read the image. — Brian Fleishman, Mar 11 '14 at 19:27
Can you append the full error message, including stack trace, to your question? Also, write the `#binaryValue#` bytes to a .bmp file ie `FileWrite(..)`. Can you open the file with an image program like MS Paint? — Leigh, Mar 11 '14 at 19:42
Ok I appended the original question with my error. And to answer your question, if I add the FileWrite command, I can create a BMP file with my captured signature: FileWrite("c:\Inetpub\wwwroot\signatures\test.bmp", "#binaryValue#"); ..... Should my command be included in my section? — Brian Fleishman, Mar 11 '14 at 19:59
Does that mean you were able to view it with MS Paint? If yes, try the again, but use the saved file as the `source`. No, you cannot use cfml tags inside cfscript. The two are mutually exclusive. — Leigh, Mar 11 '14 at 20:09
Yes I can view the image file in ms paint. Specifying the following throws the same error message as before (An exception occurred while trying to read the image.): ..... That seems wierd since I can view it in MS Paint. This tag can work with BMP's I assume right? — Brian Fleishman, Mar 11 '14 at 20:15
Well, MS Paint is likely to be a bit more tolerant of issues, but yes AFAIK CFImage can read .bmp's. What version of CF are you using? ``. Any chance you could upload a sanitized sample of the hex string to something like pastebin.com? So others can test it out. See if we can reproduce the issue. — Leigh, Mar 11 '14 at 20:44
Sure. I'm running version: 8,0,1,195765. Here is my hex string: http://pastebin.com/SD8mCdaq — Brian Fleishman, Mar 11 '14 at 20:57

score 1 · Accepted Answer · answered Mar 12 '14 at 13:17

(More of a comment, but a bit too long ...)

I tested the sample hex string with CF9 and got the same result. While the file header, and fact that you can open it with MS Paint, suggests it is a bitmap, I am not sure exactly what type/format Topaz is returning. (Skimming the API did not turn up anything pertinent so far)

As a temporary work-around, you could use .net objects. Load the file with System.Drawing.Bitmap and rewrite it to disk. The result should be a bitmap compatible with cfimage. This solution is not ideal, due to the double write. However, it is an interim option, while you investigate the returned format further.

<cfscript>
    // decode hex and save binary to file
    binaryData = binaryDecode(orm.sigImageData, "hex");
    saveToPath = "c:/temp/original.bmp";
    fileWrite(saveToPath, binaryData);
    // load and resave with .net
    Bitmap = createObject(".net", "System.Drawing.Bitmap").init(saveToPath);
    Bitmap.Save("c:/temp/new.bmp");
    // .. cleanup     
</cfscript>

<!--- display new image --->
<cfimage action="writeToBrowser" source="c:/temp/new.bmp" />

Thanks for the solution. I will try that. I have also found that your previous suggestion of just using FileWrite to save the hex string to disk as a BMP and then displaying it on screen using the tag is a usable workaround as well. Either way, I am able to get something in place in the meantime. Thanks for all your help. — Brian Fleishman, Mar 13 '14 at 00:46
Duh, you are right .. I was too focused on cfimage ;-) Saving the bytes and displaying it with `` seems to work fine with IE + FF. I wonder why cfimage had a problem with it. Anyway, if it is solid across other browsers then that is the better solution. You should post it as an answer, so it is easier to find (and others can up vote it too). — Leigh, Mar 13 '14 at 01:42

score 1 · Answer 2 · edited Mar 13 '14 at 22:22

Building off of Leigh's suggestion, I have also found that his previous suggestion of just using FileWrite to save the decoded hex string to disk as a BMP and then displaying it on screen using the <IMG> tag is a usable workaround as well. Either way, I am able to get something in place in the meantime.

<cfset binaryValue = binaryDecode( form.sigImageData, "hex" )>
<cfset FileWrite("c:\Inetpub\wwwroot\signatures\test.bmp", binaryValue)>
<img src="/siguatures/test.bmp">

Convert Topaz Signature String (Hexadecimal) to Image

2 Answers2

Linked