使用 HTML5 捕获签名并将其作为图像保存到数据库

Question

我刚刚开始学习 Jquery 并在将在触摸屏设备上使用的 asp.net webform 应用程序上工作，我需要捕获用户签名，基本上用户将签名并在点击保存后，我希望他们的签名是将图像保存为 SQL Server 数据库，以便稍后在网页上检索和显示。

我发现了这个问题：Capture Signature using HTML5 and iPad

jQuery 插件效果很好，完全符合我的要求。

这里是演示：http://szimek.github.io/signature_pad

插件在这里：https://github.com/szimek/signature_pad

所以在我看到的演示中，点击“保存”后，您将转到一个显示您签名签名图像的新标签，我注意到网址类似于

数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAApIAAAE + CAYAAAA + vvBuAAAgAElEQVR4Xu3df8i37V0X8I / l0GY5BzZdiWslKhnNUaBR62lBP0htjuiHfz0uROgPmQsH / hE8jiKKjLl / IoLa9k + NMOYyhCRamyM0WI9bUBst5kzbUNfjxBlmaLy389jO + 3Q ...... P>

1. 这个网址是什么意思？

2. 将使用什么类型的变量将其存储在数据库表中（nvarchar、二进制...）

3（主要问题）。我如何在 C# 按钮单击事件后面的代码中获取这些数据文本，以便将它们存储到字符串变量中以用于其他目的。有人可以提供一个简单的例子，以便我可以从那里开始吗？

如果我遗漏了什么，请告诉我，因为我正在查看该插件的演示项目中的 .html 文件和那些 .js 文件，我迷路了。

Answer 1

1. 这是一个Base64 编码的图像。

   • data: 表示跟随的是数据而不是 URL
   • image/png; 指定数据应作为的内容“mimetype”
   • base64,表示数据的编码类型

2. 由于base64 仅使用ASCII 字符，varchar(MAX) 将适合存储。不需要nvarchar。我通常只存储 base64 编码（逗号后的最后一部分），并将 mime 类型（例如image/png）保存在单独的字段中。

3. C# 中有很多选项。如果单独存储 base64 部分，可以稍微简化代码。

   • 使用byte[] imageBytes = System.Convert.FromBase64String(base64data) 将其转换为图像服务器端，并根据字节数组和类型创建图像。
   • 将图片注入网页<img src="@Html.Raw("data:"+ mimetype + "base64," + base64data)"/>

注意事项：

• 正如@anthony 所提到的，您通常会将图像存储为文件（或现在的 Blob 存储中）并且只记录文件名/U​​RI。这取决于数量大小和使用情况。
• 我们发现，对于某些需要额外安全性的项目，将 base64 图像作为编码和加密字符串存储在数据库中很方便。
• 来自 cmets：要保存到，将字符串值放入隐藏输入并更新其值。然后它将像任何其他字符串一样被回发。我们自己的签名插件只是隐藏了它所附加的原始<input type="text"> 并将值放在那里。

Answer 2

除了 TrueBlueAussie 的回答：

在 CodeBehind 中获取字符串的最简单方法是：

• 使用 ASP 声明一个 HiddenField 并为其分配一个静态 ID。 （静态 ID 很重要，因为 ASP 通常会为每个控件分配自动生成的 ID，这很难预测）。

• 以 SignaturePad 将输出 base64 图像字符串写入此 HiddenField 的方式调整 JavaScript 函数。例如，您可以使用“验证”按钮调用 SignaturePad 的导出功能。

• 字符串写入 HiddenField 后，在 CodeBehind 上重新读取。为此，您可以使用其他按钮，例如“保存”之类的按钮。

当然还有其他更安全/通用/合适的选项，但这对您来说可能是一个很好的起点。

Answer 3

1. 该 URL 采用 BASE64 格式。您可以在图像标签的 SRC 属性中使用该长字符串，它将显示出来。

2. 为了获得更好的性能，推荐的存储照片的方法是将图像存储在磁盘上（使用某种服务器端语言），然后将文件名作为 CHAR 或 TEXT 保存在数据库中.

3. 不太确定。我以前从未使用过这个库。