Ionic - Cordova Camera

O plugin de câmera Cordova usa o native camera para tirar fotos ou obter imagens da galeria de imagens.

Usando a câmera

Abra a pasta raiz do projeto no prompt de comando e, em seguida, baixe e instale o plug-in de câmera Cordova com o seguinte comando.

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

Agora, vamos criar um serviço para usar um plugin de câmera. Vamos usar oAngularJS factory e objeto de promessa $q que precisa ser injetado na fábrica.

Código services.js

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

Para usar este serviço no aplicativo, precisamos injetá-lo em um controlador como uma dependência. A API da câmera Cordova fornece ogetPicture método, que é usado para tirar fotos com uma câmera nativa.

As configurações nativas da câmera podem ser personalizadas adicionalmente, passando o options parâmetro para o takePicturefunção. Copie o exemplo de código mencionado acima para o seu controlador para acionar esse comportamento. Ele abrirá o aplicativo da câmera e retornará uma função de retorno de chamada bem-sucedida com os dados da imagem ou função de retorno de chamada de erro com uma mensagem de erro. Também precisaremos de dois botões que chamarão as funções que estamos prestes a criar e precisamos mostrar a imagem na tela.

Código HTML

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

Código do Controlador

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

A saída terá a aparência mostrada na captura de tela a seguir.

Se você quiser usar imagens da sua galeria, a única coisa que você precisa mudar é o sourceTypemétodo de seu parâmetro de opções. Esta alteração abrirá uma caixa de diálogo em vez da câmera e permitirá que você escolha a imagem que deseja do dispositivo.

Você pode ver o seguinte código, onde o sourceType opção foi alterada para 0. Agora, quando você tocar no segundo botão, ele abrirá o menu de arquivo do dispositivo.

Código do Controlador

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

A saída terá a aparência mostrada na captura de tela a seguir.

Ao salvar a imagem que você tirou, ela aparecerá na tela. Você pode estilizá-lo da maneira que quiser.

Várias outras opções também podem ser usadas, algumas das quais são fornecidas na tabela a seguir.

Parâmetro Tipo Detalhes
qualidade Número A qualidade da imagem, intervalo de 0-100
destinationType Número Formato da imagem.
sourceType Número Usado para definir a fonte da imagem.
allowEdit boleano Usado para permitir a edição da imagem.
encodingType Número O valor 0 definirá JPEG e o valor 1 definirá PNG.
targetWidth Número Usado para dimensionar a largura da imagem.
targetHeight Número Usado para dimensionar a altura da imagem.
tipo de mídia corda Usado para definir o tipo de mídia.
cameraDirection Número O valor 0 definirá a câmera traseira e o valor 1 definirá a câmera frontal.
popoverOptions corda Opções somente IOS que especificam a localização do popover no iPad.
saveToPhotoAlbum boleano Usado para salvar a imagem no álbum de fotos.
correctOrientation boleano Usado para corrigir a orientação das imagens capturadas.