• ionic ngcordova camera


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

    1. 

    ionic start camera blank
    cd camera ionic platform add ios

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

     1 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之前

     1 <html>
     2   <head>
     3     <meta charset="utf-8">
     4     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
     5     <title></title>
     6 
     7     <link href="lib/ionic/css/ionic.css" rel="stylesheet">
     8     <link href="css/style.css" rel="stylesheet">
     9 
    10     <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    11     <link href="css/ionic.app.css" rel="stylesheet">
    12     -->
    13 
    14     <!-- ionic/angularjs js -->
    15     <script src="lib/ionic/js/ionic.bundle.js"></script>
    16 
    17     <!-- cordova script (this will be a 404 during development) -->
    18     <script src="lib/ionic/js/ng-cordova.min.js"></script>
    19     <script src="cordova.js"></script>
    20 
    21     <!-- your app's js -->
    22     <script src="js/app.js"></script>
    23   </head>

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

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

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

     1 .controller("cameraController", function($scope, $cordovaCamera) {
     2  
     3     $scope.takePicture = function() {
     4         var options = { 
     5             quality : 75, 
     6             destinationType : Camera.DestinationType.DATA_URL, 
     7             sourceType : Camera.PictureSourceType.CAMERA, 
     8             allowEdit : true,
     9             encodingType: Camera.EncodingType.JPEG,
    10             targetWidth: 300,
    11             targetHeight: 300,
    12             popoverOptions: CameraPopoverOptions,
    13             saveToPhotoAlbum: false
    14         };
    15  
    16         $cordovaCamera.getPicture(options).then(function(imageData) {
    17             $scope.imgURI = "data:image/jpeg;base64," + imageData;
    18         }, function(err) {
    19             // An error occured. Show a message to the user
    20         });
    21     }
    22  
    23 });

    7.在 index.html中顯示 調用

     1  <body ng-app="starter">
     2 
     3     <ion-pane>
     4       <ion-header-bar class="bar-stable">
     5         <h1 class="title">Ionic camera demo</h1>
     6       </ion-header-bar>
     7      <ion-content ng-controller="cameraController">
     8     <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}">
     9     <img ng-show="imgURI === undefined" ng-src="http://placehold.it/300x300">
    10     <button class="button" ng-click="takePicture()">Take Picture</button>
    11     </ion-content>
    12     </ion-pane>
    13   </body>
  • 相关阅读:
    联合索引和多个单列索引选择
    CentOS6.5 一台服务器同时安装多个Mysql数据库
    一次CentOS的服务器被攻击教训
    java版本的memcache静态化
    mysql存储空间满的处理方式
    MariaDB 10.0 和 MariaDB 10.1 存储过程中 PREPARE FROM EXECUTE 区别
    CentOS6.x 优化脚本
    Mysql 使用 “LOAD DATA INFILE”需要注意的问题
    Mysql 日期类型比较 TIMESTAMPDIFF
    CentOS6.x 源码安装Nginx
  • 原文地址:https://www.cnblogs.com/xieyier/p/4014216.html
Copyright © 2020-2023  润新知