Camera

Camera

El objeto camera proporciona acceso a la aplicación de la cámara del dispositivo.

Métodos


camera.getPicture

Toma una foto usando la cámara, o obtiene una foto del álbum del dispositivo. La imagen es retornada codificada en base64 como un objeto String o la URI de un fichero de imagen del álbum.

navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

Descripción

La función camera.getPicture abre la aplicación por defecto de cámara para que el usuario tome una foto (en el caso de Camera.sourceType = Camera.PictureSourceType.CAMERA, por defecto). Una vez la foto es tomada, la aplicación de la cámara se cierra y tu aplicación vuelve al primer plano.

Si Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY o Camera.PictureSourceType.SAVEDPHOTOALBUM, entonces se muestra un dialogo para seleccionar una foto del álbum.

El valor que esta función retorna se le pasa a la función 'callback' cameraSuccess, en uno de los siguientes formatos, dependiendo de lo que especificastes en cameraOptions:

Puedes hacer lo que desees con la imagen codificada o la URI, por ejemplo:

Nota: La calidad de las imágenes cuando usamos los últimos dispositivos nuevos es demasiado buena. Codificar estas imágenes en Base64 puede causar problemas de memoria en algunos de estos dispositivos (iPhone 4, BlackBerry Torch 9800). Antes que eso, es recomendable usar FILE_URI como 'Camera.destinationType'.

Plataformas Soportadas

Ejemplo Rápido

Toma una foto y la retorna codificada en base64:

navigator.camera.getPicture(onSuccess, onFail, { quality: 50 }); 

function onSuccess(imageData) {
    var image = document.getElementById('miImagen');
    image.src = "data:image/jpeg;base64," + imageData;
}

function onFail(message) {
    alert('Ocurrió un error: ' + message);
}

Toma una foto y la retorna usando la ruta del fichero:

navigator.camera.getPicture(onSuccess, onFail, { quality: 50, 
    destinationType: Camera.DestinationType.FILE_URI }); 

function onSuccess(imageURI) {
    var image = document.getElementById('miImagen');
    image.src = imageURI;
}

function onFail(message) {
    alert('Ocurrió un error: ' + message);
}

Ejemplo Completo

<!DOCTYPE html>
<html>
  <head>
    <title>Ejemplo de Camera</title>

    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
    <script type="text/javascript" charset="utf-8">

    var pictureSource;   // Origen de la imagen
    var destinationType; // Formato del valor retornado

    // Espera a que PhoneGap conecte con el dispositivo.
    //
    document.addEventListener("deviceready",onDeviceReady,false);

    // PhoneGap esta listo para usarse!
    //
    function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }

    // Llamada cuando la foto se retorna sin problemas
    //
    function onPhotoDataSuccess(imageData) {
      // Descomenta esta linea para ver la imagen codificada en base64
      // console.log(imageData);

      // Obtiene el elemento HTML de la imagen
      //
      var smallImage = document.getElementById('smallImage');

      // Revela el elemento de la imagen
      //
      smallImage.style.display = 'block';

      // Muestra la foto capturada
      // Se usan reglas CSS para dimensionar la imagen
      //
      smallImage.src = "data:image/jpeg;base64," + imageData;
    }

    // Llamada cuando la foto se retorna sin problemas
    //
    function onPhotoURISuccess(imageURI) {
      // Descomenta esta linea para ver la ruta URI al fichero de imagen 
      // console.log(imageURI);

      // Obtiene el elemento HTML de la imagen
      //
      var largeImage = document.getElementById('largeImage');

      // Revela el elemento de la imagen
      //
      largeImage.style.display = 'block';

      // Muestra la foto capturada
      // Se usan reglas CSS para dimensionar la imagen
      //
      largeImage.src = imageURI;
    }

    // Un botón llamara a esta función
    //
    function capturePhoto() {
      // Toma la imagen y la retorna como una string codificada en base64
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
    }

    // Un botón llamara a esta función
    //
    function capturePhotoEdit() {
      // Toma la imagen, permite editarla y la retorna como una string codificada en base64
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true }); 
    }

    // Un botón llamara a esta función
    //
    function getPhoto(source) {
      // Retorna la ruta del fichero de imagen desde el origen especificado
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }

    // Llamado cuando algo malo ocurre
    // 
    function onFail(message) {
      alert('Ocurrió un error: ' + message);
    }

    </script>
  </head>
  <body>
    <button onclick="capturePhoto();">Capturar foto</button> <br>
    <button onclick="capturePhotoEdit();">Capturar foto editable</button> <br>
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Desde la librería de imágenes</button><br>
    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">Desde el álbum de fotos</button><br>
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
    <img style="display:none;" id="largeImage" src="" />
  </body>
</html>

cameraSuccess

Función 'callback' onSuccess que proporciona información de la imagen.

function(imageData) {
    // Hacer algo con la imagen
}

Argumentos

Ejemplo

// Mostrar imagen
//
function cameraCallback(imageData) {
    var image = document.getElementById('miImagen');
    image.src = "data:image/jpeg;base64," + imageData;
}

cameraError

Función 'callback' onError que proporciona un mensaje de error.

function(message) {
    // Muestra un mensaje de ayuda
}

Argumentos


cameraOptions

Argumento opcional para personalizar la configuración de la cámara.

{ quality : 75, 
  destinationType : Camera.DestinationType.DATA_URL, 
  sourceType : Camera.PictureSourceType.CAMERA, 
  allowEdit : true,
  encodingType: Camera.EncodingType.JPEG,
  targetWidth: 100,
  targetHeight: 100 };

Opciones

Peculiaridades Android

Peculiaridades BlackBerry

Peculiaridades Palm

Peculiaridades iPhone