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 相关文章推荐
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
jquery easyui使用心得
Jul 07 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 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 文件上传全攻略
2010/04/28 PHP
php session安全问题分析
2011/06/24 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
jQuery Ajax之load()方法
2009/10/12 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
Python 正则表达式入门(中级篇)
2016/12/07 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
python 穷举指定长度的密码例子
2020/04/02 Python
Python实现动态循环输出文字功能
2020/05/07 Python
Python实现爬取并分析电商评论
2020/06/19 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
教师个人自我评价范文
2014/04/13 职场文书
班干部演讲稿
2014/04/24 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
小学数学课题方案
2014/06/15 职场文书
校园广播稿范文
2015/08/19 职场文书
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题