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 相关文章推荐
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 Javascript
js+css实现红包雨效果
Jul 12 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
angular6开发steps步骤条组件
Jul 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
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
php文件读取方法实例分析
2015/06/20 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
js css样式操作代码(批量操作)
2009/10/09 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
JS定时器实例
2013/04/17 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
基于vue实现可搜索下拉框定制组件
2020/03/26 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
Python yield使用方法示例
2013/12/04 Python
分析Python读取文件时的路径问题
2018/02/11 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
python SocketServer源码深入解读
2019/09/17 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
用python计算文件的MD5值
2020/12/23 Python
python中@contextmanager实例用法
2021/02/07 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
罗技美国官网:Logitech美国
2020/01/22 全球购物
怎样写演讲稿
2014/01/04 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
获奖感言怎么写
2015/07/31 职场文书
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle