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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
js对象与打印对象分析比较
Apr 23 Javascript
jQuery使用hide方法隐藏元素自身用法实例
Mar 30 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
cakephp常见知识点汇总
2017/02/24 PHP
Smarty模板配置实例简析
2019/07/20 PHP
javascript RadioButtonList获取选中值
2009/04/09 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
详解python数据结构和算法
2019/04/18 Python
Python中psutil的介绍与用法
2019/05/02 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
Python进行特征提取的示例代码
2020/10/15 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
六年级学生期末评语
2014/12/26 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
Python socket如何解析HTTP请求内容
2022/02/12 Python
深入理解go缓存库freecache的使用
2022/02/15 Golang