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 相关文章推荐
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
微信小程序select下拉框实现源码
Nov 08 Javascript
vue实现几秒后跳转新页面代码
Sep 09 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
详解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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
PHP的面试题集
2006/11/19 PHP
用PHP读取RSS feed的代码
2008/08/01 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
js 编程笔记 无名函数
2011/06/28 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
Vue的Options用法说明
2020/08/14 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
python中pyqtgraph知识点总结
2021/01/26 Python
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
后勤自我鉴定
2013/10/13 职场文书
党员承诺书怎么写
2014/05/20 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
创业计划书之酒吧
2019/12/02 职场文书
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
Django框架中表单的用法
2022/06/10 Python
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript