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();
}
}
}