I would like some help drawing a circle over an image in asp.net, The goal is, whe we click over the image, the page submits and the the image apperas with a small circle in the place we have clicked. What's the best solution for this ?
Check this sample code. and live sample, I have used ImageButton which renders as input type=image.
http://www.jigar.net/demo/gdiimageclick.aspx
Part 1 : aspx page. gdiimageclick.aspx
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">
protected void ImageClicked(object sender, ImageClickEventArgs e){
Graphics g = Graphics.FromImage(GetImageFromSession());
g.DrawEllipse(Pens.Red, e.X - 4, e.Y - 4, 8, 8);
}
Bitmap GetImageFromSession(){
if (Session["MtXMLXImage"] == null){
Session.Add("MtXMLXImage", new Bitmap(200, 200));
}
return (Bitmap)Session["MtXMLXImage"];
}
</script>
<html>
<head>
<title>Sample of ImageClick.</title>
</head>
<body>
<form runat="server">
<p>Click on square. to mark click.</p>
<asp:ImageButton ID="ImageBtn" runat="server"
ImageUrl="GDIImageClick.ashx"
OnClick="ImageClicked"/>
</form>
</body>
</html>
Part : 2 : Handler GDIImageClick.ashx
<%@ WebHandler Language="C#" Class="GDIImageClick" %>
<%@ WebHandler Language="C#" Class="GDIImageClick" %>
using System;
using System.Web;
using System.Drawing;
using System.Web.SessionState;
public class GDIImageClick : IHttpHandler,IRequiresSessionState{
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "image/pjpeg";
GetImageFromSession(context).Save(context.Response.OutputStream,
System.Drawing.Imaging.ImageFormat.Jpeg);
}
public bool IsReusable {
get {
returnfalse;
}
}
Bitmap GetImageFromSession(HttpContext context)
{
if (context.Session["MtXMLXImage"] == null)
{
Bitmap image = new Bitmap(200, 200);
Graphics g = Graphics.FromImage(image);
g.Clear(Color.White);
g.DrawRectangle(Pens.Black, 0, 0,
image.Width-1, image.Height-1);
g.Dispose();
context.Session.Add("MtXMLXImage", image);
}
return (Bitmap)context.Session["MtXMLXImage"];
}
}