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 ...
随机推荐
- 关于SQL SERVER的N前缀的理解
加N前缀指定后面的字符串为UNICODE常量, SQL Server 的 标准中的国家字符数据类型.SQL 使用前缀字符 N 标识这些数据类型及其值. , ),使用 个 个 Unicode字符时,使用 ...
- mysql 5.6.17 x64 安装
下载地址 百度网盘地址:http://pan.baidu.com/share/link?shareid=1895747668&uk=3257050114&fid=234538452 官 ...
- django with mysql (part-4)
step01: write the ( views.py ) again .. vim views.py step02: configure your (urls.py) step03: check ...
- 用自己的算法实现startsWith和endsWith功能
package hanqi; import java.util.Random; import java.util.Scanner; public class zuoye { public static ...
- spring源码 — 三、AOP代理生成
AOP代理生成 AOP就是面向切面编程,主要作用就是抽取公共代码,无侵入的增强现有类的功能.从一个简单的spring AOP配置开始: <?xml version="1.0" ...
- python pycurl模块
一.pycurl概述 PycURl是一个C语言写的libcurl的python绑定库.libcurl 是一个自由的,并且容易使用的用在客户端的 URL 传输库.它的功能很强大,在PyCURL的主页上介 ...
- android: 后台执行的定时任务
Android 中的定时任务一般有两种实现方式,一种是使用 Java API 里提供的 Timer 类, 一种是使用 Android 的 Alarm 机制.这两种方式在多数情况下都能实现类似的效果,但 ...
- Entity Framework Code First迁移基本面拾遗
项目中用到了EF Code First和迁移,但发现有些方面似懂非懂.比如:如何在迁移文件中控制迁移过程?如果在迁移文件中执行SQL语句?如何使用Update-Database的其它参数?数据库在生产 ...
- 转:主流数据恢复软件——EasyRecovery/Ashampoo Undeleter/Wise Data Recovery/Recuva/Undelete 360
转自:Baidu 空间 2012-10-05 13:57 主流数据恢复软件——EasyRecovery/Ashampoo Undeleter/Wise Data Recovery/Recuva/Und ...
- linux中ssh可以登录sftp不能登录解决办法
我的服务器一直正常使用,平时使用secureCRT进行管理,使用secureFX进行文件的上传下载,突然有一天secureFX连接的时候出问题了,secureFX的日志如下: i SecureFX 版 ...