locked
Change Color Image to Balck and White RRS feed

  • Question

  • User1998897817 posted

     Hi,

        I have used one image control in image control i have to display the color image to black and white image in ASP.NET C#.

    any body help me.

     

     

    Thanks and Regards

    Prabu R

     

     

    Saturday, January 3, 2009 4:40 PM

Answers

  • User803211825 posted

    This thread is answered.   After working several hours, a complete solution was prepared.  The person who wrote the question has not replied and is considered MIA.  I hope nothing bad has happened to him.

    If anyone else comes along, and has any questions, please feel free to ask.  I enjoy helping people and this was an interesting question.

    -Danny

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 5, 2009 6:05 AM

All replies

  • User803211825 posted

    Question has been resolved.

    reference here to incomplete link mentioned previous is deleted.

     -Danny

    Saturday, January 3, 2009 5:24 PM
  • User1998897817 posted

     Hi,

     Your give code is not working in web form. give  a full source code. I need to covert a color image to Black and White image 

     

    Thanks and Regards

    Prabu R

     

    Saturday, January 3, 2009 5:48 PM
  • User803211825 posted

    OK, here's another link -- possibly better, and I'll be working to make a full example from it:

    http://www.dreamincode.net/code/snippet2570.htm (this reference was very helpful--I combined it with  previously written program to make the complete example provided below).

    Some code used comes from:

    http://www.codersource.net/csharp_image_Processing.aspx

    -Danny

    Saturday, January 3, 2009 6:40 PM
  • User803211825 posted

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Color2BW.aspx.cs" Inherits="Color2BW" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
    
        <p>Please upload your picture: 
        <asp:FileUpload id="PictureUploadControl" Width="400" runat="server" />        
        <asp:Button runat="server" id="AddPictureButton" text="Upload" onclick="AddPictureButton_Click" /><br />
        </p> 
        
        <asp:Image ID="GrayscaledPhoto" runat="server" /><br />
    
        </form>
    </body>
    </html>
     
    Saturday, January 3, 2009 7:22 PM
  • User803211825 posted
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Drawing;  //Bitmap needed this
    using System.Drawing.Imaging; //ImageFormat needed this
    using System.IO; // .delete needed this
    
    public partial class Color2BW : System.Web.UI.Page
    {
       public static Bitmap Grayscale(Bitmap bitmap)
        {
            //Declare myBitmap as a new Bitmap with the same Width & Height
            Bitmap myBitmap = new Bitmap(bitmap.Width, bitmap.Height);
    
            for (int i = 0; i < bitmap.Width; i++)
            {
                for (int x = 0; x < bitmap.Height; x++)
                {
                    //Get the Pixel
                    Color BitmapColor = bitmap.GetPixel(i, x);
    
                    //I want to come back here at some point and understand, then change, the constants
                    //Declare grayScale as the Grayscale Pixel
                    int grayScale = (int)((BitmapColor.R * 0.3) + (BitmapColor.G * 0.59) + (BitmapColor.B * 0.11));
    
                    //Declare myColor as a Grayscale Color
                    Color myColor = Color.FromArgb(grayScale, grayScale, grayScale);
    
                    //Set the Grayscale Pixel
                    myBitmap.SetPixel(i, x, myColor);
                }
            }
            return myBitmap;
        }
        protected void AddPictureButton_Click(object sender, EventArgs e)
        {
            if (PictureUploadControl.HasFile)
            {
                PictureUploadControl.SaveAs(Server.MapPath("~/images/ORIGINAL") + PictureUploadControl.FileName);
    
                Bitmap oldBitmap = new Bitmap(Server.MapPath("~/images/ORIGINAL") + PictureUploadControl.FileName, false);
    
                Bitmap newBitmap = Grayscale(new Bitmap(oldBitmap)); 
                string name = "grayscale";
                newBitmap.Save(Server.MapPath("~/images/") + name + ".jpg", ImageFormat.Jpeg);
    
                oldBitmap.Dispose();
    
                //we will delete the old
                File.Delete(Server.MapPath("~/images/ORIGINAL") + PictureUploadControl.FileName);
    
                GrayscaledPhoto.ImageUrl = "images/" + name + ".jpg";
            }
        }
    }
     
    Saturday, January 3, 2009 7:23 PM
  • User803211825 posted

    (I have two codes now, Color2BandW.aspx, and Color2BW which has improvements).

    1. Please notice that three namespaces were needed for this code to work
    2. A PictureUploadcontrol is used to locate a photo on the client computer.
    3. A picture with the text "ORIGINAL" added to it is put on the client computer.
    4. A bitmap with the name 'oldBitmap' then takes this.
    5. A new bitmap, 'newBitmap', is created by calling to a subroutine, Bitmap Grayscale()
    6. the next part, I will need to take some time to scrutinize it
    7. For now the name give is a constant, "grayscale".  However it crossed my mind that an upgrade to the program would change this.
    8. It is necessary to dispose of the oldBitmp before we can delete the file we created in step 3.

    I look forward to hearing back from you.  I'm also thinking about trying some other stuff with this--also I need to do some digging on what happened in public static Grayscale().

    -Danny

    (wow--this thing cycles through the picture and does work on every pixel -- Prabu, I've had it in the back of my mind for years that I wanted to do that.

     

    Saturday, January 3, 2009 7:26 PM
  • User803211825 posted

    I played around with the code and found out you can't go into the

    public static Bitmap Grayscale(Bitmap bitmap)

    and add things like sending text to an div (.InnerHtml) or a textbox (.Text).  However, you can copy the iteration loop to another place and loop through a bit and do things like printing out BitmapColor.R, BitmapColor.G, BitmapColor.B.  

    I'm thinking of doing some other experimentation.

    -Danny

    Saturday, January 3, 2009 7:35 PM
  • User803211825 posted

    This thread is answered.   After working several hours, a complete solution was prepared.  The person who wrote the question has not replied and is considered MIA.  I hope nothing bad has happened to him.

    If anyone else comes along, and has any questions, please feel free to ask.  I enjoy helping people and this was an interesting question.

    -Danny

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 5, 2009 6:05 AM
  • User-1718098015 posted

    HI Danny
    I am really amazed at your dedication.I am streching my hair from last three days for a purpose which now seems to be very
    difficult.While Googling I came across this thread.Here is my problem:I allow user to upload a image of his choice,
    then I resize it to a 45 X 45,Then make a copy of that in transparent(I used ur code for that).Till here all thing were going fine.
    Now I want it to cut from lower diagonal(The upper diagonale should get transparent).Then After I need to convert it to cursor file.Isn't it difficult.
    What do you have to say..??

    Thursday, February 5, 2009 5:12 AM
  • User803211825 posted

    I will need to look up the exact answer but a friend of mine who used my code to help someone else said something about this code may look like it is only working in RGB (red, green, blue) but if you look closer it is working with A too.  I think the trick is that if you only feed it three numbers then it assumes (in our case, correctly) that it was given R, G and B.

    So we just feed it four variables.  You modify the code to decide what to put in for A.

    A is alpha and I forget if it is 0 is completely transparent or if 255 is completely transparent--it is one or the other.

    Now when you are (I can't decide whether to say rastering or enumerating) looping

    through the dots if you use 4 variables and put in either 255 or 0 for the A, the resultant picture has transparency.  This can be proven by showing the picture on a background with a small pattern.  I'm going on what my friend told me and my memory of the phone call is several weeks old.

    Let me know if you find the above to be puzzling and I'll ask him to cough up the entire example.

     

    Thursday, February 5, 2009 7:12 AM
  • User-1718098015 posted

    HI Danny

    Thanks for reply.But I think I need to explain my problem in more detail.I dont have to deal with trasnsparency,as I had already got that.Only question is "How can I cut Upper diagonal from Image and lower diagonal should remain in its original form"

    Actually I need to have six diferent format of image from one which user uploads.Transparent was one of them, this called as half image is another and .cur(cursor file) is again another.So please go through my question again have try for it.

    Friday, February 6, 2009 2:47 AM
  • User803211825 posted

    Hmmm...

    I can't visualize what you mean by cut an upper diagonal from an image.  Can you explain this operation further?

    Friday, February 6, 2009 6:11 AM
  • User-1718098015 posted

    Sure

    Consider two right angled triangle.Join both of them so as to make one square/rectangle.

    I just want the one triangle you joined to get parted from the final image.Same is  my case.Here it is a square(image user uploads) and I need to dug the above right angled triangle.from that sqaure.

    Hope  you got my point if not provide me you e-mail I would mail you the images.Thanks for reply

    Friday, February 6, 2009 7:36 AM
  • User803211825 posted

    Oh!!!!

    I can sort of see the math (Murphy's Law, I explain how to cut off a diagonal one way but you need the other)

    Assume you have a picture that is 10 wide and 100 high.

    You want to cut the first 9 from the first row, the first 8 from the next row, and so on.

    As we enumerate across rows and down columns of the image, as long as the value of the row is less than the width of the image (in our example that would mean we were in rows 1 through 9) we would need to do cutting.

    The row number is part of the calculation and if the column index < or = (imagewidth - row number) then the pixel gets made transparent.

    Thus the top row 1: 10 - 1 = 9, the first 9 pixels go transparent

    next row 2: 10 - 2 = 8, thefirst 8 pixels go transparent

    next row 3: 10 - 3 = 7, the first 7 row pixels go transparent

    I will need to go back and see if the indices that enumerate width and height start at 0 or 1 so this could throw off my math by one but I think you will still see the idea.

    To cut the other diagonal, make transparent if column index > row number

    top row: pixels 2 through 10 go transparent

    next row: pixels 3 through 10 go transparent

    Friday, February 6, 2009 9:58 PM
  • User-1718098015 posted

    Hi Danny

    Thanks a lot for your reply .It helped a lot,in fact I almost got my solution.At present I able to
    get rid of upper diagonal by making it transparent using your logic.But now the only problem is I want that upper
    diagonal to be "Opaque" i.e it should be such that If I place it on some other control with some background image.
    the part behind the upper diagonal should be visible.I am giving a try to this lets see If I can figure it out before your reply.
    Once again thanks for your help.

    Sunday, February 8, 2009 11:46 PM
  • User803211825 posted

    Oh, you want to "flip flop" it.

    OK, once again, I think (but am not sure) that 255 for A is opaque and 0 is transparent.

    If I have this backwards you can switch the two and fix the problem in less than 90 seconds.

    Can you configure your code to automatically put in 0 for A for everything, except that if something passes the test for a diagonal, A gets a 255.

    I'm thinking you can take it from there, but I also realize and respect that this sort of thing is abstract.

    So, if you want me to show you an example, post the code that you have right now, and I'll do surgery.  I have a very sharp scapel.  ;-)

    Best regards,

    -Danny

    Monday, February 9, 2009 6:29 PM
  • User-1718098015 posted

    HI Danny.I tried it yesterday but it didnt work.Below is my code,

      Public Shared Function Grayscale1(ByVal bitmap As Bitmap) As Bitmap
            'Declare myBitmap as a new Bitmap with the same Width & Height
            Dim myBitmap As New Bitmap(bitmap.Width, bitmap.Height)

            For i As Integer = 0 To bitmap.Width - 1
                For x As Integer = 0 To bitmap.Height - 1
                    'Get the Pixel
                    If (x >= bitmap.Height - 1 - i) Then


                        Dim BitmapColor As Color = bitmap.GetPixel(i, x)
                        'I want to come back here at some point and understand, then change, the constants
                        'Declare grayScale as the Grayscale Pixel
                        Dim grayScale As Integer = CInt(((BitmapColor.R * 0.3) + (BitmapColor.G * 0.59) + (BitmapColor.B * 0.11)))

                        'Declare myColor as a Grayscale Color
                        Dim myColor As Color = Color.FromArgb(grayScale, grayScale, grayScale)

                        'Set the Grayscale Pixel
                        myBitmap.SetPixel(i, x, BitmapColor)
                    Else
                        Dim myColor As Color = Color.FromArgb(255, 255, 255, 255)'(r,g,b,a)
                        myBitmap.SetPixel(i, x, myColor)
                    End If

                Next
            Next
            Return myBitmap
        End Function

     

    Protected Sub AddPictureButton_Click(ByVal sender As Object, ByVal e As EventArgs)
            If PictureUploadControl.HasFile Then
                PictureUploadControl.SaveAs(Server.MapPath("~/images/original") + PictureUploadControl.FileName)

                Dim oldBitmap As New Bitmap(Server.MapPath("~/images/original") + PictureUploadControl.FileName, False)

                Dim newBitmap As Bitmap = Grayscale1(New Bitmap(oldBitmap))
                Dim name As String = "grayscale"
                newBitmap.Save(Server.MapPath("~/images/") + name & ".gif", ImageFormat.Gif)
                newBitmap.Save(Server.MapPath("~/images/") + name & ".png", ImageFormat.Png)

                oldBitmap.Dispose()

                'we will delete the old
                File.Delete(Server.MapPath("~/images/original") + PictureUploadControl.FileName)

                GrayscaledPhoto.ImageUrl = "images/" & name & ".png"
            End If
        End Sub

     

    ''Note that In my case all images would be of 45 X 45 

    Monday, February 9, 2009 11:24 PM