Saltar al contenido
Menú
El blog de Kañaz
  • Inicio
  • Acerca de
  • Github
  • Youtube
  • LinkedIn
  • Twitter
El blog de Kañaz

Importar y exportar imágenes por medio de Silverlight

Publicada el 14 febrero, 201116 julio, 2012
Twittear

Una de las partes que debemos tener mas presentes de Silverlight, es que el archivo se descarga del lado del cliente y todo funciona desde ahí, por lo mismo es que hay algunas funciones que por seguridad serán restingidos, uno de los mas importantes es la falta de acceso a archivos del sistema de una forma un tanto fácil, para ello se encuentra una clase genial llamada OpenFileDialog, esta clase será muy útil en este ejercicio.

Después de comenzar con un proyecto en blanco, lo primero que dedes hacer es colocar un sencillo botón y una imagen en blanco para que la interfaz quede en XAML de la siguiente manera.

 

Y en el evento clic del botón colocaremos el siguiente código.

private void btnAbrir_Click(object sender, System.Windows.RoutedEventArgs e)
{
OpenFileDialog dialogo = new OpenFileDialog();
 
dialogo.Multiselect = false;
dialogo.Filter = "jpg (*.jpg)|*.jpg";
dialogo.FilterIndex = 1;
 
bool? userClickedOK = dialogo.ShowDialog();
 
if (userClickedOK == true)
{
System.IO.Stream archivo = dialogo.File.OpenRead();
BitmapImage bi = new BitmapImage();
bi.SetSource(archivo);
imgControl.Source = bi;
archivo.Close();
}
}

private void btnAbrir_Click(object sender, System.Windows.RoutedEventArgs e) { OpenFileDialog dialogo = new OpenFileDialog(); dialogo.Multiselect = false; dialogo.Filter = "jpg (*.jpg)|*.jpg"; dialogo.FilterIndex = 1; bool? userClickedOK = dialogo.ShowDialog(); if (userClickedOK == true) { System.IO.Stream archivo = dialogo.File.OpenRead(); BitmapImage bi = new BitmapImage(); bi.SetSource(archivo); imgControl.Source = bi; archivo.Close(); } }

Ok, ya teniendo el código puedes ver que llamando al OpenFileDialog podrás acceder a los archivos de tu máquina, de ahí filtra la extensión que quieres buscar y no permitas la multiselección dado que tienes un solo elemento en donde guardar tu información, la cual por cierto obtienes y canalizas mediante un Stream, el cual va a dar a un BitmapImage y por último a tu objeto imagen.

El resultado sería algo así.

img901

Ya que pudiste acceder y ver la imagen, entonces vas por la mitad del asunto, sigamos para que ahora exportes la imagen.

Para esto vas a añadir primero una clase que encontré (me gusta reconocer el trabajo de los demás, pero no recuerdo donde lo obtuve)

Descargar JPGUtil.cs

Ya que tienes la clase en tus manos insértala en tu proyecto o crea una nueva copia el código, como tu prefieras, la idea es tener algo así.

img902

Como puedes ver, hace falta una referencia para que el proyecto pueda funcionar, es una .dll, su nombre es FJ.Core.dll (no pongo el link de descarga, pero si descargas el ejercicio al final del post ahí viene), eso soluciona el problema.

Ya que tu clase funciona correctamente, vamos a regresar al XAML y colocaremos un Canvas, así como texto, para que quede de la siguiente manera.

 

Y por último en el evento Clic del boton para exportar escribiremos el siguiente código

private void btnExportar_Click(object sender, RoutedEventArgs e)
{
SaveFileDialog dialog = new SaveFileDialog();
dialog.Filter = "JPEG Images | *.jpg";
dialog.DefaultExt = "jpg";
 
WriteableBitmap bitmap = new WriteableBitmap(contenedorImagen, new TranslateTransform());
if (dialog.ShowDialog() == true)
{
using (Stream stream = dialog.OpenFile())
{
JPGUtil.EncodeJpg(bitmap, stream);
}
}
}

private void btnExportar_Click(object sender, RoutedEventArgs e) { SaveFileDialog dialog = new SaveFileDialog(); dialog.Filter = "JPEG Images | *.jpg"; dialog.DefaultExt = "jpg"; WriteableBitmap bitmap = new WriteableBitmap(contenedorImagen, new TranslateTransform()); if (dialog.ShowDialog() == true) { using (Stream stream = dialog.OpenFile()) { JPGUtil.EncodeJpg(bitmap, stream); } } }

Donde lo que haces es usar una clase diferente, la clase SaveFileDialog y de la misma manera estás filtrando el tipo de archivo que vas a crear, después usando la clase que insertamos hace unos pasos, crearás una imagen y ahí ira a parar toda la información de tu control contenedor.

Espero que puedas disfrutarlo, yo lo hice cuando lo pude terminar.

Descarga aquí el código

3 comentarios en «Importar y exportar imágenes por medio de Silverlight»

  1. Pingback: Tweets that mention Importar y exportar imágenes por medio de Silverlight « Mi sitio, tu sitio -- Topsy.com
  2. Rosa | vuelos a china dice:
    18 abril, 2012 a las 11:27 am

    Me ha venido muy bien el código, gracias

    Responder
  3. VICTOR dice:
    11 noviembre, 2014 a las 3:26 pm

    hola acabo de ver el codigo pero como seria guardar la imagen en un base de datos SQL SERVER
    utilizando WCF

    grac ias

    Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Busca en este sitio

MI perfil de Github

Github profile

Sígueme en Twitter

Seguir a @aminespinoza
©2023 El blog de Kañaz | Funciona con SuperbThemes y WordPress