I want use image1 as the canvas and draw a png[image2] which has only the outline ....and next step write some text on the image where user clicks.
Following code shows how to take user input on image and draw string at that place.
Run sample code Download code
Part 1 Httphandler GDIWriteOnImageAtPosition.ashx
<%@ WebHandler Language="C#" Class="GDIWriteOnImageAtPosition"%>
using System;
using System.Web;
using System.Drawing;
using System.Drawing.Imaging;
public class GDIWriteOnImageAtPosition : IHttpHandler {
public void ProcessRequest (HttpContext context) {
Bitmap result =new Bitmap(200, 200);
using (Bitmap bgimage = new Bitmap(context.Server.MapPath("~/background.png")))
{
using (Graphics g = Graphics.FromImage(result)){
g.Clear(Color.White);
g.DrawImage(bgimage, 0, 0);
if (context.Request.Params["pos"] !=null)
{
string[] pos =
context.Request.Params["pos"].Split(',');
int x =int.Parse(pos[0]);
int y =int.Parse(pos[1]);
g.DrawString("Hello",new Font("Verdana",12),
Brushes.Black,new Point(x,y));
}
}
}
context.Response.ContentType ="Image/pjpeg";
result.Save(context.Response.OutputStream,
ImageFormat.Jpeg);
}
public bool IsReusable {
get {
return false;
}
}
}
Part 2 GDIWriteOnImageAtPosition.aspx
<%@ Page Language="C#"%>
<%@ Import Namespace="System.Collections.Generic"%>
<script runat="server">
protected void imageButton_Click(object sender, ImageClickEventArgs e)
{
imageButton.ImageUrl =string.Format(
"GDIWriteOnImageAtPosition.ashx?pos={0},{1}"
, e.X, e.Y);
}
</script>
<html >
<head id="Head1" runat="server">
<title>GridView Summary</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>Click on image to write "Hello"</p>
<asp:ImageButton ID="imageButton" runat="server"
ImageUrl="GDIWriteOnImageAtPosition.ashx"
OnClick="imageButton_Click"/>
</div>
</form>
</body>
</html>