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 相关文章推荐
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
AngularJs 常用的过滤器
May 15 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 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
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
django框架如何集成celery进行开发
2017/05/24 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
HTML5进度条特效
2014/12/18 HTML / CSS
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
介绍下Java中==和equals的区别
2013/09/01 面试题
cf收人广告词
2014/03/14 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
学校德育工作总结2015
2015/05/11 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
html5实现点击弹出图片功能
2021/07/16 HTML / CSS