how to save canvas image to server using c# / javascript

See more:

C#

ASP.NET

Javascript

Canvas

im trying to save a image to server from canvas, when i press the upload button it just resets the canvas.im using two buttons 1 to save the canvas to a hidden field, 2 to upload the canvas.

javascipt save :

saveButton.addEventListener("click", function (event) {
if (signaturePad.isEmpty()) {
alert("Please provide signature first.");
} else {
var signatureData = signaturePad.toDataURL();
document.getElementById("hdnfld").value = signatureData;
alert("signature Saved!");
}
return false;
});
Javascript upload:

<script type="text/javascript">
function UploadPic() {

// generate the image data


var Pic;
Pic.toDataURL("image/png") = document.getElementById('hdnfld').value;
Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")

// Sending the image data to Server
$.ajax({
type: 'POST',
url: 'Signature.aspx/UploadPic',
data: '{ "imageData" : "' + Pic + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert("Done, Picture Uploaded.");
}


});
}
</script>
Save Button:

Save
upload Button:

<button onclick="javascript:UploadPic();return false;">Upload Picture to Server</button>
c# code:

public void UploadImage(string imageData)
{
string Pic_Path = HttpContext.Current.Server.MapPath("Signature.png");
using (FileStream fs = new FileStream(Pic_Path, FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] data = Convert.FromBase64String(imageData);
bw.Write(data);
bw.Close();
}
}
}