locked
How to display an image from Array.. RRS feed

  • Question

  • Hello everyone.

    I'm a beginner in c#, I used Matlab to do image processing before . Since there's any project should do in C# so I start to learn it.
    I have difficulty to convert the array into matrix and than display it into image (bitmap is fine) like "imshow" function in matlab. In this case I used C# window form.

    For the replay I'm very appreciate.

    Many Thanks

    Wednesday, November 23, 2011 7:12 AM

Answers

  • and a version for 8bpp indexed:

     

        public partial class Form1 : Form
        {
            private System.Windows.Forms.Button button1 = new Button();
            private System.Windows.Forms.PictureBox pictureBox1 = new PictureBox();
            private Random _rnd = new Random();
    
            public Form1()
            {
                InitializeComponent();
    
                //this is usually done in the designer
                this.button1.Location = new System.Drawing.Point(180, 47);
                this.button1.Name = "button1";
                this.button1.Size = new System.Drawing.Size(75, 23);
                this.button1.TabIndex = 0;
                this.button1.Text = "button1";
                this.button1.UseVisualStyleBackColor = true;
                this.button1.Click += new System.EventHandler(this.button1_Click);
    
                this.pictureBox1.Location = new System.Drawing.Point(13, 115);
                this.pictureBox1.Name = "pictureBox1";
                this.pictureBox1.Size = new System.Drawing.Size(447, 325);
                this.pictureBox1.TabIndex = 1;
    
                this.ClientSize = new System.Drawing.Size(500, 470);
                this.Controls.Add(this.pictureBox1);
                this.Controls.Add(this.button1);
            }
    
            private void button1_Click(object sender, EventArgs e)
            {
                //do a fake image processing for a grayscale bitmap
                //note that I use 1 byte for one pixel, 
    
                //set up an array (x must be multiple of 4)
                byte[,] myMatrix = new byte[200, 200];
    
                //fill with random (color-) values
                for (int y = 0; y < myMatrix.GetLength(1); y++)
                {
                    for (int x = 0; x < myMatrix.GetLength(0); x++)
                    {
                        myMatrix[x, y] = (byte)_rnd.Next(256);
                    }
                }
    
                //now we have to convert the 2 dimensional array into a one dimensional byte-array for use with 8bpp bitmaps
                byte[] pixels = new byte[myMatrix.GetLength(0) * myMatrix.GetLength(1)];
                for (int y = 0; y < myMatrix.GetLength(1); y++)
                {
                    for (int x = 0; x < myMatrix.GetLength(0); x++)
                    {
                        pixels[y * myMatrix.GetLength(0) + x] = myMatrix[x, y];
                    }
                }
    
                //create a new Bitmap
                Bitmap bmp = new Bitmap(myMatrix.GetLength(0), myMatrix.GetLength(1), System.Drawing.Imaging.PixelFormat.Format8bppIndexed);
                
                System.Drawing.Imaging.ColorPalette pal = bmp.Palette;
    
                //create grayscale palette
                for (int i = 0; i < 256; i++)
                {
                    pal.Entries[i] = Color.FromArgb((int)255, i, i, i);
                }
    
                //assign to bmp
                bmp.Palette = pal;
        
                //lock it to get the BitmapData Object
                System.Drawing.Imaging.BitmapData bmData =
                    bmp.LockBits(new Rectangle(0, 0, bmp.Width, bmp.Height), System.Drawing.Imaging.ImageLockMode.WriteOnly, System.Drawing.Imaging.PixelFormat.Format8bppIndexed);
    
                //copy the bytes
                System.Runtime.InteropServices.Marshal.Copy(pixels, 0, bmData.Scan0, bmData.Stride * bmData.Height);
    
                //never forget to unlock the bitmap
                bmp.UnlockBits(bmData);
    
                //display
                this.pictureBox1.Image = bmp;
            }
    
    
        }
    

     



    Wednesday, November 23, 2011 8:52 AM

