码迷,mamicode.com
首页 > 移动开发 > 详细

ng-cordova 手机拍照或从相册选择图片

时间:2016-08-26 15:05:32      阅读:366      评论:0      收藏:0      [点我收藏+]

标签:

1、需求描述

  实现一个调用摄像头拍照,或者直接打开本地图库选择照片,然后替换App中图片的功能

2、准备

  1) 安装ng-cordova

    进入到ionic工程目录,使用bower工具安装,

    bower install ngCordova 

    然后将ng-cordova.js 或者 ng-cordova.min.js 添加到index.html 中的 cordova.js 引用之前

    ...

    <script src="lib/ngCordova/dist/ng-cordova.js"></script>

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

    ...

    在angular中添加ngCordova依赖

       angular.module(‘myApp‘,[‘ngCordova‘])

  2) 安装 $cordovaCamera

    cordova plugin add cordova-plugin-camera  

    在controller中添加依赖

    .controller(‘appControl‘,[‘$cordovaCamera‘]){

      ...

    }

  3)安装$cordovaImagePicker

    cordova plugin add cordova-plugin-image-picker      

    在controller中添加依赖

    .controller(‘appControl‘,[‘$cordovaImagePicker‘]){

      ...

    }

3、代码实现

  

 1 ("deviceready",function(){
 2   //拍照
 3   var options={
 4     quality:50,                                       //保存图像的质量,范围0-100
 5     destinationType:Camera.DestinationType.DATA_URL,  //返回值格式:DATA_URL=0,返回作为base64编码字符串;FILE_URL=1,返回图像的URL;NATIVE_RUL=2,返回图像本机URL
 6     sourceType:Camera.PictureSourceType.CAMERA,       //设置图片来源:PHOTOLIBRARY=0,相机拍照=1,
 7     allowEdit:true,                                   //选择图片前是否允许编辑
 8     encodingType:Camera.EncodingType.JPEG,            //JPEN = 0,PNG = 1
 9     targetWidth:100,                                  //缩放图像的宽度(像素)
10     targetHeight:100,                                 //缩放图像的高度(像素)
11     popoverOptions:CameraPopoverOptions,              //ios,iPad弹出位置
12     saveToPhotoAlbum:true,                            //是否保存到相册
13     correctOrientation:true                           //设置摄像机拍摄的图像是否为正确的方向
14   };
15   $cordovaCamera.getPicture(options).then(function(imageData){
16     $scope.imageSrc="data:image/jpeg;base64,"+imageData;
17   },function(err){
18     //error
19   });
20 },false);
 1 document.addEventListener("deviceready",function(){
 2   var options = {
 3     maximumImagesCount: 10, //最大选择图片数量
 4     width: 800,             //筛选宽度:如果宽度为0,返回所有尺寸的图片
 5     height: 800,            //筛选高度:如果高度为0,返回所有尺寸的图片
 6     quality: 80             //图像质量的大小,默认为100
 7   };
 8   $cordovaImagePicker.getPictures(options).then(function (results) {
 9     for (var i = 0; i < results.length; i++) {
10       alert(‘Image URI: ‘ + results[i]);
11     }
12   },function(error) {
13     // error getting photos
14   });
15 },false);     

 

ng-cordova 手机拍照或从相册选择图片

标签:

原文地址:http://www.cnblogs.com/wfblogs/p/5810254.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!