使用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">
<ion-content class="has-header padding">
<h1>Dash</h1>
<button ng-click="getPhoto()" class="button button-block button-primary">Take Photo</button>
<img ng-src="{{lastPhoto}}" style="max-width: 100%">
</ion-content>
</ion-view>

在android下运行

执行命令:

ionic build android
ionic run android

运行结果:

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

Using the Cordova Camera API的更多相关文章

  1. 在Ubuntu平台上创建Cordova Camera HTML5应用

    在这篇文章中,我们将具体介绍怎样使用Cordova Camera HTML5 应用.很多其它关于Cordova的开发指南,开发人员能够參考文章"the Cordova Guide" ...

  2. 摄像头(5)使用Camera2 替代过时的Camera API

    转自: http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0428/2811.html 概要 从5.0开始(API Level 21 ...

  3. Android 音视频开发(四):使用 Camera API 采集视频数据

    本文主要将的是:使用 Camera API 采集视频数据并保存到文件,分别使用 SurfaceView.TextureView 来预览 Camera 数据,取到 NV21 的数据回调. 注: 需要权限 ...

  4. Android 新老两代 Camera API 大起底

    https://blog.csdn.net/Byeweiyang/article/details/80515192 0.背景简介 最近有一部分相机相关的需求,专注于对拍摄的照片.视频的噪点.色温.明暗 ...

  5. Android Camera API/Camera2 API 相机预览及滤镜、贴纸等处理

    Android Lollipop 添加了Camera2 API,并将原来的Camera API标记为废弃了.相对原来的Camera API来说.Camera2是又一次定义的相机 API,也重构了相机 ...

  6. 使用Camera API https://developer.mozilla.org/zh-CN/docs/Web/Guide/API/Camera

    使用Camera API 在本文章中 获取到所拍摄照片的引用 在网页中展示图片 完整的示例代码 HTML页面: JavaScript文件: 浏览器兼容性 通过Camera API,你可以使用手机的摄像 ...

  7. Android Camera Api的心得

    (一) 前言最近看Camera的api,觉得写的真的不错.现在翻译过来,给大家分享分享,译文可能不太好,大家将就着看哈. (二) 正文1. CameraCamera是Android framework ...

  8. cordova 内部API 用ssl https,报错

    环境:node6.10.1 cordova 6.x, ionic 2.2.1 用cordova/ionic 建立的app我们的api 地址要用https,做了安全加密之后,按照正常的流程,打包,然后跑 ...

  9. Android Camera API ISO Setting

    https://stackoverflow.com/questions/2978095/android-camera-api-iso-setting exif this.mCameraParamete ...

随机推荐

  1. 关于SQL SERVER的N前缀的理解

    加N前缀指定后面的字符串为UNICODE常量, SQL Server 的 标准中的国家字符数据类型.SQL 使用前缀字符 N 标识这些数据类型及其值. , ),使用 个 个 Unicode字符时,使用 ...

  2. mysql 5.6.17 x64 安装

    下载地址 百度网盘地址:http://pan.baidu.com/share/link?shareid=1895747668&uk=3257050114&fid=234538452 官 ...

  3. django with mysql (part-4)

    step01: write the ( views.py ) again .. vim views.py step02: configure your (urls.py) step03: check ...

  4. 用自己的算法实现startsWith和endsWith功能

    package hanqi; import java.util.Random; import java.util.Scanner; public class zuoye { public static ...

  5. spring源码 — 三、AOP代理生成

    AOP代理生成 AOP就是面向切面编程,主要作用就是抽取公共代码,无侵入的增强现有类的功能.从一个简单的spring AOP配置开始: <?xml version="1.0" ...

  6. python pycurl模块

    一.pycurl概述 PycURl是一个C语言写的libcurl的python绑定库.libcurl 是一个自由的,并且容易使用的用在客户端的 URL 传输库.它的功能很强大,在PyCURL的主页上介 ...

  7. android: 后台执行的定时任务

    Android 中的定时任务一般有两种实现方式,一种是使用 Java API 里提供的 Timer 类, 一种是使用 Android 的 Alarm 机制.这两种方式在多数情况下都能实现类似的效果,但 ...

  8. Entity Framework Code First迁移基本面拾遗

    项目中用到了EF Code First和迁移,但发现有些方面似懂非懂.比如:如何在迁移文件中控制迁移过程?如果在迁移文件中执行SQL语句?如何使用Update-Database的其它参数?数据库在生产 ...

  9. 转:主流数据恢复软件——EasyRecovery/Ashampoo Undeleter/Wise Data Recovery/Recuva/Undelete 360

    转自:Baidu 空间 2012-10-05 13:57 主流数据恢复软件——EasyRecovery/Ashampoo Undeleter/Wise Data Recovery/Recuva/Und ...

  10. linux中ssh可以登录sftp不能登录解决办法

    我的服务器一直正常使用,平时使用secureCRT进行管理,使用secureFX进行文件的上传下载,突然有一天secureFX连接的时候出问题了,secureFX的日志如下: i SecureFX 版 ...