HTML5 brought a bunch of new features including the canvas. The canvas allows for us to draw on it, create shapes and perform other graphical activities.
Handily, the canvas allows us to access the data that represents what is drawn on it, and sometimes we want to send that back to a web server. One example use for me has been to accept a signature at the end of a document, and save the signature data back to the web server. If you like, the web server code can convert the canvas data back into an image fairly easily.
In my case I had a Windows web server running IIS on Server 2012 R2 and all of the samples I could find involved building web services using Visual Studio. I really just wanted something simple. Here’s what i came up with, and it works. Feel free to improve upon it or do whatever you will.
How it Works
Construct an event that retrieves the data from the canvas using the .toDataURL() function. The result is a Base64 encoded string that represents the image data. you can actually use that string as a target for an image in HTML instead of linking to a physical file. This is very cool.
Check out the documentation for the function to see other options for producing data for a JPEG.
Once we have the data in a variable we can perform an HTTP POST command to submit our data to the web server. You might be familiar with the HTTP GET method of passing data between web pages, where parameters are passed like:
http://mysite/myapp.aspx?user=Barry&age=99
This works well enough for simple applications but the downside is that the data is visible, and has a length limit. Submitting data as a POST (like a form submission would) makes the URL neater, and provides for submissions of any size.
The page we call on the web server can then simply read the HTTP POST variables and deal with the data accordingly. You can also respond back and pass text to the browser (this is essentially one of the main mechanisms for web pages to dynamically update content based on queries or real time events). In this case we’re just going to wait for a simple “OK” text string to come back.
In The Browser
We’re sending a variable called fileData with a string stored in PicData. you can append other variables and values as needed too.
PicData = signaturePad.toDataURL();
// Sending the image data to Server
var formData = new FormData();
formData.append('fileData', PicData);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
if (xhr.responseText == "OK") {
// received an OK back. You could send other messages back here too and update or reload the page as needed.
}
}
}
xhr.open('POST', "/uploadCanvas.aspx", true);
xhr.send(formData);
On the Web Server (IIS) End
Create the uploadCanvas.aspx file and place the following text into it. This sample creates a text file and saves the signature into it which is NOT something you would ordinarily do – it’s just an example. Your web server would require permissions to write to the folder, and if you get it wrong people might download your files directly. So please adapt this to your situation.
This is tonnes simpler than building a full blown .NET app with Controllers and other things. If you’re just a bit of a hacker like me then this might suit you too.
I imagine doing the same thing in PHP would be quite simple too.
<%
Dim myFileData, f, FSO
myFileData = Request.Form("fileData")
' If you passed other data you can retrieve them here too
FSO = CreateObject("Scripting.FileSystemObject")
f = FSO.CreateTextFile("d:\webapp\signatures\example.txt", true)
f.Write(myFileData)
f.Close
' Send a simple OK back. You could send other data, or even HTML back.
Response.Write("OK")
%>
And Just One More Thing
It should be quite straightforward to convert the string to a binary file using a Base64 function if you need to do that. For me, I used the data string as the target for an <IMG> tag so that i could build an HTML document on the web server that contained the (signature) image embedded into it. I actually avoided the need to build a PDF document as it suited my needs well enough.