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)
(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" />