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 mobile做幻灯播放效果实现步骤
Jan 04 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
js自定义select下拉框美化特效
May 12 Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
详解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中数组的三种排序方法分享
2012/05/07 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
Vue Promise的axios请求封装详解
2018/08/13 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
python实现操作文件(文件夹)
2019/10/31 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
澳大利亚百货公司:David Jones
2018/02/08 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
体育教育毕业生自荐信
2013/11/21 职场文书
质检部职责
2013/12/28 职场文书
安全标准化实施方案
2014/02/20 职场文书
2015年测量员工作总结
2015/05/23 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
python识别围棋定位棋盘位置
2021/07/26 Python
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