All replies

  • The data has to come from somewhere. It can be stored in a javascript object, e.g. if your images have an id then you could use that as a key:
    
    var imageData = {   imageId0: {     thumbnail : 'link/x-thumb.jpg',     mainimg : 'link/x.jpg',     description : 'this is an image',     category : 'Abstract',    
    imageId1: { thumbnail : 'link/y-thumb.jpg', mainimg : 'link/y.jpg', description : 'this is another image', category : 'Abstract', ... };
    Then use a listener to format and display it. However, you are likely far better off to code it into an HTML element at the server, then use the listener 
    to display it. Then you can key the id of the display element to the id of the image (e.g. 'image0-data'), your listener can be as simple as: 
    function showData(el) { showElement(el.id + '-data'); } 
    or similar, where the showElement function takes an ID and displays the element (there are many ways - transitions, 
    modify class, modify display or visibility properties, etc.). Remember that the data must be sent regardless, 
    so so you save nothing by sending it as script rather than HTML. You might save a bit on markup, but the server is much more efficient at 
    generating that and it will be parsed by the client much faster if it's part of the original document. 
    Lastly, if you do it right, it gives you a great fallback. Non-scripted browsers can just display the data anyway, scriptable browsers can hide 
    it then reveal on click.

     


    Regards, Tushar Capoor "Success is not permanent. The same is also true of failure."
    Wednesday, November 23, 2011 7:50 AM
  • Hello everyone.
    ...
    In this case I used C# window form.
    ...


    Hi,

    what exactly do you want to do? Image processing in c#, or display the results of an array you get from an image-processing with matlab or else?

    Regards,

    Thorsten

    Wednesday, November 23, 2011 8:06 AM
  • Hi,

    Try the link below, hope it will resolve your issues.

    http://www.codeproject.com/KB/recipes/ImageConverter.aspx


    Thanks
    Md. Marufuzzaman
    Don't forget to click [Vote] / [Good Answer] on the post(s) that helped you.
    I will not say I have failed 1000 times; I will say that I have discovered 1000 ways that can cause failure – Thomas Edison.
    Wednesday, November 23, 2011 8:10 AM
  • Hi ..

     

    thanks for the replay.. I want to do image processing in c# windows form.

    The first one, I want to convert array from text file:

    example input array from text file(this value for grayscale image):

    14 

    256

    24

    84

    126

    245

    convert in to matrix (for example to be 2 x 3)

    14 256 24

    84 126 245

     

    and then display this matrix in picture box(grayscale image)..

     

    Thanks in advance..

    Wednesday, November 23, 2011 8:16 AM
  • Ok, I just wrote a simple example for a colored bitmap, I will rewrite it to use with greyscale, so first the color-version:

        public partial class Form1 : Form
        {
            private System.Windows.Forms.Button button1 = new Button();
            private System.Windows.Forms.PictureBox pictureBox1 = new PictureBox();
            private Random _rnd = new Random();
    
            public Form1()
            {
                InitializeComponent();
    
                //this is usually done in the designer
                this.button1.Location = new System.Drawing.Point(180, 47);
                this.button1.Name = "button1";
                this.button1.Size = new System.Drawing.Size(75, 23);
                this.button1.TabIndex = 0;
                this.button1.Text = "button1";
                this.button1.UseVisualStyleBackColor = true;
                this.button1.Click += new System.EventHandler(this.button1_Click);
    
                this.pictureBox1.Location = new System.Drawing.Point(13, 115);
                this.pictureBox1.Name = "pictureBox1";
                this.pictureBox1.Size = new System.Drawing.Size(447, 325);
                this.pictureBox1.TabIndex = 1;
    
                this.ClientSize = new System.Drawing.Size(500, 470);
                this.Controls.Add(this.pictureBox1);
                this.Controls.Add(this.button1);
            }
    
            private void button1_Click(object sender, EventArgs e)
            {
                //do a fake image processing for a 32bpp bitmap
                //note that I use 4 bytes for one pixel, 
                //each 4th byte represents the alpha-channel
    
                //set up an array (x must be multiple of 4)
                byte[,] myMatrix = new byte[800, 200];
    
                //fill with random (color-) values
                for (int y = 0; y < myMatrix.GetLength(1); y++)
                {
                    for (int x = 0; x < myMatrix.GetLength(0); x++)
                    {
                        myMatrix[x, y] = (byte)_rnd.Next(256);
                    }
                }
    
                //now we have to convert the 2 dimensional array into a one dimensional byte-array
                byte[] pixels = new byte[myMatrix.GetLength(0) * myMatrix.GetLength(1)];
                for (int y = 0; y < myMatrix.GetLength(1); y++)
                {
                    for (int x = 0; x < myMatrix.GetLength(0); x++)
                    {
                        pixels[y * myMatrix.GetLength(0) + x] = myMatrix[x, y];
                    }
                }
    
                //create a new Bitmap
                Bitmap bmp = new Bitmap(myMatrix.GetLength(0) / 4, myMatrix.GetLength(1));
    
                //lock it to get the BitmapData Object
                System.Drawing.Imaging.BitmapData bmData =
                    bmp.LockBits(new Rectangle(0, 0, bmp.Width, bmp.Height), System.Drawing.Imaging.ImageLockMode.WriteOnly, System.Drawing.Imaging.PixelFormat.Format32bppArgb);
    
                //copy the bytes
                System.Runtime.InteropServices.Marshal.Copy(pixels, 0, bmData.Scan0, bmData.Stride * bmData.Height);
    
                //never forget to unlock the bitmap
                bmp.UnlockBits(bmData);
    
                //display
                this.pictureBox1.Image = bmp;
            }
    
    
        }
    

    Wednesday, November 23, 2011 8:28 AM
  • the grayscale version: (Note that it still is a 32bpp bitmap that I use here)

     

        public partial class Form1 : Form
        {
            private System.Windows.Forms.Button button1 = new Button();
            private System.Windows.Forms.PictureBox pictureBox1 = new PictureBox();
            private Random _rnd = new Random();
    
            public Form1()
            {
                InitializeComponent();
    
                //this is usually done in the designer
                this.button1.Location = new System.Drawing.Point(180, 47);
                this.button1.Name = "button1";
                this.button1.Size = new System.Drawing.Size(75, 23);
                this.button1.TabIndex = 0;
                this.button1.Text = "button1";
                this.button1.UseVisualStyleBackColor = true;
                this.button1.Click += new System.EventHandler(this.button1_Click);
    
                this.pictureBox1.Location = new System.Drawing.Point(13, 115);
                this.pictureBox1.Name = "pictureBox1";
                this.pictureBox1.Size = new System.Drawing.Size(447, 325);
                this.pictureBox1.TabIndex = 1;
    
                this.ClientSize = new System.Drawing.Size(500, 470);
                this.Controls.Add(this.pictureBox1);
                this.Controls.Add(this.button1);
            }
    
            private void button1_Click(object sender, EventArgs e)
            {
                //do a fake image processing for a grayscale bitmap
                //note that I use 1 byte for one pixel, 
      
                //set up an array (x must be multiple of 4)
                byte[,] myMatrix = new byte[200, 200];
    
                //fill with random (color-) values
                for (int y = 0; y < myMatrix.GetLength(1); y++)
                {
                    for (int x = 0; x < myMatrix.GetLength(0); x++)
                    {
                        myMatrix[x, y] = (byte)_rnd.Next(256);
                    }
                }
    
                //now we have to convert the 2 dimensional array into a one dimensional byte-array for use with 32bpp bitmaps
                byte[] pixels = new byte[myMatrix.GetLength(0) * 4 * myMatrix.GetLength(1)];
                for (int y = 0; y < myMatrix.GetLength(1); y++)
                {
                    for (int x = 0; x < myMatrix.GetLength(0); x++)
                    {
                        for (int i = 0; i < 4; i++)
                        {
                            if (i < 3)
                                pixels[y * myMatrix.GetLength(0) * 4 + x * 4 + i] = myMatrix[x, y];
                            else
                                pixels[y * myMatrix.GetLength(0) * 4 + x * 4 + i] = 255;
                        }
                    }
                }
    
                //create a new Bitmap
                Bitmap bmp = new Bitmap(myMatrix.GetLength(0), myMatrix.GetLength(1));
    
                //lock it to get the BitmapData Object
                System.Drawing.Imaging.BitmapData bmData =
                    bmp.LockBits(new Rectangle(0, 0, bmp.Width, bmp.Height), System.Drawing.Imaging.ImageLockMode.WriteOnly, System.Drawing.Imaging.PixelFormat.Format32bppArgb);
    
                //copy the bytes
                System.Runtime.InteropServices.Marshal.Copy(pixels, 0, bmData.Scan0, bmData.Stride * bmData.Height);
    
                //never forget to unlock the bitmap
                bmp.UnlockBits(bmData);
    
                //display
                this.pictureBox1.Image = bmp;
            }
    
    
        }
    

     


    Wednesday, November 23, 2011 8:44 AM
  • and a version for 8bpp indexed:

     

        public partial class Form1 : Form
        {
            private System.Windows.Forms.Button button1 = new Button();
            private System.Windows.Forms.PictureBox pictureBox1 = new PictureBox();
            private Random _rnd = new Random();
    
            public Form1()
            {
                InitializeComponent();
    
                //this is usually done in the designer
                this.button1.Location = new System.Drawing.Point(180, 47);
                this.button1.Name = "button1";
                this.button1.Size = new System.Drawing.Size(75, 23);
                this.button1.TabIndex = 0;
                this.button1.Text = "button1";
                this.button1.UseVisualStyleBackColor = true;
                this.button1.Click += new System.EventHandler(this.button1_Click);
    
                this.pictureBox1.Location = new System.Drawing.Point(13, 115);
                this.pictureBox1.Name = "pictureBox1";
                this.pictureBox1.Size = new System.Drawing.Size(447, 325);
                this.pictureBox1.TabIndex = 1;
    
                this.ClientSize = new System.Drawing.Size(500, 470);
                this.Controls.Add(this.pictureBox1);
                this.Controls.Add(this.button1);
            }
    
            private void button1_Click(object sender, EventArgs e)
            {
                //do a fake image processing for a grayscale bitmap
                //note that I use 1 byte for one pixel, 
    
                //set up an array (x must be multiple of 4)
                byte[,] myMatrix = new byte[200, 200];
    
                //fill with random (color-) values
                for (int y = 0; y < myMatrix.GetLength(1); y++)
                {
                    for (int x = 0; x < myMatrix.GetLength(0); x++)
                    {
                        myMatrix[x, y] = (byte)_rnd.Next(256);
                    }
                }
    
                //now we have to convert the 2 dimensional array into a one dimensional byte-array for use with 8bpp bitmaps
                byte[] pixels = new byte[myMatrix.GetLength(0) * myMatrix.GetLength(1)];
                for (int y = 0; y < myMatrix.GetLength(1); y++)
                {
                    for (int x = 0; x < myMatrix.GetLength(0); x++)
                    {
                        pixels[y * myMatrix.GetLength(0) + x] = myMatrix[x, y];
                    }
                }
    
                //create a new Bitmap
                Bitmap bmp = new Bitmap(myMatrix.GetLength(0), myMatrix.GetLength(1), System.Drawing.Imaging.PixelFormat.Format8bppIndexed);
                
                System.Drawing.Imaging.ColorPalette pal = bmp.Palette;
    
                //create grayscale palette
                for (int i = 0; i < 256; i++)
                {
                    pal.Entries[i] = Color.FromArgb((int)255, i, i, i);
                }
    
                //assign to bmp
                bmp.Palette = pal;
        
                //lock it to get the BitmapData Object
                System.Drawing.Imaging.BitmapData bmData =
                    bmp.LockBits(new Rectangle(0, 0, bmp.Width, bmp.Height), System.Drawing.Imaging.ImageLockMode.WriteOnly, System.Drawing.Imaging.PixelFormat.Format8bppIndexed);
    
                //copy the bytes
                System.Runtime.InteropServices.Marshal.Copy(pixels, 0, bmData.Scan0, bmData.Stride * bmData.Height);
    
                //never forget to unlock the bitmap
                bmp.UnlockBits(bmData);
    
                //display
                this.pictureBox1.Image = bmp;
            }
    
    
        }
    

     



    Wednesday, November 23, 2011 8:52 AM
  • Hi Thorsten,

     

    thank you very much, I'll try it for my reference

    Wednesday, November 23, 2011 8:59 AM
  • Hi,

    I just filled the arrays with random values, if you need to read in a textfile, you could use the static Method System.IO.File.ReadAllText(fileName) to get the complete content as a string and use maybe the Split-function to separate the numbers in one line, or if each line just has one number you could read it by File.ReadAllLines(fileName) to get an array of the lines.

    Convert the text to integers by using Int32.TryParse.

    Regards,

      Thorsten

    Wednesday, November 23, 2011 9:03 AM
  • okay, 

    I see.. thank you  :)

    Wednesday, November 23, 2011 9:15 AM
  • Hi thankyoueveryday,

    If you have any difficulty in future programming, we welcome you to post here again.


    Bob Shen [MSFT]
    MSDN Community Support | Feedback to us
    Thursday, November 24, 2011 6:33 AM
    Moderator