angularJS拍照

時間 2019-11-19

原文原文鏈接

第一步：先上工程目錄結構-------------------------------css

說明：開發測試的時候須要在真機上調試拍照功能不懂的能夠加JS前端羣：JS前端（HTML5） 458633781html

第二步：上主頁面HTML-------------------------------index.html前端

<!DOCTYPE html>
<html>
<!--
    做者：152645239@qq.com
    時間：2015-03-07
    描述：已經在android下完成測試
    更多技術交流羣：JS前端（HTML5） 458633781
    更多潮流請關注《心魅體》微信號：ilittlekiss
    -->

<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/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<style>
body {
overflow: visible;
}
.row-center {
margin: 0 auto;
}
.addimg {
display: inline-block;
width: 100%;
height: auto;
min-height: 100px;
font-size: 3rem;
padding-left: 17px;
border: 1px dotted #4d4d4d;
}
.button {
color: #4d4d4d;
}
.colorred {
color: #F70000;
}
</style>
</head>

<body ng-app="starter" ng-controller="ExampleController">
<div class="bar bar-header bar-calm">
<div class="row">This is my take photos list page</div>
</div>
<div class="content has-header has-footer">
<div class="row">
<div class="col">
<img class="imgsize100 imgwidth" ng-show="imgurl !== undefined" ng-src="{{imgurl}}">
<button ng-click="takePicture(1)" ng-show="imgurl == undefined" class="addimg button button-icon ion-ios-plus-empty">&nbsp;</button>
</div>
<div class="col">
<img class="imgsize100 imgwidth" ng-show="imgur2 !== undefined" ng-src="{{imgur2}}">
<button ng-click="takePicture(2)" ng-show="imgur2 == undefined" class="addimg button button-icon ion-ios-plus-empty">&nbsp;</button>
</div>
<div class="col">
<img class="imgsize100 imgwidth" ng-show="imgur3 !== undefined" ng-src="{{imgur3}}">
<button ng-click="takePicture(3)" ng-show="imgur3 == undefined" class="addimg button button-icon ion-ios-plus-empty">&nbsp;</button>
</div>
</div>
<div class="row">
<div class="col">
<span class="colorred ion-ios-snowy"></span>&nbsp;點擊「+」完成拍照，本次上傳照片最多3張。
</div>
</div>
</div>

<div class="bar bar-footer bar-light">
<div class="button button-calm row-center">OK，SUBMIT</div>
</div>
</body>

</html>

第三步：上app.js-------------------------------takePhoto\www\js\app.jsandroid

// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var exampleApp = angular.module('starter', ['ionic','ngCordova'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
});


exampleApp.controller("ExampleController", 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
        });
    }
 
});

源碼連接：http://pan.baidu.com/s/1o6YviFw
ios

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。