Guardar y Mostrar Imagenes de Base de Datos en .Net

lunes, 30 de julio de 2012

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.

BD

El diseño de nuestra aplicacion sera el siguiente.

Diseño

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

Columnas

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.

Captura

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

Descargar Proyecto C#

Descargar Proyecto VB.Net


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

14 comentarios:

CRISTIAN RENGIFO dijo...

Hiciste el proyecto en los 2 lenguajes que chebre, Me interesa el de C# lo voy a descargar haber si logro cambiar la bs a postgres. Gracias por tu aporte

Cristian Torres dijo...

Si todos los ejemplos los voy pongo en ambos lenguajes por los que usan vb.net pero por cuestiones de gustos yo prefiero eternamente c#.
Con respecto a postgres lo he usado poco pero imagino estas usando el proveedor de ado.net para postgres asi que casi seria lo mismo.

Te dejo un link que puede ayudarte.
Guardar Imagenes en PostgreSQL

Anónimo dijo...

te lo agradesco amigo me interesa mucho en c# gracias por la publicacion

Cristian Torres dijo...

Me alegro que te sirva de algo.

Saludos.

Anónimo dijo...

que librerías son necesarias para importar??

Cristian Torres dijo...

Pues solo hice uso de 2

Imports System.Data.SqlClient
Imports System.Configuration

La primera lógicamente para poder trabajar con base de datos y la segunda que la use porque como definí la cadena de conexión en el app.config entonces esta es necesaria para poder leer la cadena de conexión desde el archivo de configuración.

Anónimo dijo...

hola.....quiero hacer lo mismo pero no utilizo datagridview solo datagrid porque estoy trabajando en WPF, y las propiedades no son las mismas, como puedo hacer esto con un datagrid????

ayudaaa

Anónimo dijo...

gracias por la publicacion esta muy buena solo que con una pregunta yo se que es mucho pedir, no habra forma de verlo en video este proyecto en C# o algun link pera verlo en video gracias ...

Cristian Torres dijo...

Deberás jugar un poco con el columnTemplate.
En el siguiente link encontraras información al respecto.
WPF DataGrid Control

Cristian Torres dijo...

Por el momento no prometo hacer vídeos de los artículos(tal vez mas adelante) ya que explicar paso a paso un vídeo implicaría un poco mas de tiempo. Por eso trato de explicar lo mejor posible cada uno de mis artículos si tienes alguna duda de ellos solo pregunta y con gusto te responderé.

Saludos.

Anónimo dijo...

gracias men por el post esta muy bueno me sirvio de mucho te agradezco

Cristian Torres dijo...

Me alegro que te haya servido.

Saludos.

Anónimo dijo...

como crear el archivo de configuracion, para la cadena de conexion, la conexion la voy a realizar localmente.. y podrias decirme cual es objetivo de crear dicho archivo?

Cristian Torres dijo...

Hola.
Para agregar el archivo de configuracion solo agregas un nueve elemenento y elegis archivo de configuracion.

La idea de manejar la cadena de conexion en este archivo es que te evitas usar variables que contengan la cadena de conexion en tu codigo y si necesitas cambiar la cadena de conexion solo la modificas en el achivo y no tenes necesidad de ir a cambiarla en tu codigo etc.

Saludos.

Publicar un comentario en la entrada

Nota: solo los miembros de este blog pueden publicar comentarios.