April 18th, 2010 by JuanK

Hola, hace apenas unos días publiqué un artículo para convertir una imagen  a escala de grises utilizando XNA Framework:

C# – XNA- Como Convertir Una Imagen a Escala de Grises

Bien como no todo mundo conoce XNA Framework he decidido hacer una versión más accesible utilizando el objeto Bitmap de System.Drawing. Algunas cosas serán un ligeramente más difíciles pero en esencia es lo mismo.

Nuevamente explicare el tema de la conversión de Color para evitar el ir y venir al  link anterior.

Cómo Convertir una Imagen a Escala de Grises

Básicamente para que una imagen sea vea en tonos de gris se requiere que los tres componentes básicos del color (  en el computador: rojo, verde, azul – RGB por sus siglas en ingles  ) tengan más o menos la misma intensidad, podemos decir que si queremos convertir un pixel a su equivalente en escala de grises bastaría con hacer algo como esto:

1. Sumar los valores de los componentes de color del pixel, es decir sumar R + G + B
2. Sacar el promedio de esa suma
3. El valor hallado se debe asignar a R, G y B

Con estos tres pasos ya logramos que el pixel sea de color gris ya que cada uno de sus componentes tiene el mismo valor.

Hay muchas otras formas de hacerlo, incluso alguien que haya trabajado previamente con imágenes puede tener su propia versión de como implementarlo de acuerdo a lo que necesite o al tiempo que tenga. Pero existe una manera ampliamente conocida y aceptada en el gremio de las personas que trabajan con imágenes y visión por computador esa manera es la que aprenderemos a efectuar.

El ojo humano y su sensibilidad

Bien, resulta que el ojo humano es mucho más sensible a los colores verdes y rojos que al azul, por lo que en cuanto a precepción de iluminación se trata nuestro ojo reconoce los patrones de iluminación en color en las siguientes proporciones para cada componente:

• Rojo:30%
• Verde:59%
• Azul:11%

Así que lo más adecuado es calcular el valor de cada componente de color con base a esta proporción y de este modo se obtiene el pixel de color gris con la iluminación adecuada para que nuestro ojo lo perciba como un mejor equivalente a su versión en color.

Manos A La Obra, Tiempo de Programar

Los Bitmap tienen diversos formatos, el más normal hoy día es el de color de 24 bit, el cual tambien es el valor por defecto cuando cargamos imagenes jpg, en este artículo trabajaremos diseñando un algoritmo para 24 bit de color, a diferencia de como se hizo en el artículo de XNA donde presumimos que trabajabamos con imagenes de 32 bit. Para visualizar un objeto Bitmap basta con usar un PictureBox y a este se le asigna la imagen en su atributo Image, tal como lo vemos a continuación:

        private void Form1_Load(object sender, EventArgs e)
        {
            Bitmap imagen = new Bitmap("conejo.jpg");
            pictureBox1.Image = imagen;
        }

Ahora lo que haremos es crear una función que reciba como parámetro un objeto Bitmap ( o imagen ) y devuelva un nuevo Bitmap ( o imagen ) convertido a escala de grises:

        private Bitmap CreateGrayScaleBitmap(Bitmap source)
        {
            Bitmap target = new Bitmap(source.Width, source.Height, source.PixelFormat);

            return target;
        }

Padding y Stride

El siguiente paso es obtener del bitmap la información de los pixeles que lo conforman, esta tarea si bien es sencilla es un poco más complicada de hacer a lo que es con un Texture2D de XNA, debido a que el objeto Bitmap representa su información de color fielmente a lo que es un archivo bmp. Por ello se debe tener en cuenta que no todos los bytes son información de color, algunos de estos bytes solo son de relleno y ello puede cambiar de un Bitmap a otro segun sus dimensiones y profundidad de color, esta caracteristica es normalmente conocida como padding y en su momento se implemento para hacer que la lectura del archivo bmp fuera mucho mas rápida al poder cargarla en bloques de enteros.

