Question

我正在编写一个ASP.NET webform应用程序，应该使用Wacom数位板（STU-430）签名来注册应用程序本身生成的文档。

ASP.NET应用程序在Web服务器上运行，而远程客户端（此时由于使用Wacom COM对象而仅支持Internet Explorer）拥有/处理平板电脑以进行签名。

webform应该只嵌入代码来收集/捕获签名。签名处理应由Web服务器远程处理。

Wacom HTML示例使用javascript和COM来允许客户端html页面捕获签名“存储”表单中元素内的签名。总而言之，这是“签名”之前的HTML文档结构：

  <div id="signatureDiv">
    Signature image:<br/>
    <img id="signatureImage"/>
  </div>

这是签名后的HTML结构：

<div id="signatureDiv">
    Signature image:<br/>
    <img id="signatureImage" src="data:image/jpeg;base64,/9j/....">
</div>

COM对象'修改'客户端站点DOM结构并在img'占位符'中“插入”签名图像的二进制数据....

问题是......如何在客户端DOM结构中检索元素的数据并将其发布到服务器，以便它可以“处理”签名并正确处理/存储它？

是否可以将img数据的二进制内容“存储”在hiddend表单字段中，并将其用作发布数据的网关？

Bestr问候，米歇尔

Answer 1

我找到了解决方案。希望这可以帮助别人：

1）在开始使用WACOM平板电脑之前，请考虑签名捕获过程可能需要一段时间（根据我的经验，在表格上将签名数字化需要40秒）;

2）WACOM提供的代码（至少是c＃示例和HTML代码）可以花费很多时间;

3）如果您要开发一个webform解决方案，HTML代码示例就是您需要的所有内容，还有一些JS和一些C＃或VB编码;

4）在Windows 8.1 64位系统下（我仍需要检查Win 7）第二次签名时，WACOM平板电脑很可能在您绘制时不会“显示”签名。如果您在盲目签名后按OK，则“签名”无论如何都会发送给客户。恢复系统的唯一方法是拔出并将其插回USB端口;

在网络表单中，您必须安排类似的内容：

HTML：

<link rel="stylesheet" type="text/css" href="Signature.css" />
<script type="text/javascript" src="BigInt.js"></script>
<script type="text/javascript" src="sjcl.js"></script>
<script type="text/javascript" src="Signature_encryption.js"></script>
<script type="text/javascript" src="Signature.js"></script>

<script type="text/javascript">
    var _signatureForm = null;

    function initDemo() {
        if (_signatureForm == null)
        {
            var _signatureImage = document.getElementById("signatureImage");

            _signatureForm = new SignatureForm(_signatureImage);
        }

        _signatureForm.connect();

        return false;
    }

    function signForm() {
        var _signatureImage = document.getElementById("signatureImage");
        var _hdnSignature = $("input[id$='_hdnSignature']");

        _hdnSignature.value = _signatureImage.src;

        return true;
    }
</script>

<form id="_frmMain" runat="server">
<div>
    <div id="signatureDiv">
        Signature image:<br />
        <img id="signatureImage" />
    </div>
    <div>
        Actions:<br />
        <asp:Button ID="signButton" runat="server" Text="Capture" OnClientClick="javascript: return initDemo();" />
        <asp:Button ID="_btnSign" runat="server" Text="Sign" OnClientClick="javascript: return signForm();" OnClick="_btnSign_Click" />
        <asp:HiddenField ID="_hdnSignature" runat="server" />
    </div>
</div>
<object id="wgssSTU" type="application/x-wgssSTU" ></object>
</form>

此示例中引用的所有.js文件都是Wacom SDK HTML示例中提供的文件。

脏作业由signForm（）函数完成，该函数接收图像并将其插入隐藏字段，允许代码隐藏过程处理签名。

背后的代码部分（在我的例子中是C＃）非常简单。只需处理按钮事件并解码图像：

protected void _btnSign_Click(object sender, EventArgs e)
{
    string _sImage = _hdnSignature.Value.Replace("data:image/jpeg;base64,", "");

    byte[] _rgbBytes = Convert.FromBase64String(_sImage);

    string _sImageFile = Guid.NewGuid().ToString().Replace("-", string.Empty);

    _sImageFile += ".jpg";

    using (FileStream imageFile = new FileStream(Server.MapPath("~/" + _sImageFile), FileMode.Create))
    {
        imageFile.Write(_rgbBytes, 0, _rgbBytes.Length);
        imageFile.Flush();
    }
}

请考虑WACOM平板电脑没有在图像文件中嵌入METADATA，那么在您的代码中这样做应该是个好主意。

最诚挚的问候，迈克

ASP.NET表单上的Wacom签名

1 个答案: