拍照是經常用到的，所以記錄一下 拍照的代碼...

1.

ionic start camera blank
cd camera

ionic platform add ios

2. 添加插件，這裏很熟悉....

cordova plugin add org.apache.cordova.camera

3.

可以從這裏下載 ngcordova.min.js 或者ngcordova.js

然後添加到www/lib/ionic/js 文件夾下 （不強求....）

4.在index.html 引用ngcordova.min.js 如下 必須在cordova.js之前

 <html>

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

     <title></title>

     <link href="lib/ionic/css/ionic.css" rel="stylesheet">

     <link href="css/style.css" rel="stylesheet">

     <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above

     <link href="css/ionic.app.css" rel="stylesheet">

     -->

     <!-- ionic/angularjs js -->

     <script src="lib/ionic/js/ionic.bundle.js"></script>

     <!-- cordova script (this will be a 404 during development) -->

     <script src="lib/ionic/js/ng-cordova.min.js"></script>

     <script src="cordova.js"></script>

     <!-- your app's js -->

     <script src="js/app.js"></script>

   </head>

5. 在app.js中 聲明引用了 ngcordova

如

angular.module('starter', ['ionic','ngCordova'])

　　6. 添加控制器  在app.js中

如

 .controller("cameraController", function($scope, $cordovaCamera) {

     $scope.takePicture = function() {

         var options = {

             quality : 75,

             destinationType : Camera.DestinationType.DATA_URL,

             sourceType : Camera.PictureSourceType.CAMERA,

             allowEdit : true,

             encodingType: Camera.EncodingType.JPEG,

             targetWidth: 300,

             targetHeight: 300,

             popoverOptions: CameraPopoverOptions,

             saveToPhotoAlbum: false

         };

         $cordovaCamera.getPicture(options).then(function(imageData) {

             $scope.imgURI = "data:image/jpeg;base64," + imageData;

         }, function(err) {

             // An error occured. Show a message to the user

         });

     }

 });

7.在 index.html中顯示 調用

  <body ng-app="starter">

     <ion-pane>

       <ion-header-bar class="bar-stable">

         <h1 class="title">Ionic camera demo</h1>

       </ion-header-bar>

      <ion-content ng-controller="cameraController">

     <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}">

     <img ng-show="imgURI === undefined" ng-src="http://placehold.it/300x300">

     <button class="button" ng-click="takePicture()">Take Picture</button>

     </ion-content>

     </ion-pane>

   </body>

ionic ngcordova camera的更多相关文章

  1. ionic ngCordova插件安装

    ngCordova的安装配置 官网提供了两种安装的方法: 1. 使用bower来安装 2. 下载zip文件 推荐使用bower安装,在使用bower之前,我们电脑中需要先配置bower.bower的配 ...

  2. ionic ngcordova map 地圖

    幾乎每個APP都會有地圖 所以在這裏記錄一下 1.在index.html 中 <script src="https://maps.googleapis.com/maps/api/js? ...

  3. ionic ngcordova barcodescanner

    二維碼掃描  最近有一個項目用到了 二維碼的掃描  總結一下 記錄一下 1.  ionic platform add ios 2. 添加插件 cordova plugin add https://gi ...

  4. ionic 照相机 Camera

    1.官网: https://ionicframework.com/docs/native/camera/#DestinationType 2.引入插件 $ ionic cordova plugin a ...

  5. Ionic开发实战

    转自:http://blog.csdn.net/i348018533/article/details/47258449/ 折磨的两个月!Ionic从零单排,到项目发布!遇到了很多问题但都一一解决了,此 ...

  6. 170多个Ionic Framework学习资源（转载）

    在Ionic官网找到的学习资源:http://blog.ionic.io/learning-ionic-in-your-living-room/ 网上的文章比较多,但是很多时候我们很难找到自己需要的. ...

  7. 初识ionic

    1.Ionic环境安装 Ionic开发是依赖于Nodejs环境的,所以在开发之前我们需要安装好Nodejs.下载安装:http://nodejs.org/ 安装完成之后打开PowerShell输入命令 ...

  8. ionic实战系列(二):使用cordova插件

    本章主要关注cordova的各种插件,利用好手机(移动设备)的原生功能.首先cordova是一个将web网页内嵌到原生app的平台(核心功能),然后cordova拥有的插件系统扩展了核心功能. Cor ...

  9. ionic使用方法

    windows下安装配置 npm install -g ionic npm install -g cordova ionic start myproject cd myproject ionic pl ...

随机推荐

  1. .net EntityFramework用法探索系列 1

    EntityFramework用法探索系列 (一)DatabaseFirst (二)CodeFirst (三)CodeFirst流畅API (四)Repository和UnitOfWork (五)引入 ...

  2. (C/C++) Callback Function 回调（diao）函数

    原文: http://www.codeguru.com/cpp/cpp/cpp_mfc/callbacks/article.php/c10557/Callback-Functions-Tutorial ...

  3. Error: L6218E: Undefined symbol TIM_ARRPreloadConfig (referred from pwm_output.o).

    出错原因:模板FWLIB中没有添加stm32f10x_tim.c文件.添加即可 一般利用库开发,将ppp.c(ppp.c又调用了库stm32f10x_xx.h)写好之后的调用步骤: 1 将ppp.c和 ...

  4. 关于微信网页调用js-sdk相关接口注意事项目（一级域名与二级域名互相干扰！！！）

    不知道有没有网友遇到过同一个web应用用不同的域名(一级或二级域名)在两个公众号中调用JSSDK相关接口实现功能, 这种做法本来没有问题,问题在于用二级域名(同属一级域名下的二级域名)绑定另一个web ...

  5. Ulipad和有道词典冲突的问题

    Ulipad和目前版本的有道词典有冲突,表现为先开有道词典,Ulipad就无法运行. 解决方法是:找到Ulipad安装目录下的config.ini,添加以下两行:   [server] port=50 ...

  6. TestNG运作报错An interanl error occurred during:"Launching first"

    备注:我建的类名就叫做“first” 解决办法:卸载掉TestNG M2E Help-->Install new software-->What is already installed? ...

  7. RDLC添加页码

    页脚显示页码并总页数首先添加页脚,在页脚拖一textbox,textbox的表达式输入:="第" & Globals!PageNumber & "页 共& ...

  8. 关于在页面总嵌入iframe,ifram中发起请求,服务器端的session为空问题解决

    本文抄袭:http://blog.csdn.net/ray_adon/article/details/6960724 在做项目是 是用了iframe,iframe发起ajax请求,服务器端报sessi ...

  9. rhel5 新建用户提示：the home directory already exists.

    rhel5 新建用户提示:the home directory already exists.(as4不存在这个问题) 环境如下: [oracle@rhel5 ~]$ df -hFilesystem  ...

  10. ListView的position的保持

    需求场景: 一个ListView页面,滑动阅读到某一位置,然后退出页面,下次再进入页面的时候,想要直接滑动到上次阅读的位置. 方案1: 页面退出的时候,ListView.getFirstVisible ...