Asi que lo siguiente a realizar es obtener la información de la imagen lo cual lo hacemos con el método LockBits, el cual retorna un objeto BitmapData

        private Bitmap CreateGrayScaleBitmap(Bitmap source)
        {
            Bitmap target = new Bitmap(source.Width, source.Height, source.PixelFormat);
            BitmapData bmpData = source.LockBits(new Rectangle(0, 0, source.Width, source.Height),
                                                 ImageLockMode.ReadOnly,
                                                 source.PixelFormat);

            return target;
        }

Sin embargo BitmapData no nos sirve para recorrer byte por byte la información de color, por lo que ahora debemos convertir bmpData a un byte[]… pero Como?

Debemos apoyarnos en los mecanismos de Marshal provistos por el .net Framework, la clase Marshal permite por ejemplo convertir un bloque de memoria no administrado en un bloque administrado, el objeto bmpData tiene un atributo Scan0 que no es más que un puntero al arreglo de bytes donde esta la información del color, así que podemos utilizar ese puntero para crear poner la información en nuestro array de bytes.

Pero antes debemos crear el array de bytes, el tamaño del array debe ser básicamente ancho x alto x número de bytes por pixel… pero… hay que tener en cuenta el padding…los bytes de relleno. Calcular el padding es muy fácil aunque es dependiente sobre todo de la profundidad del color, pero el objeto bmpData tiene un atributo llamado Stride el cual es el ancho en bytes de cada línea de pixeles incluyendo el padding, así que nuestra formula para hallar el tamaño del array de bytes se reduce a: bmpData.Stride * alto

        private Bitmap CreateGrayScaleBitmap(Bitmap source)
        {
            Bitmap target = new Bitmap(source.Width, source.Height, source.PixelFormat);   

            BitmapData bmpData = source.LockBits(new Rectangle(0, 0, source.Width, source.Height),
                                                 ImageLockMode.ReadOnly,
                                                 source.PixelFormat);

            byte[] targetBytes = new byte[bmpData.Stride * source.Height ];

            return target;
        }

El engorroso sistema de acceso a los pixeles

Ahora utilizando Marshal obtenemos el array de bytes:

        private Bitmap CreateGrayScaleBitmap(Bitmap source)
        {
            Bitmap target = new Bitmap(source.Width, source.Height, source.PixelFormat);   

            BitmapData bmpData = source.LockBits(new Rectangle(0, 0, source.Width, source.Height),
                                                 ImageLockMode.ReadOnly,
                                                 source.PixelFormat);

            byte[] targetBytes = new byte[bmpData.Stride * source.Height ];

            Marshal.Copy(bmpData.Scan0, targetBytes, 0, targetBytes.Length);

            return target;
        }

como tambien necesitamos acceder a la infromación en bytes del bmp de destino es necesario repetir las mismas tres operaciones pero en LockBits ahora colocamos WriteOnly.

        private Bitmap CreateGrayScaleBitmap(Bitmap source)
        {
            Bitmap target = new Bitmap(source.Width, source.Height, source.PixelFormat);   

            BitmapData bmpData = source.LockBits(new Rectangle(0, 0, source.Width, source.Height),
                                                 ImageLockMode.ReadOnly,
                                                 source.PixelFormat);

            byte[] targetBytes = new byte[bmpData.Stride * source.Height ];

            Marshal.Copy(bmpData.Scan0, targetBytes, 0, targetBytes.Length);

            BitmapData targetData = target.LockBits(new Rectangle(0, 0, target.Width, target.Height),
                                     ImageLockMode.WriteOnly,
                                     target.PixelFormat);
            byte[] targetBytes = new byte[targetData.Stride * targetData.Height];
            Marshal.Copy(targetData.Scan0, targetBytes, 0, targetBytes.Length);

            return target;
        }

