Cordova - Câmera

Este plugin é usado para tirar fotos ou usar arquivos da galeria de imagens.

Etapa 1 - Instale o plug-in da câmera

Execute o seguinte código no command prompt janela para instalar este plugin.

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

Etapa 2 - Adicionando botão e imagem

Agora, vamos criar o botão para chamar a câmera e imgonde a imagem será exibida uma vez tirada. Isso será adicionado aindex.html dentro de div class = "app" elemento.

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

Etapa 3 - Adicionando Listener de Eventos

O ouvinte de evento é adicionado dentro do onDeviceReady para garantir que o Cordova seja carregado antes de começarmos a usá-lo.

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

Etapa 4 - Adicionar funções (tirar foto)

Vamos criar o cameraTakePicturefunção que é passada como um retorno de chamada para nosso ouvinte de evento. Ele será disparado quando o botão for tocado. Dentro desta função, vamos chamar onavigator.cameraobjeto global fornecido pela API do plugin. Se tirar a foto com sucesso, os dados serão enviados para oonSuccessfunção callback, caso contrário, será mostrado o alerta com mensagem de erro. Colocaremos esse código na parte inferior doindex.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); 
   } 
}

Quando executamos o aplicativo e pressionamos o botão, a câmera nativa será acionada.

Quando tiramos e salvamos a foto, ela será exibida na tela.

O mesmo procedimento pode ser usado para obter a imagem do sistema de arquivos local. A única diferença é a função criada na última etapa. Você pode ver que osourceType parâmetro opcional foi adicionado.

Etapa 1 B

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

Etapa 2 B

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

Etapa 3 B

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

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

}

Quando pressionamos o segundo botão, o sistema de arquivos será aberto em vez da câmera para que possamos escolher a imagem a ser exibida.

Este plugin oferece muitos parâmetros opcionais para personalização.

S.No	Parâmetro e detalhes
1	quality Qualidade da imagem na faixa de 0-100. O padrão é 50.
2	destinationType DATA_URL ou 0 Retorna string codificada em base64. FILE_URI ou 1 Retorna o URI do arquivo de imagem. NATIVE_URI ou 2 Retorna o URI nativo da imagem.
3	sourceType PHOTOLIBRARY ou 0 Abre a biblioteca de fotos. CAMERA ou 1 Abre a câmera nativa. SAVEDPHOTOALBUM ou 2 Abre o álbum de fotos salvo.
4	allowEdit Permite edição de imagem.
5	encodingType JPEG ou 0 Retorna imagem codificada em JPEG. PNG ou 1 Retorna imagem codificada em PNG.
6	targetWidth Largura de dimensionamento da imagem em pixels.
7	targetHeight Altura do dimensionamento da imagem em pixels.
8	mediaType PICTURE ou 0 Permite apenas a seleção de fotos. VIDEO ou 1 Permite apenas a seleção de vídeo. ALLMEDIA ou 2 Permite todas as seleções de tipo de mídia.
9	correctOrientation Usado para corrigir a orientação da imagem.
10	saveToPhotoAlbum Usado para salvar a imagem no álbum de fotos.
11	popoverOptions Usado para definir a localização do popover no IOS.
12	cameraDirection FRONT ou 0 Câmera frontal. BACK ou 1 Câmera traseira. ALLMEDIA