Using cordova-camera plugin in your Ionic 2 Apps
来源:互联网 发布:数据库中数据类型 编辑:程序博客网 时间:2024/05/10 01:20
http://tphangout.com/using-cordova-camera-plugin-in-your-ionic-2-apps/
Hi friends,
Hope you are all well. Now this post deals with using the cordova-camera plugin in your Ionic 2 apps to take photos using your smartphone camera. As with my previous posts I will try to keep this as much simple as possible.
The complete code of this tutorial can be found here.
A screencast of this tutorial is available below
Create an Ionic 2 application using the below command.
Let’s get started. Once you have created the Ionic 2 application; install the camera plugin using the below command.
Now once the plugin is installed, open up the app in an editor of your choice, navigate to app -> pages -> home and in the home.html file add the below code in between the <ion-content> tags.
Now this will add a button which upon clicking would trigger a takepic function and a card that holds an image.
If you with to use ionic-native to access camera, please skip the below steps and read the update at the end of this post.
Lets wire this up to the takepic function. Open up home.js and add the below code.
Let’s break this down.
- NgZone is used to execute services outside of angular and then get back in using run(). Read more about ithere.
- Options specify the options considered while taking/saving the picture.
- navigator.camera is global when you install the plugin and can be used anywhere in the app.
- The image is captured and stored in the form of base64 encoding and then placed in this.image which is then used in the src attribute in the img tag.
Now this code is enough to use camera in our app. To execute this in your android phone please add the android platform using the below command.
and then run the app (on your mobile or emulator) using the below command.
This is a very simple way to use the smartphone camera in our app for taking pictures using the cordova camera plugin in our Ionic 2 apps.
Hope this helped you guys. Peace..
Update:
The same could be done using ionic-native a new successor to ngCordova from driftyco. Once you install the plugin install ionic-native using the below command
Now modify the home.js as shown below:
Things to notice:
- We use numbers now to denote sourceType, destinationType and encodingType.
- Camera.getPicture returns a promise which is then resolved.
I have made a repo on this updated code and this is available here.
Thanks.
- Using cordova-camera plugin in your Ionic 2 Apps
- 在Ionic 2中使用TypeScript使用第三方cordova插件(Using a third-party cordova plugin in Ionic 2 with TypeScript)
- ionic添加调取摄像头插件--cordova-plugin-camera
- ionic cordova plugin 错误
- ionic添加cordova插件-Camera
- ionic添加cordova-plugin-camera拍照插件后build报错
- ionic工程引入cordova plugin camera 插件编译报错问题总结
- cordova-plugin-camera及cordova-plugin-crop调用例程
- ionic如何使用cordova-plugin-alipay支付
- ionic cordova-plugin-file-transfer插件 Skipping 'cordova-plugin-file' for android
- Ionic Cordova IOS build fails after adding media plugin
- Ionic安装cordova-plugin-crosswalk-webview报错
- ionic学习之扫描二维码cordova-plugin-cszbar
- A Step-by-Step Guide to Using iAd Workbench to Promote Your iOS Apps June 11, 2013, Raymond in Badmi
- 华为机型 cordova-plugin-camera从图库获取报错
- Shiny Apps Gallery using Plotly in R
- Using WinPcap in your programs
- Using JsonCpp in your project
- 面向对象——this详解
- JDBC处理事务
- mongoose报错:RangeError: Maximum call stack size exceeded
- java并发编程实践(1)intro
- 【转】ios打包ipa的四种实用方法(.app转.ipa)
- Using cordova-camera plugin in your Ionic 2 Apps
- servlet
- Bounding Box label code
- 使用Python Decorator实现数据驱动测试
- 综述 - 【Dr.Elephant源码分析系列文章-1】
- C++中的头文件和源文件:如何写头文件
- eclipse 中.classpath和.project和.settings的作用
- Oracle 10g 每日自动备份(Windows Server 2008 R2 Datacenter)
- jQuery UI的简单使用,轻松实现二级菜单