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 primero que aremos sera agregar una clase(modulo en el caso de vb.net) 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());
              }
          }
      }

   Public Function Cargar() As DataTable
      Using conn As New SqlConnection(ConfigurationManager.ConnectionStrings("default").ToString())
          Dim dt As New DataTable()
          Dim query As String = "SELECT * FROM PERSONAS"
          Dim cmd As New SqlCommand(query, conn)
          Dim adap As New SqlDataAdapter(cmd)
          adap.Fill(dt)
          Return dt
      End Using
  End Function

  Public Sub Insert(ByVal nombre As String, ByVal apellido As String, ByVal foto As Byte())
      Using conn As New SqlConnection(ConfigurationManager.ConnectionStrings("default").ToString())
          Dim query As String = "INSERT INTO Personas(nombre,apellido,foto) VALUES(@nombre,@apellido,@foto)"
          Dim cmd As 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 ex As Exception
              MessageBox.Show(ex.ToString())
          End Try
      End Using
  End Sub

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(modulo para el caso de vb.net) 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();
      }

   Public Function ByteArrayToImage(ByVal byteArrayIn As Byte()) As Image
      Dim ms As New MemoryStream(byteArrayIn)
      Return Image.FromStream(ms)
  End Function

  Public Function ImageToByteArray(ByVal imageIn As Image) As Byte()
      Dim ms As New MemoryStream()
      imageIn.Save(ms, ImageFormat.Jpeg)
      Return ms.ToArray()
  End Function

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"]);
          }
      }

   Private Sub cargar()
      dataGridView1.AutoGenerateColumns = False
      dataGridView1.DataSource = Datos.Cargar()

      For Each row As DataGridViewRow In dataGridView1.Rows
          row.Height = 100
          Dim rows As DataRowView = TryCast(row.DataBoundItem, DataRowView)
          row.Cells("Foto").Value = ConvertImage.ByteArrayToImage(DirectCast(rows("Foto"), Byte()))
      Next
  End Sub

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);
          }
      }

   Private Sub btnbuscar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnbuscar.Click
      Dim file As New OpenFileDialog()
      file.Filter = "Archivo JPG|*.jpg"
      If file.ShowDialog() = DialogResult.OK Then
          pictureBox1.Image = Image.FromFile(file.FileName)
      End If
  End Sub

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();
      }

   Private Sub btnagregar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnagregar.Click
      Datos.Insert(txtnombre.Text, txtapellido.Text, ConvertImage.ImageToByteArray(pictureBox1.Image))
      cargar()
  End Sub

Lo único que hacemos es llamar al método Insert de nuestra clase Datos y le enviamos los parámetros y luego llamamos al metodo 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...

Descargar Proyecto C#

Descargar Proyecto VB.Net

Recuerden si necesitan una pagina web para su empresa, una aplicación web  o de escritorio estamos a la orden pueden consultar Mis Servicios

No olvides suscribirte al blog para estar pendientes de mis últimos artículos.

Si quieren donarme para una soda lo pueden hacer aqui.