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......
What does this url mean?
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.
That URL is in BASE64 format. You can use that long string of characters in the SRC attribute of an image tag and it will be displayed.
To get better performance, the recommended way of storing photos is to store the image on the disk (using some kind of server side language) and then save the name of the file in a database as a CHAR or TEXT.
Not quite sure. I've never used the library before.
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
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.
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.
In addition to TrueBlueAussie's answer:
The simplest way to get your string in CodeBehind is:
Declare a HiddenField using ASP and assign a Static ID to it. (Static ID is important since ASP normally assigns automatically generated IDs to each control, and this can get difficult to predict).
Shape your JavaScript function in a way that SignaturePad writes the output base64 image string into this HiddenField. You can for example, use a button "Verify" that calls the Export function of the SignaturePad.
After the string is written into the HiddenField, read it back on CodeBehind. For this, you can use an additional button, for example something like "Save".
There are of course other options which are much more secure/versatile/appropriate, but this might be a good starting point for you.
Related
Wee bit of background to set the scene : we've told a client he can provide us with images of any type and we'll put them on his reports. I've just had a quick run through of doing this and found that the reports (and other things between me and them) are all designed to only use SVGs.
I thought I'd struck gold when I found online that you can convert an image from a jpg or PNG into an SVG using free tools but alas I've not yet succeeded in getting an SVG stored as bytes in the DB in a format that allows me to use it again after reading it back out.
Here's a quick timeline of what followed leading up to my problem.
I use an online tool to generate an SVG from a PNG (e.g., MobileFish)
I can open and view it in Firefox and it looks ok
I ultimately need the SVG to be stored as bytes in the DB, from where the report will pull it via a webpage that serves it up as SVG. So I write it as bytes into a SQL data script. The code I use to write these bytes is included below.
I visit said webpage and I get an error that there is an "XML parsing error on Line 1 Column 1" and it shows some of my bytes. They begin "3C73"
I revisit the DB and compare the bytes I've just written there with some pre-existing (and working ones). While my new ones begin "3C73", the others begin "0xFFFE".
I think I've probably just pointed out something really fundamental but it hasn't clicked.
Can someone tell me what I've done that means my bytes aren't stored in the correct encoding/format?
When I open my new SVG in Notepad++ I can see the content includes the following which could be relevant :
<image width="900" height="401" xLink:href="data:image/png;base64,
(base 64 encoded data follows for 600+ lines)
Here's the brains of the code that turns my SVG into the bytes to be stored in DB :
var bytes = File.ReadAllBytes(file);
using (var fs = new StreamWriter(file + ".txt"))
{
foreach (var item in bytes)
{
fs.Write(String.Format("{0:X2}",item));
}
}
Any help appreciated.
Cheers
Two things:
SVGs are vector images, not bitmap files. All that online tool is doing is taking a JPEG and creating a SVG file with a JPEG embedded in it. You aren't really getting the benefit of a true SVG image. If you realise and understand that, then no worries.
SVG files are just text. In theory there is no reason you can't just store them as strings in your db. As long as the column is big enough. However normally if you are storing unstructured files in a db, the preferred column type to use is a "Blob".
http://technet.microsoft.com/en-us/library/bb895234.aspx
Converting your SVG file to hex is just making things slower and doubling the size of your files. Also when you convert back, you have to be very careful about the string encoding you are using. Which, in fact, sounds like the problem you are having.
I am suspecting you are doing it incorrectly. SVG is simply and XML based vector image format. I guess your application might be using SVG image element and you need to convert your png image to base64 encoded string .
I am going to create a function in my application that is going to send som status mails to several receivers in a list.
Earlier i used plane text format on the email, but now i want to send the mail based on som html templates. I need tips reguarding a good way to insert data into these templates before sending them.
eks
%CpuStatus%
%HardriveStatus%
and so on. I have the solution for everything except a way to fill anchors like that with data. This is a WinForm application so i dont have access to the ASP functionality
Maybe this sort of thing would be the simplest?
// This would most likely be loaded from a file or database.
string emailBody = "CPU Status: %CpuStatus%\nHard Drive Status: %HardriveStatus%";
string cpuStatus = MyService.GetCpuStatus();
emailBody.Replace("%CpuStatus%", cpuStatus);
If you really wanted to make a big project out of it, you can use a webbrowser control, load it with your html file and then use the WebBrowser's Document property to get an HtmlDocument object. You can then loop through it's children (recursively) to find the tags you want to change.
Personally, I would do the .Replace method suggested previously.
Now I'm not sure if this is something I'm doing wrong, or something thats happening in DynamoDB..
Basically, Im building a simple registration/login system for my project, saving the userdata/password in a DynamoDB instance with the password hashed using RIPEMD160, and salted as well using C#'s RNGCryptoServiceProvider().
Registration seems to work perfectly fine. the issue is upon login, no matter what, the passwords dont match up, and I think its because I'm getting some funky characters back when pulling the hash/salt back from DynamoDB. First off, both the hash and the salt are byte arrays of length 20, and converted to strings before saved in the database.
These examples are copy/pasted from the dynamo web interface
Example Hash: ">�Bb.ŧ�E���d��Ʀ"
Example Salt: "`���!�!�Hb�m�}e�"
When they're coming back and I debug into the function that pulls back the data from dynamo, both strings have different characters (VS2010 Debugger):
Returned Hash: "u001B>�Bb.ŧ�E��u0003�d�u001C�Ʀ"
Returned Salt: "`���!u000B�!�Hb�u001Dmu0012�u0001}e�"
Seems these u001B, u000B, u001D, u0012, u0003, u001C, and u0001 are sneaking into the returned data, and I'm not entirely sure whats going on?
You shouldn't be trying to convert opaque binary data into a string in this way in the first place. They're not text so don't treat them that way. You're just begging to lose information that way.
Use Convert.ToBase64String(data) instead of Encoding.GetString before putting the data into the database. When you get it out again, use Convert.FromBase64String to retrieve the original binary data.
Alternatively, don't store the data in a text field to start with - use a database field type which is meant to store binary data...
If one visits jQuery-File-Upload Demo page and will try to upload an image, and then will look at the JSON response, he would notice that a preview of an uploaded image is returned in a format:
"thumbnail_url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAI...
As far as I understand, an images is getting transformed into string and sent back to the client.
How can I do it in C# to impelement ASP.NET back end for the same demo?
I remember reading an answer to a question a while back by the very competent competent_tech and thinking "I never knew you could do that!"
In that answer is an example about how to set the src of an ASP.Net image to be the base64 encoded data you see above.
It effectively boils down to setting the src of an ASP:Image control as follows:
imgCtrl.Src = #"data:image/gif;base64," + Convert.ToBase64String(File.ReadAllBytes(Server.MapPath(#"/images/your_image.gif")));
Remember to change the content type depending on the image!
am using htmlagilitypack to parse the html and get the src value of the images. I made my workaround for attachments and works fine. Fileattachment.content made the job. But i dont know how to work with an image in the html that makes reference to another site, i mean its not an attachment of the email. I get the src value of the images in the html have no problem with that, htmlagilitypack is a great api. But how do i after getting the src value of the external image, get that image and store it in a byte of arrays for saying an example. I have no intentions of storing this images in disk.
Since you have the image URL, you can make a WebRequest to that URL, and you will receive back the image in the form of a response stream;
You can store the content of the response stream in a byte[] array and save that to your database. You may want to store some additional data such as the type of the image in another column, particularly if you will be displaying the images later from your database.
Does this help?