使用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. CentOS下搭建NFS服务器总结

    环境介绍: . 服务器: 192.168.0.100 . 客户机: 192.168.0.101 安装软件包: . 服务器和客户机都要安装nfs 和 rpcbind 软件包: yum -y instal ...

  2. atitit.架构设计---方法调用结果使用异常还是返回值

    atitit.架构设计---方法调用结果使用异常还是返回值 1. 应该返回BOOL类型还是异常 1 2. 最终会有四种状况,抛出异常.返回特殊值.阻塞.超时 1 3. 异常的优缺点点 1 4. jav ...

  3. atitit.表单验证 的dsl 本质跟 easyui ligerui比较

    atitit.表单验证的dsl 本质跟 easyui ligerui比较 1. DSL 声明验证 1 2. 自定义规则 1 3. 正则表达式验证,可以扩展实现 2 4. 犯错误消息提示,generic ...

  4. paip.突破 网站 手机 验证码 的 破解 总结

    paip.突破 网站 手机 验证码 的 破解 总结  作者Attilax  艾龙,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn ...

  5. Django基础——Model篇(一)

    到目前为止,当程序涉及到数据库相关操作时,我们一般都会这么操作:    (1)创建数据库,设计表结构和字段    (2)使用MySQLdb来连接数据库,并编写数据访问层代码    (3)业务逻辑层去调 ...

  6. Leetcode-462 Minimum Moves to Equal Array Elements II

    #462.   Minimum Moves to Equal Array Elements II Given a non-empty integer array, find the minimum n ...

  7. 为CentOS 6 配置本地YUM源

    在网上找了很多为CentOS 6配置本地YUM源的方法,其中有很多是与网络相关的,我只想配个自己用的,结果就发现这个方法比较简单实用,就转过来了. 环境:CentOS 6.0 默认的yum是以网络来安 ...

  8. 关于C# byte[]与struct的转换

    转自:http://blog.chinaunix.net/uid-215617-id-2213082.html Some of the C# code I've been writing recent ...

  9. 在为知笔记中使用JQuery

    为知笔记很好用,深得我心.原来还有一点想法,创建一些自己的模板,用的更加深入一些.后来发现,必要性不大,笔记自带的功能足够满足大多数的需求,如果画蛇添足,反而不利于跨电脑,跨平台使用. 不过近期又有一 ...

  10. C#之读取web上的xml

    一.使用LINQ读取使用Xdocument上的Load方法,可以快速的加载一个XML文档,然后使用LINQ对 加载XML文档进行查询或其他操作,这里仅简单偏历.所以,一旦查询一组元素有返回元素集,就可 ...