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

所以在演示中我看到了＃34; save＆＃34;你会转到一个显示签名签名图像的新标签，我注意到网址是这样的

  

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

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

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

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

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

Answer 1

1. 该网址为BASE64格式。您可以在图像标记的SRC属性中使用该长字符串，并将显示该字符串。

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

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

Answer 2

1. 这是Base64编码的图像。

   • data:表示数据是关注而不是网址
   • 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存储中），并且只记录文件名/ URI。这取决于数量大小和数量。的使用。
• 对于某些需要额外安全性的项目，我们发现将base64图像存储为编码和放大是方便的。数据库中的加密字符串。
• 来自评论：要保存到，请将字符串值放入隐藏输入并更新其值。然后它将像任何其他字符串一样回发。我们自己的签名插件只隐藏它附加的原始<input type="text">并将值放在那里。

Answer 3

除了TrueBlueAussie的回答：

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

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

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

• 将字符串写入HiddenField后，请在CodeBehind上将其读回。为此，您可以使用其他按钮，例如“保存”。

当然有其他选择更安全/多功能/适当，但这可能是一个很好的起点。