Ionic项目中Native Camera的使用方法


Posted in Javascript onJune 07, 2017

本文介绍如何在ionic项目中使用设备的camera。

Ionic版本:v3.2.0 / 2017-05-10 / MIT Licensed / Release Notes

1)第一步是安装ionic-native/core。所有用到Native的功能,这一步不能省。npm install @ionic-native/core --save

ps:关于第一步,官方的说明是ionic-native/core是默认就包含在每一个Ionic应用里面的,注意下图中的红色矩形文字。

言外之意如果开发环境都是最新版本,期间也没有经历Ionic版本的升级,是可以忽略这一步的,不需要开发者手动安装。

Ionic项目中Native Camera的使用方法

但是,在实际开发过程中,很多时候可能会遇到下面这样的问题:

Ionic项目中Native Camera的使用方法

原因无非还是因为升级。。。升级。。。升级。我的项目创建是基于Ionic v2.2.2版本。但是期间经历过Ionic官方升级到v3.2.0版本。

所以解决的办法就是:

Ionic项目中Native Camera的使用方法

2)其次是给自己的项目添加cordova插件。ionic cordova plugin add cordova-plugin-camera

Ionic项目中Native Camera的使用方法

3)安装相应的node_moudles。npm install --save @ionic-native/camera

4)找到代码src->app下的app.moudle.ts文件, Add this plugin to your app's module。这一步可以放到最后做,但是一定不要忘。

Ionic项目中Native Camera的使用方法

5)其他就是添加你如何使用Camera的代码。

Ionic项目中Native Camera的使用方法

Ionic项目中Native Camera的使用方法

6)编码工作完成后,就是使用Chrome测试cordova插件了。

ionic cordova platform add browser

ionic cordova run browser

不是直接ionic serve的原因参见:http://www.cnblogs.com/crazyprogrammer/p/6878981.html注意Chrome阻止网页使用摄像头的时候,记得修改为允许。

Ionic项目中Native Camera的使用方法

Ionic项目中Native Camera的使用方法

参考:

Ionic官网:http://ionicframework.com/docs/native/camera/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 Javascript
详解angular ui-grid之过滤器设置
Jun 07 #Javascript
微信小程序 地图map实例详解
Jun 07 #Javascript
微信小程序 http请求的session管理
Jun 07 #Javascript
Ionic2开发环境搭建教程
Aug 20 #Javascript
微信小程序Redux绑定实例详解
Jun 07 #Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 #Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 #Javascript
You might like
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
python中的全局变量用法分析
2015/06/09 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
班组长安全生产职责
2013/12/16 职场文书
高二政治教学反思
2014/02/01 职场文书
小学毕业感言150字
2014/02/05 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
公路绿化方案
2014/05/12 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
自我推荐信格式模板
2015/03/24 职场文书
金陵十三钗观后感
2015/06/04 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL
再谈python_tkinter弹出对话框创建
2022/03/20 Python