Ionic项目中Native Camera的使用方法

本文介绍如何在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 v2.2.2版本。但是期间经历过Ionic官方升级到v3.2.0版本。

所以解决的办法就是：

2）其次是给自己的项目添加cordova插件。ionic cordova plugin add cordova-plugin-camera

3）安装相应的node_moudles。npm install --save @ionic-native/camera

4）找到代码src->app下的app.moudle.ts文件， Add this plugin to your app's module。这一步可以放到最后做，但是一定不要忘。

5）其他就是添加你如何使用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官网：http://ionicframework.com/docs/native/camera/

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Ionic2开发环境搭建教程

    Ionic2开发环境搭建教程

    关于网络环境:ionic开发环境不需要FQ.我这里没有设置FQ,亲测可行.但是angular2的开发环境搭建,则需要FQ网络,否则很多包会安装失败. 建议大家在搭建开发环境的时候,不要参考百度出来的各种博客,太零碎,重要的是时间久,也不一定写的对.强烈建议参考官网引导教程.http://ionicframework.com/gettingstarted/ 1.下载安装Node.js.官网地址:https://nodejs.org/en/我安装的是v7.10.0版本. 2.安装完成后通过命令行 n

  • Ionic3 UI组件之Gallery Modal详解

    Ionic3 UI组件之Gallery Modal详解

    Gallery Modal可以理解为相册的预览界面.可以显示网络图片,也可以显示base64Image. 在这个例子中,我用来实现图片的预览功能. 相机拍照,或者相册选择图片后,用缩略图组件显示缩略图,点击缩略图可以预览大图. 组件特性: 支持手势缩放 可加载网络图片,也可以加载本地图片或者base64Image 参考地址:https://github.com/nikini/ionic-gallery-modal 1)安装包: npm install ionic-gallery-modal --

  • ionic实现可滑动的tab选项卡切换效果

    ionic实现可滑动的tab选项卡切换效果

    利用ionic的slide-box组件实现可滑动的tab,主要是监听tab点击以及slide页面滑动的事件,做相应的处理,用ng-repeat循环,优化.简略了代码,有需要的同学可以看看. 先来张效果图: 用到的css代码: .tab_default{ border-bottom:solid 1px #F2F2F2; padding:6px 0; } .tab_select{ border-bottom:solid 1px #3E89F5; box-shadow:0 -3px 8px #C1D3

  • ionic组件ion-tabs选项卡切换效果实例

    ionic组件ion-tabs选项卡切换效果实例

    介绍 ion-tabs是ionic中的选项卡组件,路由使用的是angular-ui-router.js.因此必须先掌握uiRoute. 效果图 实例代码 index.html <body ng-app="starter"> <!--ion-nav-view用来渲染模板--> <ion-nav-view></ion-nav-view> </body> tab-index.html <ion-tabs class="

  • url重写IIRF(Ionic's Isapi Rewrite Filter)手册第1/2页

    说明 IIRF与ISAPI_Rewrite的规划区别只在于IIRF不需要使用转义字符\,而ISAPI_Rewrite则需要使用转义字符\. 介绍 IIRF是一款开源的重写URL过滤器,类似于Apache的URL重写,基于VC8.0(可以用Visual Studio2005或Visual C++ 2005 Express重新编译)开发.它可以运行在IIS5.0+,支持ASP,ASP.NET,PHP等许多格式.相对比ASP.NET2.0自带的URL重写,具有更好的性能和许多我们所需要特性,重要的一点

  • Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析

    Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析

    引言 在诺亚财富项目中,使用到了通讯录,如果只是简单的查看,我个人觉得可能过于单调,于是就在查看的基础上,增加了点击滑动的效果.目的有两个:1.体验不错.2.通讯录的数据量较大,我们在点击一个模块的同时,使这个模块滑动至最上层,可视范围也会变大. 效果 点击一个模块,页面即开始向上滑动,直到这个模块至于页面最上层. 这是点击前的地方,我们点击运营中心: 点击后就会有一个滑动的动画使这个模块滑动到顶部: 实现 获取元素,动态生成id 我们在点击一个元素的同时,我们需要让程序知道我们点击了哪里,是具

  • ionic实现滑动的三种方式

    在移动端受屏幕大小所限,展示内容很多的时候,就要使部分区域进行滑动.本文展示项目中所有到的几种方式,大家可以看自己的需求选择合适的滑动方式.实现滑动的基本原理,有两个容器A.B,假如A在外层,B在内层:外层的A宽度或高度固定,内层容器B宽度或者高度大于A即可实现滚动. 实现方式 1). ion-scroll 利用ionic自带的滑动指令 <ion-view view-title="Dashboard"> <ion-content class="padding

  • Ionic项目中Native Camera的使用方法

    Ionic项目中Native Camera的使用方法

    本文介绍如何在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应用里面的,注意下图中的红色矩形文字. 言外之意如果开发环境都

  • SSM项目中配置LOG4J日志的方法

    本文介绍了SSM项目中配置LOG4J日志的方法,分享给大家,具体如下: 在pom文件中添加依赖 . <!--Log4j2配置--> <dependency> <groupId>org.apache.logging.log4j</groupId> <artifactId>log4j-core</artifactId> <version>2.8.1</version> </dependency> <

  • SpringBoot项目中使用redis缓存的方法步骤

    本文介绍了SpringBoot项目中使用redis缓存的方法步骤,分享给大家,具体如下: Spring Data Redis为我们封装了Redis客户端的各种操作,简化使用. - 当Redis当做数据库或者消息队列来操作时,我们一般使用RedisTemplate来操作 - 当Redis作为缓存使用时,我们可以将它作为Spring Cache的实现,直接通过注解使用 1.概述 在应用中有效的利用redis缓存可以很好的提升系统性能,特别是对于查询操作,可以有效的减少数据库压力. 具体的代码参照该

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • 在vue项目中使用sass的配置方法

    在vue项目中使用sass的配置方法

    1.创建一个基于 webpack 模板的新项目 $ vue init webpack myvue 2.在当前目录下,安装依赖 $ cd myvue $ npm install 3.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 4.在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /

  • vue项目中使用百度地图的方法

    vue项目中使用百度地图的方法

    1.在百度地图申请密钥: http://lbsyun.baidu.com/  将 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥" ></script> 中的 密钥替换成你申请的,在 vue项目的index.html引用. 2. 在build 文件下下的 webpack.base.conf.js贴入代码 externals: {

  • 在vue项目中使用md5加密的方法

    npm安装: npm install --save js-md5 1.在需要使用的项目文件中引入: import md5 from 'js-md5'; 使用: md5('hello world')  // 5eb63bbbe01eeed093cb22bb8f5acdc3 2.或者在main.js文件中将md5转换成vue原型: import md5 from 'js-md5'; Vue.prototype.$md5 = md5; 使用: this.$md5('hello world') // 5

  • 在vue项目中正确使用iconfont的方法

    1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至项目 3.下载至本地 4.把我们下载好的文件iconfont.css和iconfont.ttf放到项目assets文件夹下(可创建一个css文件或iconfont文件) 5.在main.js中引入iconfont.css样式 import './assets/iconfont/iconfont.css' 6.在在vue文件中引用<i class="iconfont icon-zitigui-xianx

  • Spring Boot项目中定制拦截器的方法详解

    这篇文章主要介绍了Spring Boot项目中定制拦截器的方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Servlet 过滤器属于Servlet API,和Spring关系不大.除了使用过滤器包装web请求,Spring MVC还提供HandlerInterceptor(拦截器)工具.根据文档,HandlerInterceptor的功能跟过滤器类似,但拦截器提供更精细的控制能力:在request被响应之前.request被响应之后.视

  • 在SpringBoot项目中的使用Swagger的方法示例

    在SpringBoot项目中的使用Swagger的方法示例

    一. 首先Swagger是什么? Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模型紧密集成到服务器端的代码,允许API来始终保持同步.Swagger官方API文档:https://swagger.io/ 作用:   1. 接口的文档在线自动生成.   2. 功能测试. Swagger的主见介绍:    Swagger Codegen: 通过Codegen 可

随机推荐