In this tutorial I will draw a picture on a Html 5 Canvas element and send it to the server to be stored.
When the user presses the “Draw Picture” button, a gradient and some text will be drawn to onto the canvas element and when the user presses "Send image to the server" button, the script extracts the image data from the Canvas and upload it to your server. The server side code in this tutorial is written with Asp.Net C#.
First we create a Html page containing 3 elements :
1 - The canvas element: we will actually draw things onto the canvas using javascript.
2 - The "Draw picture" button.
3 - "Save canvas to server" button : this action will send the Image data to the server to be saved as a file.
<html>
<head>
</head>
<body>
<form id="form1" runat="server">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="JsCode.js"></script>
<div align="center">
<canvas id="myCanvas" width="300" height="200"></canvas>
<br /><br />
<table><tr><td><button onclick="javascript:DrawPic();return false;">Draw Picture</button></td><td><button onclick="javascript:UploadPic();return false;">Upload Picture to Server</button></td></tr></table>
</div>
</form>
</body>
</html>
Then we write the 2 javascript functions DrawPic() and UploadPic() inside a javascript file "JsCode.js" (referenced earlier in the html code) :
function DrawPic() {
// Get the canvas element and its 2d context
var Cnv = document.getElementById('myCanvas');
var Cntx = Cnv.getContext('2d');
// Create gradient
var Grd = Cntx.createRadialGradient(100, 100, 20, 140, 100, 230);
Grd.addColorStop(0, "red");
Grd.addColorStop(1, "black");
// Fill with gradient
Cntx.fillStyle = Grd;
Cntx.fillRect(0, 0, 300, 200);
// Write some text
for (i=1; i<10 ; i++)
{
Cntx.fillStyle = "white";
Cntx.font = "36px Verdana";
Cntx.globalAlpha = (i-1) / 9;
Cntx.fillText("Codicode.com", i * 3 , i * 20);
}
}
function UploadPic() {
// Generate the image data
var Pic = document.getElementById("myCanvas").toDataURL("image/png");
Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
// Sending the image data to Server
$.ajax({
type: 'POST',
url: 'Save_Picture.aspx/UploadPic',
data: '{ "imageData" : "' + Pic + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert("Done, Picture Uploaded.");
}
});
}
And finally our C# server-side code snippet, we create a blank aspx page with the following code behind to read and save the picture :
using System;
using System.Web;
using System.IO;
using System.Web.Script.Services;
using System.Web.Services;
[ScriptService]
public partial class Save_Picture : System.Web.UI.Page
{
[WebMethod()]
public static void UploadPic (string imageData)
{
string Pic_Path = HttpContext.Current.Server.MapPath("MyPicture.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();
}
}
}
}
A sample website to run and test this code is available in the attached file, Thanks.