В поредицата публикации в блога на Ionic по-рано видяхме как да настроим йонна среда за разработка Настройване на среда за разработка за йонна рамка, сега ще изградим приложението, което използва Camera API

В наши дни смартфоните имат поне една камера, ако не и две. Толкова много приложения използват функционалността на камерата на потребителя, за да кликват върху снимки и да получават достъп до поддръжката на телефонната галерия на потребителите за техните приложения. за добавяне на страхотни функции в тяхното приложение

Приставка

Първо, трябва да инсталираме приставката за API на камерата. От ionic CLI, cd във вашето приложение/работна директория

Предполагам, че вече сте добавили платформата по ваш избор (android, ios или може и двете)

Инсталирайте приставката за камера Apache Cordova

[код] добавка за cordova org.apache.cordova.camera [/код]

Инсталирахме API на камерата и сега можем да използваме функционалността на камерата, като напишем някакъв Javascript код, както е показано по-долу:

В кода ние просто създаваме контролер (takePhoto) и инжектираме $scope и $cordovaCamera. След това създайте функция с $scope ($scope.takePhoto) и извикайте своя UI изглед

[code language=”javascript”]
.controller('takePhoto', function($scope, $cordovaCamera){
$scope.takePhoto = function() {
var options = {< br /> fileKey: “аватар”,
име на файл: “image.png”,
chunkedMode: “false”,
mimeType: “false”,
качество: 75,< br /> destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 300 ,
targetHeight: 300,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};
$cordovaCamera.getPicture(options).then(function(imageData) {< br /> $scope.imgURI = “data:image/jpeg;base64,” + imageData;
}, function(err) {
// Възникна грешка. Покажете съобщение на потребителя
});
};
});
[/код]

[code language=”html”]
‹ion-pane›
‹ion-header-bar class=”bar-stable”›
‹h1 class=”title” align-title= ”center”›Приложение за йонна камера‹/h1›
‹/ion-header-bar›
‹ion-content ng-controller=”takePhoto”›
‹button class=”button button -positive button-full” ng-click=
“takePhoto()”›Take Picture‹/button›
‹div class=”center”›
‹img ng-show=”imgURI !== undefined” ng-src=”{{imgURI}}”›
‹img ng-show=”imgURI === undefined” ng-src=”img/img.png”›
‹/div›
‹/ion-content›
‹/ion-pane›
[/code]

И можете да намерите пълния работещ код на Github

Изходните изображения по-долу, показващи работата на плъгина за камера cordova:

Благодаря!!.