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

Capture signature using HTML5 and save it as image to database

我刚开始学习 Jquery 并致力于 asp.net 将在触摸屏设备上使用的网络表单应用程序,我需要捕获用户签名,基本上用户会在点击后签名保存,我希望将他们的签名作为图像保存到 SQL 服务器数据库,以便稍后在网页上检索和显示它。

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

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

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

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

因此,在我看到的演示中,点击 "save" 后,您将转到一个显示您签名图像的新选项卡,我注意到 url 类似于

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAApIAAAE+CAYAAAA+vvBuAAAgAElEQVR4Xu3df8i37V0X8I/l0GY5BzZdiWslKhnNUaBR62lBP0htjuiHfz0uROgPmQsH/hE8jiKKjLl/IoLa9k+NMOYyhCRamyM0WI9bUBst5kzbUNfjxBlmaLy389jO+3q......

  1. 这个url是什么意思?

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

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

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

  1. 那个URL是BASE64格式。您可以在图片标签的 SRC 属性中使用那一长串字符,它就会显示出来。

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

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

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

除了TrueBlueAussie的回答:

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

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

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

  • 字符串写入HiddenField后,在CodeBehind上读回。为此,您可以使用一个额外的按钮,例如 "Save".

当然还有更多的其他选项secure/versatile/appropriate,但这对您来说可能是一个很好的起点。