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的ajax需要注意的地方dataType的设置
Aug 12 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
浅析JavaScript中的typeof运算符
Nov 30 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
Vue实现验证码功能
Dec 03 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新手上路(八)
2006/10/09 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
php微信支付接口开发程序
2016/08/02 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
php创建类并调用的实例方法
2019/09/25 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
js操作二进制数据方法
2018/03/03 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
浙大网新C/C++面试解惑
2015/05/27 面试题
异步传递消息系统的作用
2016/05/01 面试题
幼儿园元旦家长感言
2014/02/27 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
python数字图像处理:图像简单滤波
2022/06/28 Python