How to open an image from code behind in a canvas and let the user draw on this image

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 .

Think it is bad idea to store image in database. Migrating will be toooo long and you will not be able to use phpmyadmin for this. Better save path of the file on your server. — Pavel K, Dec 20 '12 at 12:20

Chtioui Malek · Accepted Answer · 2012-12-25T23:41:13.260

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 ...
        }
    }

Thanks for basically saying exactly the same as I did. Just one thing: `image.src = 'i.jpg';` will not work. — Cerbrus, Dec 20 '12 at 12:40
Why it will not work ?, I just tested it, it works, tho the image have to be on the same directory as the html file. — Chtioui Malek, Dec 20 '12 at 12:43
_"tho the image have to be on the same directory as the html file"_ <-- And that was exactly the information you were missing there. — Cerbrus, Dec 20 '12 at 12:49
It works like magic , one last thing Could U clarify the last point please `he canvas's toDataURL function` — Anyname Donotcare, Dec 25 '12 at 09:09

score 2 · Answer 2 · answered Dec 20 '12 at 12:18

2

Load a image into the canvas:

var image = new Image();
image.addEventListener("load", function() {
    ctx.drawImage(image, x, y);
});
image.src = 'http://server/image.jpg';

Let the user draw on this image, with the functions you linked to in the question.

answered Dec 20 '12 at 12:18

Cerbrus

70,800
18
132
147

Could u help me with .net code , because the images stored in my db . – Anyname Donotcare Dec 20 '12 at 12:22
1

You might want link the `image.src` to a page on your server, then. On this page, instead of returning html, return only the image from the database. – Cerbrus Dec 20 '12 at 12:27
Could u explain `link the image.src to a page on your server, then. On this page, instead of returning html, return only the image from the database.` more please – Anyname Donotcare Dec 20 '12 at 13:01
1

Okay, I assume you have a server where the images are stored in the database? How are they stored exactly? – Cerbrus Dec 20 '12 at 13:02
specifically it's a report i intend to convert to an image then open in the canvas so the user can draw on it – Anyname Donotcare Dec 20 '12 at 13:05
1

It's better to use an IHttpHandler (.ashx) instead because an aspx file will go through the page life cycle. check this for returning an image from the database : http://stackoverflow.com/questions/2253228/asp-net-return-image-from-aspx-link – Chtioui Malek Dec 20 '12 at 13:11
@ChtiwiMalek:: Thanks, ok i use `IHttpHandler` this's not the problem ,the problem is how to open this image in the canvas server side in the `.cs` not in the client side .Could u write code to clarify it please? – Anyname Donotcare Dec 23 '12 at 09:32

How to open an image from code behind in a canvas and let the user draw on this image

2 Answers2