martes, 15 de mayo de 2012

Desarrollo de apps con Titanium:Captura/Selección de imágen

Ahora hablaremos sobre como hacer una captura o selección de imágen usando un dialogo, un dialogo es una forma de desplegar varias opciones al usuario  y así se ve:


Para haer que un dialogo se despliegue necesitamos hacer el siguiente código:

//crea ventana
var win = Titanium.UI.currentWindow;
//creamos un dialogo con las siguientes opciones para obtener una imagen segun la opcion elegida
var dialogo = Titanium.UI.createOptionDialog({
 title:'Elige la fuente de la imagen ',
 options: ['Camara','Galeria','Cancelar'],
 cancel:2 //Esto es para eligir cual sera la opcion cancelar
 //Donde comenzamos de 0 como por ejemplo tenemos cancelar
 // 0 Camara, 1 Galeria y 2 Cancelar
});
//agregamos el evento
dialogo.addEventListener('click',function(e){
 Ti.API.info('Seleccionaste'+e.index);
});
//boton para eligir foto
var eligirFoto = Titanium.UI.createButton({
 title: 'Elige',
 top: 20,
 right: 20
 
});

eligirFoto.addEventListener('click',function(e){
 dialogo.show();//muestra dialogo
});
win.add(eligirFoto);

Y obtendremos esto:

Dicho dialogo es desplegado después de haber dado click en el botón.Ahora que ya tenemos este dialogo haremos lo funcional, osea que haremos que tome primero la cámara del telefono y después que tome de la galería.A continuación veremos como tomarlo del teléfono.

//agregamos el evento
dialogo.addEventListener('click',function(e){
 Ti.API.info('Seleccionaste'+e.index);
 //Si eligio Camara
 if(e.index== 0 )
 {
  //Desde nuestra camara
  Titanium.Media.showCamera({
   success:function(event)
   {   
    //Guarda imagen en esta varible
    var imagen = event.media;
    if(event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO)
    {
     //coloca la imagen como una vista
     var imagenView = Titanium.UI.createImageView({
      top:20,
      left:20,
      width: 280,
      height: 320
     });
     imagenView.image=imagen;
     win.add(imagenView);
    }
   },
   cancel:function()
   {
    //Ha sido cancelado, la opcion de tomar imagen desde la camara
   },
   error:function(error)
   {
    //crea una alerta
    var alerta = Titanium.UI.createAlertDialog({
     title:'Camara'
     });
    //Daremos aviso si no tuvo camara o si realmente es otra cosa
    if(error.code == Titanium.Media.NO_CAMERA)
    {
     alerta.setMessage('El dispositivo tiene camara disponible');
    }else{
     alerta.setMessage('Error desconosido');
    }
    //nos muestra la alerta
    alerta.show();
    },
    //permitimos que nuestro dispositivo edite la imagen
   allowImageEditing:true,
   //permitimos a nuestro dispositivo que guarde la imagen en la galeria
   saveToPhotoGallery:true
 });
 }else{
  //canelado
  
 }
});

 Y que obtendremos será un evento en el cual guarda la imágen capturada con el dispositivo, en caso de no tener cámara alguna nos mostrará una alerta diciendonós si el dispositivo no tiene cámara o si fue otro error.Ahora veremos como tomar imágenes desde una galería de fotos:


if(e.index == 1){
  //obtiene una imagen de la galeria de fotos del telefono
  Titanium.Media.openPhotoGallery({
   //Si se cumple
   success:function(event){
    //guarda imagen en variable
    var imagen= event.media
    //Lo coloca como una vista
    if(event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO){
     var imagenVista = Titanium.UI.createImageView({
      top:20,
      left:20,
      width: 280,
      height: 320
     });
     imagenVista.image=imagen;
     win.add(imagenVista);
    }
   },
   //Si no cumple cancela
   cancel:function(){
   //El usuario cancelo la opcion
   }
     });
    }else{
  //cancelado
 }


Con esto podremos tomar imágenes desde nuestra galería del dispositivo ó desde la cámara del mismo.

3 comentarios:

  1. Y si la quiero enviar, es decir capturar la imagen y agregarle un texto para enviarla.

    ResponderEliminar
    Respuestas
    1. ¿Te refieres a ponerle sobre la misma imagen un texto?, si es así este es una manera de hacerlo http://stackoverflow.com/questions/7866869/titanium-appcelerator-manipulate-image-with-additional-text-and-other-images, existen también otras formas pero ya es cuestión de que investigues.

      En caso de que no te respondí a tu pregunta, necesitaré que seas más específico.

      Eliminar