服务器维护,无锡网站推广优化公司哪家好,怎样在手机上创建网站,wordpress导航图标在介绍插件的使用之前#xff0c;我们有必要先大致了解下插件的原理 一、插件工作原理分析 一个插件是如何正确地在IONIC框架下运行的呢? 前台的HTML/js代码又是如何与后面具体平台做数据交互的呢? 这个就需要对插件的工作原理及各个模块之间的流程关系有一个基本的了解。 为…在介绍插件的使用之前我们有必要先大致了解下插件的原理 一、插件工作原理分析 一个插件是如何正确地在IONIC框架下运行的呢? 前台的HTML/js代码又是如何与后面具体平台做数据交互的呢? 这个就需要对插件的工作原理及各个模块之间的流程关系有一个基本的了解。 为了让插件能够访问具体平台系统的代码Cordova提供了对应的标准封装API来完成下面的图简单地示意了Android平台情况下的封装过程 当用户使用ionic platform add android这个命令之后 ionic项目会自动将插件下的Java文件copy到platform/android/目录下面同时将JS也copy到platform/android/目录下最终使用Android的编译工具(aapt/aidl/dx/apkbuilder等)生成.APK应用程序。 对于一个新建的ionic项目目录结构如下 我们添加了一个相机插件对于该插件下的java文件可以发现当前整个项目下只有该处存在这个java文件在目录项目根目录\plugins\cordova-plugin-camera\src\android下 当我们使用ionic platform add android这个命令之后可以发现我们的插件相关的java文件被copy到platform/android/目录下面即项目根目录\platforms\android\src\org\apache\cordova\camera 当我们用ionic build android命令编译过后可以发现这些java文件被编译成了class文件 二、数据的交互 接着之前的继续。 我们已经清楚JS和ANDROID平台之间分别通过JS的CORDOVA.EXEC()和JAVA的CORDOVAPLUGIN.EXECUTE()函数来对接。 这两个接口的参数对应关系如下所示 由于JS发送到Java的数据已经作为函数的参数传入, 所以函数中的回调参数主要是帮助Java侧反馈数据给JS侧所用。 Cordova使用了org.apache.cordova.PluginResult来完成当中的PluginResult.Staus代表JS调用插件成功与否的状态。 通常代码中判断状态值是否为PluginResult.Staus.OK来确认调用结果成果或者失败。 此处参考了http://www.ioniconline.com/plugin-dev-android/ 此处参考了http://blog.csdn.net/luo_xinran/article/details/52163307 三、使用cordova的camera插件 cordova plugin add cordova-plugin-camera 四、插件使用 1、仿微信模式拍照从相册选择两种模式做好模式选择模板photo.html 1 ion-modal-view stylemin-height:90px;height:90px;top:40% idphoto
2 ion-content classpadding scrollfalse styleheight:90px;padding:0px;
3 button classbutton button-full button-calm photo stylewidth:100%;marigin-top:0px;marigin-bottom:0px;border-bottom:1px solid white ng-clicktakePhoto(str,data)拍照/button
4 button classbutton button-full button-calm photo stylewidth:100%;marigin-top:0px;marigin-bottom:0px; ng-clicktakePhoto1(str,data)从相册选择/button
5 /ion-content
6 /ion-modal-view 2、modal展示 1 $ionicModal.fromTemplateUrl(templates/photo.html, {2 scope: $scope3 }).then(function(modal) {4 $scope.modal1 modal;5 });6 $scope.show1 function(str,taskData) { 7 $scope.strstr;8 $scope.datataskData;9 $scope.modal1.show();
10 }; 3、界面调用modal展示模板界面通过选择拍照调用takePhoto选择从相册选择调用taskPhoto1 button ng-clickshow1(afterImg,taskData) stylewidth:132px;height:173px;background:url(camera.png) no-repeat;/button 4、调用摄像头 1 //调用摄像头2 $scope.takePhoto function (str,taskData) {3 $scope.modal1.hide();4 document.addEventListener(deviceready, function () {5 var options {6 quality: 100, //相片质量0-1007 destinationType: Camera.DestinationType.FILE_URI, //返回类型DATA_URL 0返回作为 base64 編碼字串。 FILE_URI1返回影像档的 URI。NATIVE_URI2返回图像本机URI 8 sourceType: Camera.PictureSourceType.CAMERA, //从哪里选择图片PHOTOLIBRARY0相机拍照1SAVEDPHOTOALBUM2。0和1其实都是本地图库9 allowEdit: false, //在选择之前允许修改截图10 encodingType: Camera.EncodingType.JPEG, //保存的图片格式 JPEG 0, PNG 111 targetWidth: 375, //照片宽度12 targetHeight: 667, //照片高度13 mediaType: 2, //可选媒体类型圖片0只允许选择图片將返回指定DestinationType的参数。 視頻格式1允许选择视频最终返回 FILE_URI。ALLMEDIA 2允许所有媒体类型的选择。14 cameraDirection: 0, //枪后摄像头类型Back 0,Front-facing 115 popoverOptions: CameraPopoverOptions,16 saveToPhotoAlbum: true, //照片是否保存到相册17 correctOrientation:true //此项为true,照片于拍照方向一样但个别图片依然会出现旋转90度问题为false图片会选择90度18 };19 20 $cordovaCamera.getPicture(options).then(function (imageData) { //此处根据实际需求对上传文件地址imageData进行相应的操作本项目是将其放入数组当中以便通过ng-reapeat进行循环展示21 if(strimg){22 /* $scope.isShowfalse;*/23 $scope.arrayObj.push(imageData);24 $scope.idtaskData.id;25 /* $scope.imageSrc imageData;*/26 }else{27 /* $scope.isShowAfterfalse;*/28 $scope.arrayObj1.push(imageData);29 $scope.id1taskData.id;30 /* $scope.imageSrcAfter imageData;*/31 }32 /* $scope.uploadPhoto(taskData.id);*/33 }, function (err) {34 // error35 });36 37 }, false);38 };39 //调用摄像头从相册选择40 $scope.takePhoto1 function (str,taskData) {41 $scope.modal1.hide();42 document.addEventListener(deviceready, function () {43 var options {44 quality: 100, //相片质量0-10045 destinationType: Camera.DestinationType.FILE_URI, //返回类型DATA_URL 0返回作为 base64 編碼字串。 FILE_URI1返回影像档的 URI。NATIVE_URI2返回图像本机URI 46 sourceType: Camera.PictureSourceType.PHOTOLIBRARY, //从哪里选择图片PHOTOLIBRARY0相机拍照1SAVEDPHOTOALBUM2。0和1其实都是本地图库47 allowEdit: false, //在选择之前允许修改截图48 encodingType: Camera.EncodingType.JPEG, //保存的图片格式 JPEG 0, PNG 149 targetWidth: 375, //照片宽度50 targetHeight: 667, //照片高度51 mediaType: 2, //可选媒体类型圖片0只允许选择图片將返回指定DestinationType的参数。 視頻格式1允许选择视频最终返回 FILE_URI。ALLMEDIA 2允许所有媒体类型的选择。52 cameraDirection: 0, //枪后摄像头类型Back 0,Front-facing 153 popoverOptions: CameraPopoverOptions,54 saveToPhotoAlbum: true,55 correctOrientation:true56 };57 58 $cordovaCamera.getPicture(options).then(function(imageData) {59 if(strimg){ //标记str中如果从相册选择的文件是mp4格式将其放入arrayVideo数组进行循环显示60 /* $scope.isShowfalse;*/ 61 var typeimageData.split(.);62 var lasttype.length-1;63 if(type[last]mp4){64 $scope.arrayVideo.push(imageData);65 }66 if(type[last]jpg||type[last]png){67 $scope.arrayObj.push(imageData);68 }69 $scope.idtaskData.id;70 /* $scope.imageSrc imageData;*/71 }else{72 /* $scope.isShowAfterfalse;*/73 $scope.arrayObj1.push(imageData);74 $scope.id1taskData.id;75 /* $scope.imageSrcAfter imageData;*/76 }77 /* $scope.uploadPhoto(taskData.id);*/78 }, function (err) {79 // error80 });81 82 }, false);83 };84 $scope.uploadPhoto function (id,array) {85 for(var i0;iarray.length;i){86 var strarray[i].substring(0,4); 87 88 if(str!http){ //判断是否已经上传到服务器如果已经上传则不再重复上传服务器获取的以http开头从相册选择或者拍照的地址以file开头89 var urlhttp://www.xxx.com/uploadProcessFile; //文件上传地址90 var options new FileUploadOptions();91 var params {92 id: id93 };94 options.params params;95 options.fileKey uploadFile;96 options.fileName array[i].substr(array[i].lastIndexOf(/) 1); //获取文件名字此处如果不写后台处理默认当图片则造成选择的是视频但是上传到服务器上则是无法打开的图片97 98 $cordovaFileTransfer.upload(encodeURI(url),array[i], options)99 .then(function (result) {
100 console.log(JSON.stringify(result));
101 console.log(success);
102 }, function (err) {
103 console.log(JSON.stringify(err));
104 console.log(fail);
105 }, function (progress) { //上传图片进度条展示
106 $timeout(function () {
107 var uploadProgress (progress.loaded / progress.total) * 100;
108 $ionicLoading.show({
109 template: 已经上传 Math.floor(uploadProgress) %
110 });
111 if (uploadProgress 99) {
112 $ionicLoading.hide();
113 }
114 })
115 });
116 }
117 }
118 };
119 ionic也是在初步的学习当中如果有好的实现方法欢迎交流讨论~ 转载于:https://www.cnblogs.com/BetterMyself/p/7117133.html
