Ionic - Fotocamera Cordova

Il plug-in della fotocamera Cordova utilizza l'estensione native camera per scattare foto o ottenere immagini dalla galleria di immagini.

Utilizzo della fotocamera

Apri la cartella principale del progetto nel prompt dei comandi, quindi scarica e installa il plug-in della fotocamera Cordova con il seguente comando.

C:\Users\Username\Desktop\MyApp> cordova plugin add org.apache.cordova.camera

Ora creeremo un servizio per l'utilizzo di un plug-in per fotocamera. Useremo il fileAngularJS factory e prometti oggetto $q che deve essere iniettato in fabbrica.

services.js Code

.factory('Camera', function($q) {
   return {
      getPicture: function(options) {
         var q = $q.defer();

         navigator.camera.getPicture(function(result) {
            q.resolve(result);
         }, function(err) {
            q.reject(err);
         }, options);

         return q.promise;
      }
   }
});

Per utilizzare questo servizio nell'app, è necessario iniettarlo in un controller come dipendenza. L'API della fotocamera Cordova fornisce l'estensionegetPicture metodo, che viene utilizzato per scattare foto utilizzando una fotocamera nativa.

Le impostazioni native della fotocamera possono essere ulteriormente personalizzate passando il options parametro al takePicturefunzione. Copia il codice di esempio sopra menzionato nel tuo controller per attivare questo comportamento. Aprirà l'applicazione della fotocamera e restituirà una funzione di callback riuscita con i dati dell'immagine o la funzione di callback di errore con un messaggio di errore. Avremo anche bisogno di due pulsanti che chiameranno le funzioni che stiamo per creare e dobbiamo mostrare l'immagine sullo schermo.

Codice HTML

<button class = "button" ng-click = "takePicture()">Take Picture</button>
<button class = "button" ng-click = "getPicture()">Open Gallery</button>
<img ng-src = "{{user.picture}}">

Codice controller

.controller('MyCtrl', function($scope, Camera) {
   $scope.takePicture = function (options) {
      var options = {
         quality : 75,
         targetWidth: 200,
         targetHeight: 200,
         sourceType: 1
      };

      Camera.getPicture(options).then(function(imageData) {
         $scope.picture = imageData;;
      }, function(err) {
         console.log(err);
      });
   };
})

L'output apparirà come mostrato nello screenshot seguente.

Se vuoi usare le immagini della tua galleria, l'unica cosa che devi cambiare è il file sourceTypemetodo dal parametro delle opzioni. Questa modifica aprirà una finestra di dialogo popup al posto della fotocamera e ti consentirà di scegliere l'immagine che desideri dal dispositivo.

Puoi vedere il codice seguente, dove il file sourceType l'opzione viene modificata in 0. Ora, quando tocchi il secondo pulsante, si aprirà il menu file dal dispositivo.

Codice controller

.controller('MyCtrl', function($scope, Camera) {
   $scope.getPicture = function (options) {
	   var options = {
         quality : 75,
         targetWidth: 200,
         targetHeight: 200,
         sourceType: 0
      };

      Camera.getPicture(options).then(function(imageData) {
         $scope.picture = imageData;;
      }, function(err) {
         console.log(err);
      });
   };  
})

L'output apparirà come mostrato nello screenshot seguente.

Quando salvi l'immagine che hai scattato, apparirà sullo schermo. Puoi modellarlo come vuoi.

Possono essere utilizzate anche molte altre opzioni, alcune delle quali sono riportate nella tabella seguente.

Parametro genere Dettagli
qualità Numero La qualità dell'immagine, gamma 0-100
destinationType Numero Formato dell'immagine.
sourceType Numero Utilizzato per impostare l'origine dell'immagine.
allowEdit booleano Utilizzato per consentire la modifica dell'immagine.
encodingType Numero Il valore 0 imposterà JPEG e il valore 1 imposterà PNG.
targetWidth Numero Utilizzato per ridimensionare la larghezza dell'immagine.
targetHeight Numero Utilizzato per ridimensionare l'altezza dell'immagine.
tipo di supporto corda Utilizzato per impostare il tipo di supporto.
cameraDirection Numero Il valore 0 imposta la fotocamera posteriore e il valore 1 imposta la fotocamera anteriore.
popoverOptions corda Opzioni solo IOS che specificano la posizione del popover in iPad.
saveToPhotoAlbum booleano Utilizzato per salvare l'immagine in un album fotografico.
corretto orientamento booleano Utilizzato per correggere l'orientamento delle immagini acquisite.