Question

I’m beginner to HTML5 .

What I want to do is :

Upload an image in a canvas then allow the user to draw on this image ,so i can save this image in my database.

I learn how to draw through this lesson

---

But i don’t know how to open the image in the Canvas ,then let the user draw on this image .

Answer 1

If my understanding is correct :
You want to retrive an Image from the database, display it to the user to draw on it, then upload it back to the server to be stored in the database again !

1 – Create a IHttpHandler (.ashx) to return the image from the database

public class ImageHandler : IHttpHandler 
{ 
  public bool IsReusable { get { return true; } } 
  public void ProcessRequest(HttpContext ctx) 
  { 
    var myImage = function_to_read_the_image();
    ctx.Response.ContentType = "image/png"; 
    ctx.Response.OutputStream.Write(myImage); 
  } 
}

save this as getImage.ashx

2 – Add these lines in the InitThis() function on the Tutorial you quoted after ctx = document.getElementById(‘myCanvas’).getContext(“2d”); to display the picture on the canvas

var image = new Image();
image.src = 'http://www.site.com/getImage.ashx';
$(image).load(function () {
    ctx.drawImage(image, 0, 0);
});

Also you can add width and height to strech the image or fill the canvas :

ctx.drawImage(image, 0, 0, 500, 200);

3 – Upload the final drawing to the server again using the canvas’s toDataURL function and save the image to the database.

sending the canvas imagedata to the server :

var Pic = document.getElementById("myCanvas").toDataURL("image/png");
Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
$.ajax({
    type: 'POST',
    url: 'Save_Picture.aspx/UploadPic',
    data: '{ "imageData" : "' + Pic + '" }',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (msg) {
        alert("done, Image Uploaded.");
    }
});

reading and saving the image serverside :

   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)
        {
            byte[] data = Convert.FromBase64String(imageData);
            // save it in a file or database ...
        }
    }