This is not the answer I was looking for but it does work. What I wanted is a way to see what the data is that has been send on click.
//This also associates the Servers Post Events from the Clients side to the Server.
//To setup a communication method between the Clients Machine and the server.
<%@ Page Language="C#" AutoEventWireup="True" CodeBehind="WebForm1.aspx.cs" Inherits="WebForm1" %>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Saving Canvas to .png file on the server</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js" temp_src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/Javascript" language="Javascript">
function drawShapes() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "Blue";
context.fillRect(0, 0, 200, 200);
context.beginPath();
context.lineWidth = "4";
context.strokeStyle = "Green";
context.fillStyle = "Yellow";
context.arc(150, 100, 50, 20, Math.PI * 2, false);
context.stroke();
context.fill();
}
</script>
</head>
<body önload="drawShapes()">
<canvas id="myCanvas" width="200" height="200">
</canvas>
<input type="button" id="btnSave" name="btnSave" value="Save the canvas to server" />
<script type="text/javascript">
$(function () {
$("#btnSave").click(function () {
var image = document.getElementById("myCanvas").toDataURL("image/png");
image = image.replace('data:image/png;base64,', '');
$.ajax({
type: 'POST',
url: 'WebForm1.aspx/UploadImage',
data: '{ "imageData" : "' + image + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert('Image saved successfully !');
}
});
});
});
</script>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Web.Script.Services;
using System.Web.Services;
using System.Collections.Specialized;
[ScriptService]
public partial class WebForm1 : System.Web.UI.Page
{
static string path = @"e:\Dev\00Test\htmlCanvas\WebApplication1\Files\";
protected void Page_Load( object sender, EventArgs e ){}
[WebMethod]
public static void UploadImage( string imageData )
{
string fileNameWitPath = path + DateTime.Now.ToString().Replace( "/", "-" ).Replace( " ", "- " ).Replace( ":", "" ) + ".png";
using ( FileStream fs = new FileStream( fileNameWitPath, FileMode.Create ) )
{
using ( BinaryWriter bw = new BinaryWriter( fs ) )
{
byte[] data = Convert.FromBase64String( imageData );
bw.Write( data );
bw.Close();
}
}
}
}