Cordova - Caméra

Ce plugin est utilisé pour prendre des photos ou utiliser des fichiers de la galerie d'images.

Étape 1 - Installez le plug-in de caméra

Exécutez le code suivant dans le command prompt fenêtre pour installer ce plugin.

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

Étape 2 - Ajout d'un bouton et d'une image

Maintenant, nous allons créer le bouton pour appeler la caméra et imgoù l'image sera affichée une fois prise. Cela sera ajouté àindex.html à l'intérieur de div class = "app" élément.

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

Étape 3 - Ajout d'un écouteur d'événements

L'écouteur d'événement est ajouté à l'intérieur du onDeviceReady pour garantir que Cordova est chargé avant de commencer à l'utiliser.

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

Étape 4 - Ajout de fonctions (prise de photo)

Nous allons créer le cameraTakePicturefonction qui est passée en tant que rappel à notre écouteur d'événements. Il sera déclenché lorsque le bouton est appuyé. À l'intérieur de cette fonction, nous appellerons lenavigator.cameraobjet global fourni par l'API du plugin. Si la prise de vue réussit, les données seront envoyées auonSuccessfonction de rappel, sinon, l'alerte avec message d'erreur sera affichée. Nous placerons ce code au bas 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); 
   } 
}

Lorsque nous exécutons l'application et que nous appuyons sur le bouton, la caméra native sera déclenchée.

Lorsque nous prenons et enregistrons une photo, elle sera affichée à l'écran.

La même procédure peut être utilisée pour obtenir une image à partir du système de fichiers local. La seule différence est la fonction créée à la dernière étape. Vous pouvez voir que lesourceType un paramètre facultatif a été ajouté.

Étape 1 B

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

Étape 2 B

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

Étape 3 B

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

Étape 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);
   }

}

Lorsque nous appuierons sur le deuxième bouton, le système de fichiers s'ouvrira à la place de la caméra afin que nous puissions choisir l'image à afficher.

Ce plugin offre de nombreux paramètres optionnels pour la personnalisation.

S. Non	Paramètre et détails
1	quality Qualité de l'image comprise entre 0 et 100. La valeur par défaut est 50.
2	destinationType DATA_URL ou 0 Renvoie une chaîne encodée en base64. FILE_URI ou 1 Renvoie l'URI du fichier image. NATIVE_URI ou 2 Renvoie l'URI natif de l'image.
3	sourceType PHOTOLIBRARY ou 0 Ouvre la photothèque. CAMERA ou 1 Ouvre la caméra native. SAVEDPHOTOALBUM ou 2 Ouvre l'album photo enregistré.
4	allowEdit Permet l'édition d'image.
5	encodingType JPEG ou 0 Renvoie une image encodée en JPEG. PNG ou 1 Renvoie une image codée au format PNG.
6	targetWidth Largeur de mise à l'échelle de l'image en pixels.
sept	targetHeight Hauteur de mise à l'échelle de l'image en pixels.
8	mediaType PICTURE ou 0 Autorise uniquement la sélection d'image. VIDEO ou 1 Autorise uniquement la sélection vidéo. ALLMEDIA ou 2 Permet la sélection de tous les types de supports.
9	correctOrientation Utilisé pour corriger l'orientation de l'image.
dix	saveToPhotoAlbum Utilisé pour enregistrer l'image dans l'album photo.
11	popoverOptions Utilisé pour définir l'emplacement de popover sur IOS.
12	cameraDirection FRONT ou 0 Caméra frontale. BACK ou 1 Caméra arrière. ALLMEDIA