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">
<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的更多相关文章
- 在Ubuntu平台上创建Cordova Camera HTML5应用
在这篇文章中,我们将具体介绍怎样使用Cordova Camera HTML5 应用.很多其它关于Cordova的开发指南,开发人员能够參考文章"the Cordova Guide" ...
- 摄像头(5)使用Camera2 替代过时的Camera API
转自: http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0428/2811.html 概要 从5.0开始(API Level 21 ...
- Android 音视频开发(四):使用 Camera API 采集视频数据
本文主要将的是:使用 Camera API 采集视频数据并保存到文件,分别使用 SurfaceView.TextureView 来预览 Camera 数据,取到 NV21 的数据回调. 注: 需要权限 ...
- Android 新老两代 Camera API 大起底
https://blog.csdn.net/Byeweiyang/article/details/80515192 0.背景简介 最近有一部分相机相关的需求,专注于对拍摄的照片.视频的噪点.色温.明暗 ...
- Android Camera API/Camera2 API 相机预览及滤镜、贴纸等处理
Android Lollipop 添加了Camera2 API,并将原来的Camera API标记为废弃了.相对原来的Camera API来说.Camera2是又一次定义的相机 API,也重构了相机 ...
- 使用Camera API https://developer.mozilla.org/zh-CN/docs/Web/Guide/API/Camera
使用Camera API 在本文章中 获取到所拍摄照片的引用 在网页中展示图片 完整的示例代码 HTML页面: JavaScript文件: 浏览器兼容性 通过Camera API,你可以使用手机的摄像 ...
- Android Camera Api的心得
(一) 前言最近看Camera的api,觉得写的真的不错.现在翻译过来,给大家分享分享,译文可能不太好,大家将就着看哈. (二) 正文1. CameraCamera是Android framework ...
- cordova 内部API 用ssl https,报错
环境:node6.10.1 cordova 6.x, ionic 2.2.1 用cordova/ionic 建立的app我们的api 地址要用https,做了安全加密之后,按照正常的流程,打包,然后跑 ...
- Android Camera API ISO Setting
https://stackoverflow.com/questions/2978095/android-camera-api-iso-setting exif this.mCameraParamete ...
随机推荐
- CentOS下搭建NFS服务器总结
环境介绍: . 服务器: 192.168.0.100 . 客户机: 192.168.0.101 安装软件包: . 服务器和客户机都要安装nfs 和 rpcbind 软件包: yum -y instal ...
- atitit.架构设计---方法调用结果使用异常还是返回值
atitit.架构设计---方法调用结果使用异常还是返回值 1. 应该返回BOOL类型还是异常 1 2. 最终会有四种状况,抛出异常.返回特殊值.阻塞.超时 1 3. 异常的优缺点点 1 4. jav ...
- atitit.表单验证 的dsl 本质跟 easyui ligerui比较
atitit.表单验证的dsl 本质跟 easyui ligerui比较 1. DSL 声明验证 1 2. 自定义规则 1 3. 正则表达式验证,可以扩展实现 2 4. 犯错误消息提示,generic ...
- paip.突破 网站 手机 验证码 的 破解 总结
paip.突破 网站 手机 验证码 的 破解 总结 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn ...
- Django基础——Model篇(一)
到目前为止,当程序涉及到数据库相关操作时,我们一般都会这么操作: (1)创建数据库,设计表结构和字段 (2)使用MySQLdb来连接数据库,并编写数据访问层代码 (3)业务逻辑层去调 ...
- 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 ...
- 为CentOS 6 配置本地YUM源
在网上找了很多为CentOS 6配置本地YUM源的方法,其中有很多是与网络相关的,我只想配个自己用的,结果就发现这个方法比较简单实用,就转过来了. 环境:CentOS 6.0 默认的yum是以网络来安 ...
- 关于C# byte[]与struct的转换
转自:http://blog.chinaunix.net/uid-215617-id-2213082.html Some of the C# code I've been writing recent ...
- 在为知笔记中使用JQuery
为知笔记很好用,深得我心.原来还有一点想法,创建一些自己的模板,用的更加深入一些.后来发现,必要性不大,笔记自带的功能足够满足大多数的需求,如果画蛇添足,反而不利于跨电脑,跨平台使用. 不过近期又有一 ...
- C#之读取web上的xml
一.使用LINQ读取使用Xdocument上的Load方法,可以快速的加载一个XML文档,然后使用LINQ对 加载XML文档进行查询或其他操作,这里仅简单偏历.所以,一旦查询一组元素有返回元素集,就可 ...