ASP.NET 表格上的 Wacom 签名

Question

我正在编写一个 ASP.NET 网络表单应用程序，它应该使用 Wacom 数位板 (STU-430) 签名来签署应用程序本身生成的文档。

ASP.NET 应用程序在 Web 服务器和远程客户端上运行（由于使用 Wacom COM 对象，目前仅支持 Internet Explorer）owns/handle 用于签名的数位板。

网络表单应仅将代码嵌入 collect/capture 签名。签名处理应由网络服务器远程处理。

Wacom HTML 示例使用 javascript 和 COM 允许客户端 html 页面捕获签名 'storing' 表单元素内的签名。长话短说，这是 'signature':

之前的 HTML 文档结构

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

这是 HTML 结构 'after' 签名：

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

COM 对象 'modify' 客户端站点 DOM 结构和 'insert' img 中签名图像的二进制数据 'placeholder' ....

问题是...我如何检索客户端 DOM 结构中元素的数据并将其 post 发送到服务器以便它可以 'handle' 签名和 process/store 正确吗？

是否可以 'store' 隐藏表单域中 img 数据的二进制内容并将其用作 post 数据的网关？

最好的问候，米歇尔

Answer 1

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

1) 在开始开发使用 WACOM 数位板的东西之前，请考虑签名捕获过程可能需要很长时间（根据我的经验，甚至需要 40 秒才能将表格上的签名数字化）；

2) WACOM 提供的代码有效（至少 C# 示例和 HTML 一个有效）只是花了很多时间；

3) 如果您要开发一个网络表单解决方案，HTML 代码示例就是您所需要的，再加上一点 JS 和一些 C# 或 VB 编码；

4) 在 Windows 8.1 64 位系统下（我仍然需要检查 Win 7）第二次放置签名时，WACOM 数位板很可能不会 'show'在绘制时签名...如果在盲签名后按 OK，'signature' 无论如何都会发送给客户端。恢复系统的唯一方法是拔下并重新插入 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 数位板未在图像文件中嵌入元数据，因此最好在您的代码中这样做。

最好的问候，迈克

ASP.NET 表格上的 Wacom 签名

Wacom signature on ASP.NET forms

asp.net

dom

wacom

image

electronic-signature