Como es casi el mismo código podemos optimizarlo y organizarlo un poco así:

        private byte[] GetImageBytes(Bitmap image, ImageLockMode lockMode, out BitmapData bmpData)
        {
            bmpData = image.LockBits(new Rectangle(0, 0, image.Width, image.Height),
                                     lockMode, image.PixelFormat);

            byte[] imageBytes = new byte[bmpData.Stride * image.Height];
            Marshal.Copy(bmpData.Scan0, imageBytes, 0, imageBytes.Length);

            return imageBytes;
        }

        private Bitmap CreateGrayScaleBitmap(Bitmap source)
        {
            Bitmap target = new Bitmap(source.Width, source.Height, source.PixelFormat);
            BitmapData targetData, sourceData;

            byte[] sourceBytes = GetImageBytes(source, ImageLockMode.ReadOnly, out sourceData);
            byte[] targetBytes = GetImageBytes(target, ImageLockMode.ReadWrite,out targetData); 

            return target;
        }

Ahora se debe recorrer el array de bytes para convertirlo a escala de grises, para poder hacerlo necesitamos recorrer el arreglo en saltos de a pixel, si trabajamos con BMP de 24 bit el tamaño de cada pixel es de 3 bytes.

En un Bitmap el formato de color viene en BGR (Blue Green Red ) mientras que en XNA viene en BGRA (Blue Green Red Alpha) teniendo en cuenta esto la implementación para convertir los bytes a escala grises queda:

        private Bitmap CreateGrayScaleBitmap(Bitmap source)
        {
            Bitmap target = new Bitmap(source.Width, source.Height, source.PixelFormat);
            BitmapData targetData, sourceData;

            byte[] sourceBytes = GetImageBytes(source, ImageLockMode.ReadOnly, out sourceData);
            byte[] targetBytes = GetImageBytes(target, ImageLockMode.ReadWrite,out targetData); 

            //recorrer los pixeles
            for (int i = 0; i < sourceBytes.Length; i += 3)
            {
                //ignorar el padding, es decir solo procesar los bytes necesarios
                if ( (i + 3) % (source.Width * 3) > 0 )
                {
                    //Hallar tono gris
                    byte y = (byte)(sourceBytes[i+2] * 0.3f
                                 + sourceBytes[i + 1] * 0.59f
                                 + sourceBytes[i] * 0.11f);

                    //Asignar tono gris a cada byte del pixel
                    targetBytes[i + 2] = targetBytes[i + 1] = targetBytes[i] = y;
                }
            }

            return target;
        }

Finalmente hay que copiar el array de bytes modificado al bitmap de destino, y desbloquear ambos bitmaps:

        private Bitmap CreateGrayScaleBitmap(Bitmap source)
        {
            Bitmap target = new Bitmap(source.Width, source.Height, source.PixelFormat);
            BitmapData targetData, sourceData;

            byte[] sourceBytes = GetImageBytes(source, ImageLockMode.ReadOnly, out sourceData);
            byte[] targetBytes = GetImageBytes(target, ImageLockMode.ReadWrite,out targetData); 

            //recorrer los pixeles
            for (int i = 0; i < sourceBytes.Length; i += 3)
            {
                //ignorar el padding, es decir solo procesar los bytes necesarios
                if ( (i + 3) % (source.Width * 3) > 0 )
                {
                    //Hallar tono gris
                    byte y = (byte)(sourceBytes[i+2] * 0.3f
                                 + sourceBytes[i + 1] * 0.59f
                                 + sourceBytes[i] * 0.11f);

                    //Asignar tono gris a cada byte del pixel
                    targetBytes[i + 2] = targetBytes[i + 1] = targetBytes[i] = y;
                }
            }

            Marshal.Copy(targetBytes, 0, targetData.Scan0, targetBytes.Length);

            source.UnlockBits(sourceData);
            target.UnlockBits(targetData);

            return target;
        }

Wowfff! finalmente asignamos la imagen al PictureBox:

        private void Form1_Load(object sender, EventArgs e)
        {
            Bitmap imagen = new Bitmap("conejo.jpg");
            pictureBox1.Image = imagen;
            pictureBox2.Image = CreateGrayScaleBitmap(imagen);
        }

Eso es todo!!

En estos otros artículos muestro como hacer lo mismo pero con XNA y Texture 2D, y como hacerlo utilizando XNA y Shaders:

Con XNA y Texture 2D= http://juank.black-byte.com/xna-convertir-imagen-escala-grises/
Con XNA y Shaders= http://juank.black-byte.com/xna-shaders-convertir-imagen-grises/