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

Posted 2020-08-04

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);