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 相关文章推荐
IE的fireEvent方法概述及应用
Feb 22 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
js实现密码强度检验
Jan 15 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
如何检查一个对象是否为空
Apr 11 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关键特性之命名空间实例详解
2017/05/06 PHP
FF IE兼容性的修改小结
2009/09/02 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
布同自制Python函数帮助查询小工具
2011/03/13 Python
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
Python对excel文档的操作方法详解
2018/12/10 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
个人求职信范文分享
2014/01/06 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
学校端午节活动方案
2014/08/23 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
文员岗位职责范本
2015/04/16 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
安全守法证明
2015/06/23 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
Redis唯一ID生成器的实现
2022/07/07 Redis