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);
时间: 2024-10-09 14:25:43