Using the Cordova Camera API

使用ionic开发一款android或ios应用,估计少不了使用到Camera API,这里记录下使用过程。

创建空的ionic应用

ionic start myTabs tabs

通过cd demo命令,可以看到已经为我们创建了多个文件夹,如下所示:

ls -l
total 48
-rw-r--r--  1 nancy  staff  2786  6  5 01:14 README.md
-rw-r--r--  1 nancy  staff   125  6  5 01:14 bower.json
-rw-r--r--  1 nancy  staff  1062  6  5 01:14 config.xml
-rw-r--r--  1 nancy  staff  1353  6  5 01:14 gulpfile.js
drwxr-xr-x  4 nancy  staff   136  6  5 01:14 hooks
-rw-r--r--  1 nancy  staff    73  6  5 01:12 ionic.project
-rw-r--r--  1 nancy  staff   356  6  5 01:14 package.json
drwxr-xr-x  3 nancy  staff   102  6  5 01:14 platforms
drwxr-xr-x  3 nancy  staff   102  6  5 01:14 plugins
drwxr-xr-x  3 nancy  staff   102  6  5 01:14 scss
drwxr-xr-x  6 nancy  staff   204  6  5 01:14 www

安装并使用Camera插件

在plugins文件夹中放着的是各个使用的插件,通过命令cordova plugin add 插件名来安装我们所需插件,安装Camera插件:

cordova plugin add org.apache.cordova.camera

使用Camera插件api

function takePicture() {

navigator.camera.getPicture(function(imageURI) {

	// imageURI is the URL of the image that we can use for
	// an <img> element or backgroundImage.

}, function(err) {

	// Ruh-roh, something bad happened

}, cameraOptions);
}

创建service

在文件www/js/services.js中,通过添加angular service提供拍照服务:

.factory('Camera', ['$q', function($q) {

return {
getPicture: function(options) {
var q = $q.defer();

	  navigator.camera.getPicture(function(result) {
    	// Do any magic you need
        q.resolve(result);
	  }, function(err) {
    	q.reject(err);
      }, options);

	  	return q.promise;
		}

}
}])
其中,插件Camera说明,详见这里

修改Controller,添加拍照按钮事件

我们修改Controllers.js中第一个controller(DashCtrl),如下:

.controller('DashCtrl', function($scope, Camera) {
	$scope.getPhoto = function() {
    	Camera.getPicture().then(function(imageURI) {
        	console.log(imageURI);
            $scope.lastPhoto = imageURI;
	    }, function(err) {
    	    console.err(err);
    	}, {
        	quality: 75,
        	targetWidth: 320,
        	targetHeight: 320,
        	saveToPhotoAlbum: false
    	});
	};
})	

其中,quality、targetWidth、targetHeight等参数说明,见这里

使用AngularJS Whitelisting

添加config:

module.config(function($compileProvider){

$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file| tel):/);
})

修改html,添加拍照按钮和返回照片

在www/templates/tab-dash.htm中添加拍照按钮和事件,并返回照片信息,显示:

<ion-view title="Dashboard">


Dash





在android下运行

执行命令:

ionic build android
ionic run android

运行结果:

转自:http://www.yemeishu.com/using_camera/

你可能感兴趣的:(Cordova)