捕捉签名使用HTML5，并保存为图像数据库 [英] Capture signature using HTML5 and save it as image to database

问题描述

我刚开始学习jQuery和在将触摸屏设备上使用asp.net Web窗体应用程序的工作，我需要捕获用户签名，基本上用户将签署并命中后保存，我想他们的签名是保存为图像到SQL Server数据库，以便我可以检索和以后显示它在网页上。

我发现了这样一个问题：使用HTML5和iPad 捕获签名p>

和jQuery插件的伟大工程，正是因为我想要的。

下面演示： http://szimek.github.io/signature_pad

下面的插件： https://github.com/szimek/signature_pad

所以，在演示中，我击后看到拯救你会去那显示您签签名的图像的新标签，我注意到，网址是一样的东西。

  

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

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




2. 的变量的类型将用来存储此在数据库表（nvarchar的，二进制...）

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

如果我失去了一些东西，请让我知道，因为我在看.html文件，并在该插件的演示项目的.js文件，我迷路了。

解决方案

1. 这是一个的Base64 EN codeD映像。

   
   
   • 数据：表示，数据如下网址，而不是
   
   
   • 图像/ PNG; 指定内容的MIME类型中的数据应担任
   
   
   • 的base64，表示数据的编码类型
   
   



2. 由于只使用ASCII字符， 的base64 （MAX）将是合适的存储。无需为nvarchar 。我通常存储base64编码只（逗号后的最后一部分），并保持MIME类型（如图像/ PNG ）在一个单独的领域。




3. 有在C＃中很多选择。如果单独存放的base64一部分，可以简化code位。

   
   
   • 使用把它变成一个图像服务器端字节[] = imageBytes System.Convert.FromBase64String（base64data）并从字节数组和类型创建映像。
   
   
   • 注入图像到网页＆LT; IMG SRC =@ Html.Raw（数据：+ MIME类型+的base64，+ base64data）/＆GT;
   
   

注：

• 作为@anthony提到，您通常会存储图像的文件（或BLOB存储时下），并只记录文件名/ URI。这取决于量的大小和放大器;用法。


• 我们发现它方便，无需额外的安全一定的项目，BASE64图像存储为EN codeD＆放大器;加密的字符串在数据库中。


• 从注释：要保存到，将字符串值放入一个隐藏的输入和更新它的值。然后，它会得到调回像任何其他字符串。我们自己签名的插件只是隐藏原始＆LT;输入类型=文本方式＆gt; 它连接到并把价值有

I am just starting to learn Jquery and working on asp.net webform app that will be used on a touchscreen device, and I need to capture user signature, basically user will sign and after hit save, I want their signature to be saved as an image to SQL server database so I can retrieve and display it later on a webpage.

I found this question: Capture Signature using HTML5 and iPad

and the jQuery plugin works great, exactly as I want.

Here the demo: http://szimek.github.io/signature_pad

Here the plug-in: https://github.com/szimek/signature_pad

So on the demo I see after hit "save" you will go to a new tab that display an image of your signed signature, and I noticed that the url is something like

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

1. What does this url mean?

2. what type of variable will be used to store this in database table (nvarchar, binary...)

3 (MAIN QUESTION). How do I get those data text in code behind C# button click event to store them to a string variable for other purposes. Can someone provide a simple example so i can go from there?

if I am missing something please let me know, as I am looking at the .html file and those .js files in the demo project of that plugin, I am lost.

解决方案

1. That is a Base64 encoded image.

   • data: says that data is following instead of a URL
   • image/png; specifies the content "mimetype" the data should be served as
   • base64, indicates the encoding type of the data

2. As base64 only uses ASCII characters, a varchar(MAX) would be suitable for storage. No need for nvarchar. I normally store the base64 encoding only (the last part after the comma), and keep the mime-type (e.g. image/png) in a separate field.

3. There are many options in C#. If you store the base64 part separately, you simplify the code a bit.

   • Turn it into an image server-side using byte[] imageBytes = System.Convert.FromBase64String(base64data) and creating an image from the byte array and type.
   • Inject the image into a webpage <img src="@Html.Raw("data:"+ mimetype + "base64," + base64data)"/>

Notes:

• As @anthony mentions, your would typically store images as files (or in Blob storage nowadays) and only record the filename/URI. This depends on quantity size & usage.
• We have found it convenient, for certain projects requiring extra security, for base64 images to be stored as encoded & encrypted strings in a database.
• From comments: To save to, place the string value into a hidden input and update its value. It will then get posted back like any other string. Our own signature plugin just hides the original <input type="text"> it is attached to and puts the value there.

这篇关于捕捉签名使用HTML5，并保存为图像数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！