将黄玉签名字符串(十六进制)转换为图像

Question

我正在尝试将黄玉签名垫集成到我的ColdFusion应用程序中。我想从pad中捕获签名，将其转换为ColdFusion可以在浏览器中显示的格式并保存到磁盘。

使用他们的文档，我能够以十六进制格式检索捕获的签名(我认为)。我正在遵循他们网站上找到的文档:基本Javascript演示

然后尝试将十六进制转换为Base64，以便我可以将图像写入浏览器和ColdFusion服务器的磁盘。然而，ColdFusion似乎不喜欢我的格式，并抛出一个错误。

有谁能帮我一下吗?

下面是转换十六进制字符串并尝试从中生成图像的代码。

<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:Inetpubwwwrootsignaturestest.png"
source="#base64Value#"
/>
</center>
</cfoutput>

Javascript由制造商提供:

<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>

这是我的ColdFusion错误输出:

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:Inetpubwwwrootserviceticketsigpadaction.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:Inetpubwwwrootserviceticketsigpadaction.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:Inetpubwwwrootserviceticketsigpadaction.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)

Answer 1

(更多的评论，但有点太长…)

我用CF9测试了样本十六进制字符串，得到了相同的结果。虽然文件头，以及你可以用MS Paint打开它的事实，表明它是一个位图，但我不确定Topaz返回的是什么类型/格式。(到目前为止，浏览API没有找到任何相关的内容)

作为临时的解决方法，您可以使用。net对象。用System.Drawing.Bitmap加载文件并将其重写到磁盘。结果应该是一个与cfimage兼容的位图。由于双重写入，这种解决方案并不理想。但是，在您进一步研究返回的格式时，这是一个临时选项。

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

Answer 2

根据Leigh的建议，我还发现他之前的建议只是使用FileWrite将解码的十六进制字符串保存到磁盘作为BMP，然后使用<IMG>标记在屏幕上显示它也是一个可用的解决方案。不管怎样，我都能在此期间做点什么。

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