Ionic - Cordova Kamera

Das Cordova Kamera Plugin verwendet die native camera zum Aufnehmen von Bildern oder zum Abrufen von Bildern aus der Bildergalerie.

Kamera benutzen

Öffnen Sie Ihren Projektstammordner an der Eingabeaufforderung und laden Sie das Cordova-Kamera-Plugin mit dem folgenden Befehl herunter und installieren Sie es.

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

Jetzt erstellen wir einen Dienst für die Verwendung eines Kamera-Plugins. Wir werden die verwendenAngularJS factory und Versprechen Objekt $q das muss in die Fabrik eingespritzt werden.

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

Um diesen Dienst in der App zu verwenden, müssen wir ihn als Abhängigkeit in einen Controller einfügen. Cordova Kamera API bietet diegetPicture Methode, die zum Aufnehmen von Fotos mit einer nativen Kamera verwendet wird.

Die nativen Kameraeinstellungen können zusätzlich durch Übergeben der angepasst werden options Parameter zum takePictureFunktion. Kopieren Sie das oben genannte Codebeispiel auf Ihren Controller, um dieses Verhalten auszulösen. Es öffnet die Kameraanwendung und gibt eine erfolgreiche Rückruffunktion mit den Bilddaten oder eine Fehlerrückruffunktion mit einer Fehlermeldung zurück. Wir benötigen außerdem zwei Schaltflächen, die die Funktionen aufrufen, die wir erstellen möchten, und wir müssen das Bild auf dem Bildschirm anzeigen.

HTML Quelltext

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

Controller-Code

.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);
      });
   };
})

Die Ausgabe sieht wie im folgenden Screenshot gezeigt aus.

Wenn Sie Bilder aus Ihrer Galerie verwenden möchten, müssen Sie nur die ändern sourceTypeMethode aus Ihrem Optionsparameter. Diese Änderung öffnet ein Dialogfeld anstelle der Kamera und ermöglicht es Ihnen, das gewünschte Bild vom Gerät auszuwählen.

Sie können den folgenden Code sehen, in dem die sourceType Option wird in geändert 0. Wenn Sie jetzt auf die zweite Schaltfläche tippen, wird das Dateimenü auf dem Gerät geöffnet.

Controller-Code

.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);
      });
   };  
})

Die Ausgabe sieht wie im folgenden Screenshot gezeigt aus.

Wenn Sie das aufgenommene Bild speichern, wird es auf dem Bildschirm angezeigt. Sie können es so gestalten, wie Sie möchten.

Es können auch mehrere andere Optionen verwendet werden, von denen einige in der folgenden Tabelle aufgeführt sind.

Parameter Art Einzelheiten
Qualität Nummer Die Bildqualität liegt zwischen 0 und 100
Zieltyp Nummer Format des Bildes.
Quelle Typ Nummer Dient zum Einstellen der Bildquelle.
allowEdit Boolescher Wert Dient zum Bearbeiten des Bildes.
encodingType Nummer Mit Wert 0 wird JPEG und mit Wert 1 PNG eingestellt.
targetWidth Nummer Wird zum Skalieren der Bildbreite verwendet.
targetHeight Nummer Wird zum Skalieren der Bildhöhe verwendet.
Medientyp Zeichenfolge Wird zum Einstellen des Medientyps verwendet.
cameraDirection Nummer Mit Wert 0 wird die hintere Kamera und mit Wert 1 die vordere Kamera eingestellt.
popoverOptions Zeichenfolge Nur IOS-Optionen, die den Popover-Speicherort auf dem iPad angeben.
saveToPhotoAlbum Boolescher Wert Wird zum Speichern des Bildes im Fotoalbum verwendet.
korrekte Ausrichtung Boolescher Wert Wird zum Korrigieren der Ausrichtung der aufgenommenen Bilder verwendet.