Córdoba - Cámara

Este complemento se usa para tomar fotos o usar archivos de la galería de imágenes.

Paso 1: instalar el complemento de la cámara

Ejecute el siguiente código en el command prompt ventana para instalar este complemento.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera

Paso 2: agregar botón e imagen

Ahora, crearemos el botón para llamar a la cámara y imgdonde se mostrará la imagen una vez tomada. Esto se agregará aindex.html dentro de div class = "app" elemento.

<button id = "cameraTakePicture">TAKE PICTURE</button>
<img id = "myImage"></img>

Paso 3: agregar un detector de eventos

El detector de eventos se agrega dentro del onDeviceReady función para garantizar que Cordova se cargue antes de que comencemos a usarlo.

document.getElementById("cameraTakePicture").addEventListener 
   ("click", cameraTakePicture);

Paso 4: agregar funciones (tomar una foto)

Crearemos el cameraTakePicturefunción que se pasa como una devolución de llamada a nuestro detector de eventos. Se disparará cuando se toque el botón. Dentro de esta función, llamaremos alnavigator.cameraobjeto global proporcionado por la API del complemento. Si la fotografía se realiza correctamente, los datos se enviarán alonSuccessfunción de devolución de llamada, si no, se mostrará la alerta con mensaje de error. Colocaremos este código al final deindex.js.

function cameraTakePicture() { 
   navigator.camera.getPicture(onSuccess, onFail, {  
      quality: 50, 
      destinationType: Camera.DestinationType.DATA_URL 
   });  
   
   function onSuccess(imageData) { 
      var image = document.getElementById('myImage'); 
      image.src = "data:image/jpeg;base64," + imageData; 
   }  
   
   function onFail(message) { 
      alert('Failed because: ' + message); 
   } 
}

Cuando ejecutamos la aplicación y presionamos el botón, se activará la cámara nativa.

Cuando tomemos y guardemos la foto, se mostrará en la pantalla.

Se puede utilizar el mismo procedimiento para obtener imágenes del sistema de archivos local. La única diferencia es la función creada en el último paso. Puedes ver que elsourceType Se ha agregado un parámetro opcional.

Paso 1 B

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera

Paso 2 B

<button id = "cameraGetPicture">GET PICTURE</button>

Paso 3 B

document.getElementById("cameraGetPicture").addEventListener("click", cameraGetPicture);

Paso 4 B

function cameraGetPicture() {
   navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY
   });

   function onSuccess(imageURL) {
      var image = document.getElementById('myImage');
      image.src = imageURL;
   }

   function onFail(message) {
      alert('Failed because: ' + message);
   }

}

Cuando presionamos el segundo botón, se abrirá el sistema de archivos en lugar de la cámara para que podamos elegir la imagen que se va a mostrar.

Este complemento ofrece muchos parámetros opcionales para la personalización.

S. No	Parámetro y detalles
1	quality Calidad de la imagen en el rango de 0-100. El valor predeterminado es 50.
2	destinationType DATA_URL o 0 Devuelve una cadena codificada en base64. FILE_URI o 1 Devuelve el URI del archivo de imagen. NATIVE_URI o 2 Devuelve el URI nativo de la imagen.
3	sourceType PHOTOLIBRARY o 0 Abre biblioteca de fotos. CAMERA o 1 Abre la cámara nativa. SAVEDPHOTOALBUM o 2 Abre el álbum de fotos guardado.
4	allowEdit Permite la edición de imágenes.
5	encodingType JPEG o 0 Devuelve una imagen codificada en JPEG. PNG o 1 Devuelve una imagen codificada en PNG.
6	targetWidth Ancho de escala de la imagen en píxeles.
7	targetHeight Altura de escala de la imagen en píxeles.
8	mediaType PICTURE o 0 Solo permite la selección de imágenes. VIDEO o 1 Solo permite la selección de video. ALLMEDIA o 2 Permite la selección de todos los tipos de medios.
9	correctOrientation Se utiliza para corregir la orientación de la imagen.
10	saveToPhotoAlbum Se utiliza para guardar la imagen en el álbum de fotos.
11	popoverOptions Se usa para configurar la ubicación del popover en IOS.
12	cameraDirection FRONT o 0 Cámara frontal. BACK o 1 Camara trasera. ALLMEDIA