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 相关文章推荐
json 入门基础教程 推荐
Oct 31 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
详解微信小程序开发之下拉刷新 上拉加载
Nov 24 Javascript
jQuery使用方法
Feb 04 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
详解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数据类型转换
2014/01/09 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
javascript 三种编解码方式
2010/02/01 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
Firefox中autocomplete="off" 设置不起作用Bug的解决方法
2011/03/25 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
python 如何区分return和yield
2020/09/22 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
外语专业毕业生自我评价分享
2013/10/05 职场文书
高中化学教学反思
2014/01/13 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
2015年底工作总结范文
2015/05/15 职场文书
高中政治教学反思
2016/02/23 职场文书
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers