Кордова - Камера

Этот плагин используется для фотографирования или использования файлов из галереи изображений.

Шаг 1. Установите плагин камеры

Запустите следующий код в command prompt окно для установки этого плагина.

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

Шаг 2 - Добавление кнопки и изображения

Теперь создадим кнопку для вызова камеры и imgгде изображение будет отображаться после съемки. Это будет добавлено кindex.html внутри div class = "app" элемент.

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

Шаг 3 - Добавление прослушивателя событий

Слушатель событий добавляется внутри onDeviceReady , чтобы убедиться, что Кордова загружена, прежде чем мы начнем ее использовать.

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

Шаг 4 - Добавление функций (фотографирование)

Мы создадим cameraTakePictureфункция, которая передается в качестве обратного вызова нашему слушателю событий. Он будет запущен при нажатии кнопки. Внутри этой функции мы вызовемnavigator.cameraглобальный объект, предоставляемый API плагина. Если фотосъемка прошла успешно, данные будут отправлены наonSuccessфункция обратного вызова, если нет, будет показано предупреждение с сообщением об ошибке. Мы разместим этот код внизуindex.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); 
   } 
}

Когда мы запускаем приложение и нажимаем кнопку, срабатывает собственная камера.

Когда мы сделаем и сохраним картинку, она будет отображаться на экране.

Эту же процедуру можно использовать для получения изображения из локальной файловой системы. Единственное отличие - это функция, созданная на последнем шаге. Вы можете видеть, чтоsourceType добавлен необязательный параметр.

Шаг 1 Б

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

Шаг 2 B

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

Шаг 3 B

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

Шаг 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);
   }

}

Когда мы нажимаем вторую кнопку, вместо камеры открывается файловая система, поэтому мы можем выбрать изображение для отображения.

Этот плагин предлагает множество дополнительных параметров для настройки.

S.No Параметр и детали
1

quality

Качество изображения в диапазоне 0-100. По умолчанию 50.

2

destinationType

DATA_URL или 0 Возвращает строку в кодировке base64.

FILE_URI или 1 Возвращает URI файла изображения.

NATIVE_URI или 2 Возвращает собственный URI изображения.

3

sourceType

PHOTOLIBRARY или 0 Открывает фото-библиотеку.

CAMERA или 1 Открывает родную камеру.

SAVEDPHOTOALBUM или 2 Открывает сохраненный фотоальбом.

4

allowEdit

Позволяет редактировать изображения.

5

encodingType

JPEG или 0 Возвращает изображение в формате JPEG.

PNG или 1 Возвращает изображение в формате PNG.

6

targetWidth

Ширина масштабирования изображения в пикселях.

7

targetHeight

Высота масштабирования изображения в пикселях.

8

mediaType

PICTURE или 0 Разрешает только выбор изображения.

VIDEO или 1 Разрешает только выбор видео.

ALLMEDIA или 2 Позволяет выбрать любой тип носителя.

9

correctOrientation

Используется для корректировки ориентации изображения.

10

saveToPhotoAlbum

Используется для сохранения изображения в фотоальбом.

11

popoverOptions

Используется для установки местоположения всплывающего окна на IOS.

12

cameraDirection

FRONT или 0 Передняя камера.

BACK или 1 Задняя камера.

ALLMEDIA