Arif Erzin Bloğu-Kendime Notlar

İçerikler özgün değildir. Sadece sık sık lazım olan işime yarayacak olan notları almış olduğum kişisel bloğumdur.

26 Ocak 2014 Pazar

Draw a Canvas image, Upload and save it on the server

Gönderen arif erzin zaman: 14:22
Kaynak:http://www.codicode.com/art/upload_and_save_a_canvas_image_to_the_server.aspx

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.
Download attached file
About the author :

Hiç yorum yok :

Yorum Gönder

Kaydol: Kayıt Yorumları ( Atom )

Blog Archive

Popular Posts