Opciones de camara

Estilo CSS

Las fotos que saquemos con el proyecto anterior probablemente se vean enormes y no entren en la pantalla del dispositivo. Para corregir esto agregaremos un estilo CSS en el <head> de la pagina.

Editar el archivo www/index.html y agregar justo antes de cerrar </head>:

    <style>
      .galeria img {
        border: 1px solid #999;
        max-width: 100%;
      }
    </style>

Esto hara que las imagenes (<img>) dentro de un elemento que tenga la clase .galeria no pueda ser mas ancho que el 100% del elemento.

Volver a correr la aplicacion para probar este comportamiento.

Opciones

Combinando las distintas opciones de la camara podemos:

Obtener fotos de la galeria

Para obtener fotos de la galeria hay que llamar a getPicture proporcionando la opcion sourceType: Camera.PictureSourceType.PHOTOLIBRARY.

Editamos nuevamente el archivo www/index.html y agregamos un segundo boton:

      <div data-role="footer" data-position="fixed">
        <a href="#" id="sacarfoto" class="ui-btn ui-icon-camera ui-btn-icon-left">Sacar foto</a>
<!-- agregar este boton -->
        <a href="#" id="elegirfoto" class="ui-btn ui-icon-grid ui-btn-icon-left">Importar foto</a>
      </div>

Y luego editaremos www/js/index.js. Necesitamos 3 modificaciones:

Agregar un metodo que ejecute getPicture con la opcion necesaria
Agregar un successCallback que, a diferencia del anterior, recibira la URI del archivo de foto.
Escuchar el evento click en el boton agregado #elegirfoto y llamar al metodo del primer punto. Esto lo haremos dentro de la funcion initialize.

  initialize: function(){
    //...
    $('#elegirfoto').on('click', camara.buscarFoto);
  },
  buscarFoto: function(){
    var opciones = {
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY
    }
    navigator.camera.getPicture(camara.onFileUriSuccess, camara.onError, opciones);
  },
  onFileUriSuccess: function(imageData) {
    $('.galeria img').first().attr('src',imageData);
  },

Guardar fotos en el dispositivo

Editar el archivo www/js/index.js, agregar un nuevo metodo con las opciones:

  guardarFoto: function(){
    var opciones = {
      destinationType: Camera.DestinationType.NATIVE_URI,
      saveToPhotoAlbum: true
    }
    navigator.camera.getPicture(camara.onFileUriSuccess, camara.onError, opciones);
  },

Nuevamente necesitaremos un boton extra en la aplicacion. Agregar en el footer de la pagina:

<a href="#" id="guardarfoto" class="ui-btn ui-icon-heart ui-btn-icon-left">Guardar foto</a>

Especificar ancho y alto de la imagen

Al especificar ancho y alto, la aplicacion deberia llevarnos por un paso mas donde podremos cortar la foto.

Misma rutina: un boton en el footer de index.html, un metodo en al cual llamaremos en index.js y asignar al evento click del boton agregado la llamada al nuevo metodo:

index.js

  //dentro de la funcion initialize:
    $('#cropearfoto').on('click', camara.cropearFoto);
  //
  cropearFoto: function() {
    var opciones = {
      destinationType : Camera.DestinationType.DATA_URL,
      targetWidth: 100,
      targetHeight: 100
    }
    navigator.camera.getPicture(camara.onDataUrlSuccess, camara.onError, opciones);
  },

index.html

<a href="#" id="cropearfoto" class="ui-btn ui-icon-edit ui-btn-icon-left">Cropear foto</a>

Mini galeria

Hasta ahora solo cambiamos el src de la imagen que tenemos en la aplicacion. Tambien podemos ir agregando fotos.

Modificamos el callback onDataUrlSuccess y cambiamos su codigo para insertar un <img> cada vez:

onDataUrlSuccess: function(imageData) {
  var img = $('<img />');
  img.attr('src',"data:image/jpeg;base64," + imageData);
  img.appendTo('.galeria');
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly