locked
changing color of pixel on image when user clicks RRS feed

  • Question

  • User-881450349 posted

    I have an image control with a jpg in it. When my user clicks on a particular pixel, I would like for the pixel to change color. What is the simplest way to do this. I do not mind if it means a postback.

     

    Thank you,

    Sam

    Thursday, March 19, 2009 5:31 PM

Answers

  • User-1395392389 posted

    If you don't mind the postback, this can be easily done using an ImageButton and handlling its click event:
    The delegate for that event is an ImageClickEventHandler, let's say:

    protected void myImg_Click(object sender, ImageClickEventArgs e){
        // coordinates of the clicked point
        int x = e.X;
        int y = e.Y;
        //
        ((ImageButton)sender).ImageUrl = string.Format(
            "~/myImagingProxy.ashx?x={0}&y={1}", x, y);
    }

    In the myImagingProxy,ashx file you have to handle the image generation process and the single line of code that changes the aspect of the clicked pixel:

     
    
    public class myImagingProxy: IHttpHandler {
        
        public void ProcessRequest (HttpContext context) {
            context.Response.ContentType = "image/jpeg";
            using (Bitmap img = (Bitmap)
                Bitmap.FromFile("c:\\myJpg.jpg"))
            {
                int x = int.Parse(context.Request.QueryString["x"]);
                int y = int.Parse(context.Request.QueryString["y"]);
                img.SetPixel(x, y, Color.Red);
                img.Save(context.Response.OutputStream, 
                    System.Drawing.Imaging.ImageFormat.Jpeg);
            }
        }
    }
     

     That should do the work, hope it helps.

    PS: the same task can be accomplished via javascript in a similar manner (getting the Mouse position on a client-side click event and matching it with the position of the underying img object)

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 23, 2009 3:04 AM

All replies

  • User-881450349 posted

    Someone must have an idea for this surely?!

    Please help,

    Sam

    Saturday, March 21, 2009 5:02 PM
  • User-1395392389 posted

    If you don't mind the postback, this can be easily done using an ImageButton and handlling its click event:
    The delegate for that event is an ImageClickEventHandler, let's say:

    protected void myImg_Click(object sender, ImageClickEventArgs e){
        // coordinates of the clicked point
        int x = e.X;
        int y = e.Y;
        //
        ((ImageButton)sender).ImageUrl = string.Format(
            "~/myImagingProxy.ashx?x={0}&y={1}", x, y);
    }

    In the myImagingProxy,ashx file you have to handle the image generation process and the single line of code that changes the aspect of the clicked pixel:

     
    
    public class myImagingProxy: IHttpHandler {
        
        public void ProcessRequest (HttpContext context) {
            context.Response.ContentType = "image/jpeg";
            using (Bitmap img = (Bitmap)
                Bitmap.FromFile("c:\\myJpg.jpg"))
            {
                int x = int.Parse(context.Request.QueryString["x"]);
                int y = int.Parse(context.Request.QueryString["y"]);
                img.SetPixel(x, y, Color.Red);
                img.Save(context.Response.OutputStream, 
                    System.Drawing.Imaging.ImageFormat.Jpeg);
            }
        }
    }
     

     That should do the work, hope it helps.

    PS: the same task can be accomplished via javascript in a similar manner (getting the Mouse position on a client-side click event and matching it with the position of the underying img object)

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 23, 2009 3:04 AM