2

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

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

网络表单应仅嵌入代码以收集/捕获签名。签名处理应由 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 数据的二进制内容“存储”在隐藏的表单字段中，并将其用作发布数据的网关？

最好的问候，米歇尔

4

1 回答 1

2

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

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

2) WACOM 提供的代码可以工作（至少 c# 示例和 HTML 可以），只是花了很多时间；

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

4）在 Windows 8.1 64 位系统下（我仍然必须检查 Win 7）第二次放置签名时，WACOM 平板电脑很有可能不会在您绘制签名时“显示”签名......如果你在盲签名后按确定，无论如何都会将“签名”发送给客户。恢复系统的唯一方法是拔下 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，那么在您的代码中这样做应该是一个好主意。

最好的问候，迈克

于 2015-05-14T15:50:44.517 回答