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 相关文章推荐
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
Prototype框架详解
Nov 25 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
vue项目前端错误收集之sentry教程详解
May 27 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
小偷PHP+Html+缓存
2006/12/20 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
深入理解Python分布式爬虫原理
2017/11/23 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
Python列表切片常用操作实例解析
2019/12/16 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
应用数学专业求职信
2014/03/14 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
师德师风事迹材料
2014/12/20 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
读书笔记怎么写
2015/07/01 职场文书
职工宿舍管理制度
2015/08/05 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
python实现会员管理系统
2022/03/18 Python