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 相关文章推荐
用javascript实现自定义标签
May 08 Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
dojo随手记 gird组件引用
Feb 24 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
Javascript原型链的原理详解
Jan 05 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
js实现导航吸顶效果
Feb 24 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
vue-cli3单页构建大型项目方案
Apr 07 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/01/11 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
jQuery function的正确书写方法
2013/08/02 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
Python调用命令行进度条的方法
2015/05/05 Python
Python字符串逐字符或逐词反转方法
2015/05/21 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
Python中的With语句的使用及原理
2020/07/29 Python
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
Linux操作面试题
2015/02/11 面试题
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
思想政治表现评语
2015/01/04 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python