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 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
Ionic如何创建APP项目
Jun 03 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
小程序关于请求同步的总结
May 05 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 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脚本的10个技巧(1)
2006/10/09 PHP
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
javascript操作css属性
2013/12/30 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
全面了解js中的script标签
2016/07/04 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
跟老齐学Python之Import 模块
2014/10/13 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
Django CBV类的用法详解
2019/07/26 Python
python程序 创建多线程过程详解
2019/09/23 Python
通过python3实现投票功能代码实例
2019/09/26 Python
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
函授大学生自我鉴定
2014/02/05 职场文书
小学敬老月活动方案
2014/02/11 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
商务英语专业求职信
2014/06/26 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书