Guardar y Mostrar Imagenes de Base de Datos en .Net

Hola espero todos anden bien, ahora veremos como trabajar con imágenes en .Net

En este articulo trataremos los siguientes puntos.
Insertar imágenes en base de datos.
Visualizar imágenes en Datagriedview.
Buscar y cargar imagen en PictureBox.


El ejemplo esta desarrollado en visual estudio 2010 con c# y vb.net y se usa sqlexpress 2008.

Para este ejemplo usaremos una bd llamada Database y que cuenta con una tabla llamada Personas que cuenta con un campo de tipo image, el campo id es de tipo identity osea se incrementara solo.



El diseño de nuestra aplicacion sera el siguiente.



Algo importante que hay que resaltar es que las columnas del datagriedview fueron establecidas en tiempo de diseño.



Como pueden observar se crearon las 4 columnas para los datos indicando que una columna sea de tipo image, la propiedad importante cuando se crean las columnas en tiempo de diseño es DataPropertyName ya que sirve para indicar que campo del origen de datos será asignado a esa columna.

Una vez explicado el diseño de nuestra aplicacion vamos al código lo explicare solo en c# pero en mi blog esta explicado en vb.net tambien esta la descarga en ambos lenguajes.

Lo primero que aremos sera agregar una clase llamada Datos y le agregaremos el siguiente código.
public static DataTable Cargar()
{
    using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["default"].ToString()))
    {
        DataTable dt = new DataTable();
        string query = "SELECT * FROM PERSONAS";
        SqlCommand cmd = new SqlCommand(query, conn);
        SqlDataAdapter adap = new SqlDataAdapter(cmd);
        adap.Fill(dt);
        return dt;
    }
}
 
public static void Insert(string nombre, string apellido, byte[] foto)
{
    using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["default"].ToString()))
    {
        string query = "INSERT INTO Personas(nombre,apellido,foto) VALUES(@nombre,@apellido,@foto)";
        SqlCommand cmd = new SqlCommand(query, conn);
 
        cmd.Parameters.AddWithValue("@nombre", nombre);
        cmd.Parameters.AddWithValue("@apellido", apellido);
        cmd.Parameters.Add("@foto", System.Data.SqlDbType.Image).Value=foto;
        conn.Open();
        try
        {
            cmd.ExecuteNonQuery();
            MessageBox.Show("Registro Ingresado con Exito...");
        }
        catch (Exception ex)
        {
            MessageBox.Show(ex.ToString());
        }
    }
}
En el primer método Cargar lo único que haces es devolver un datatable con los datos de nuestra tabla. Y el segundo método Insert es el que nos servirá para insertar registros en nuestra bd importante notar que el parámetro que usaremos para insertar la foto es de tipo byte.

Ahora agregaremos otra clase llamada ConvertImage y agregamos el siguiente código.
public static Image ByteArrayToImage(byte[] byteArrayIn)
{
    MemoryStream ms = new MemoryStream(byteArrayIn);
    return Image.FromStream(ms);
}
 
public static byte[] ImageToByteArray(Image imageIn)
{
    MemoryStream ms = new MemoryStream();
    imageIn.Save(ms, ImageFormat.Jpeg);
    return ms.ToArray();
}
Tenemos 2 métodos que usaremos para convertir el array de byte en Image y viceversa.

Ahora pasemos al código de nuestra formulario, veamos como cargar los datos en el datagrid.
private void cargar()
{
    dataGridView1.AutoGenerateColumns = false;
    dataGridView1.DataSource = Datos.Cargar();
 
    foreach (DataGridViewRow row in dataGridView1.Rows)
    {
        row.Height = 100;
        DataRowView rows = row.DataBoundItem as DataRowView;
        row.Cells["Foto"].Value = ConvertImage.ByteArrayToImage((byte[])rows["Foto"]);
    }
}
Primero tenemos un método cargar que sera donde se cargaran los datos de nuestra tabla en el datagrid, y recorremos el datagriedview para convertir nuestro array de byte en image y así podes visualizar la imagen en el datagriedview, cuando queramos cargar los datos en el datagrid lo único que ariamos es llamar este método.

Ahora veamos el código de nuestro botón que usaremos para buscar la imagen.
private void btnbuscar_Click(object sender, EventArgs e)
{
    OpenFileDialog file = new OpenFileDialog();
    file.Filter = "Archivo JPG|*.jpg";
 
    if (file.ShowDialog() == DialogResult.OK)
    {
        pictureBox1.Image = Image.FromFile(file.FileName);
    }
}
Se usa OpenFileDialog para poder buscar una imagen y luego la cargamos en el Picturebox.

Ahora veamos el código del botón para insertar registros.
private void btnagregar_Click(object sender, EventArgs e)
{
    Datos.Insert(txtnombre.Text,txtapellido.Text,ConvertImage.ImageToByteArray(pictureBox1.Image));
    cargar();
}
Lo único que hacemos es llamar al método Insert de nuestra clase Datos y le enviamos los parámetros y luego llamamos al método cargar para que los datos que se inserten se vayan mostrando en el datagriedview.



Eso es todo espero les sirva mucho saludos desde El Salvador.

La descarga de los ejemplos como la explicación en ambos lenguajes la encontraran en mi blog.
http://cristiantorresalfaro.blogspot.com/2012/07/guardar-y-mostrar-imagenes-de-base-de.html