詳解ionic本地相冊(cè)、拍照、裁剪、上傳(單圖完全版)
網(wǎng)絡(luò)上已有的ionic圖片選擇上傳博客碎片化過(guò)于嚴(yán)重,功能殘缺或者引入了一些不必要的插件。這次以項(xiàng)目為契機(jī),把ionic的圖片選擇、裁剪、上傳整合一下,多圖上傳請(qǐng)戳ionic選擇多張圖片上傳
插件安裝
cordova plugin add cordova-plugin-camera //用于通過(guò)相機(jī)、相冊(cè)選擇圖片并完成裁剪 cordova plugin add cordova-plugin-file-transfer //用于上傳圖片到服務(wù)器
將功能封裝為服務(wù)
angular.module('starter.services', []) //文件上傳 .factory('UploadFile', function(Toast) { return { /** * 上傳文件到服務(wù)器 * * @param fileUrl 文件路徑 * @param server 服務(wù)器接口 */ uploadFile: function(fileUrl, server) { document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { var options = new FileUploadOptions(); options.fileKey = "BeanYon"; options.fileName = fileUrl.substr(fileUrl.lastIndexOf('/') + 1); options.mimeType = "image/jpeg"; options.chunkedMode = false; var params = {account: localStorage.account}; options.params = params; var ft = new FileTransfer(); ft.upload(fileUrl, encodeURI(server), success, err, options); } function success(r){ Toast.show("設(shè)置頭像成功"); } function err(error){ Toast.show("上傳頭像失敗,請(qǐng)確保網(wǎng)絡(luò)正常后再試"); } } } }) //配置單張圖片選擇 .factory('SelectPicture', function(UploadFile, Toast) { return { /** * 從相機(jī)或圖庫(kù)選擇一張圖片 * * @param type 選擇類(lèi)型,0 拍照,1 相冊(cè) * @param width 目標(biāo)寬度 * @param height 目標(biāo)高度 * @param scope $scope對(duì)象 */ chooseSinglePicture: function(type, width, height, scope) { document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { var options = {//相機(jī)配置 targetWidth: width, targetHeight: height, quality: 100, allowEdit: true } if(type == 1){//圖片源設(shè)置為相冊(cè) options.sourceType = 2; } navigator.camera.getPicture( function(res){ scope.avatar_src = res; scope.$apply(); localStorage.avatar = res; UploadFile.uploadFile(res, "我的服務(wù)器地址");//傳遞自己的服務(wù)器接口地址 }, function(res){ Toast.show("選擇頭像失敗"); }, options ); } }, /** * 從圖庫(kù)選擇多張圖片 */ choosePictures: function() { window.imagePicker.getPictures(function(res){ alert(res+",success"); }, function(res){ alert(res+",failed"); }, { maximumImagesCount: 10, width: 80, height: 80, quality: 80 }); } } });
調(diào)用服務(wù)
angular.module('starter.controllers', []) .controller('MyCtrl', function($scope, $state, $ionicActionSheet, UploadFile,Toast, SelectPicture) { $scope.avatar_src = "img/default_avatar.jpg"; /** *選擇頭像 */ $scope.selectAvatar = function(){ // 顯示操作表 $ionicActionSheet.show({ buttons: [ { text: '<p style="font-size: 18px;">拍照<p>' }, { text: '<p style="font-size: 18px;">從相冊(cè)選擇<p>' }, ], buttonClicked: function(index) { //設(shè)置頭像 SelectPicture.chooseSinglePicture(index, 120, 120, $scope); return true; } }); } })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS使用自定義指令替代ng-repeat的方法
這篇文章主要介紹了另一種即具有與ng-repeat一樣處理大量數(shù)據(jù)的綁定的功能,又具有超高性能的自定義方法,有需要的小伙伴們可以參考借鑒,下面來(lái)一起看看吧。2016-09-09AngularJS 雙向數(shù)據(jù)綁定詳解簡(jiǎn)單實(shí)例
這篇文章主要介紹了AngularJS 雙向數(shù)據(jù)綁定詳解簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-10-10AngularJs 動(dòng)態(tài)加載模塊和依賴
這篇文章主要介紹了AngularJs 動(dòng)態(tài)加載模塊和依賴方法的相關(guān)資料,需要的朋友可以參考下2016-09-09AngularJS實(shí)現(xiàn)的select二級(jí)聯(lián)動(dòng)下拉菜單功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的select二級(jí)聯(lián)動(dòng)下拉菜單功能,結(jié)合完整實(shí)例形式分析了AngularJS實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單的具體操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-10-10AngularJS ng-repeat指令中使用track by子語(yǔ)句解決重復(fù)數(shù)據(jù)遍歷錯(cuò)誤問(wèn)題
這篇文章主要介紹了AngularJS ng-repeat指令中使用track by子語(yǔ)句解決重復(fù)數(shù)據(jù)遍歷錯(cuò)誤問(wèn)題,結(jié)合實(shí)例形式分析了ng-repeat指令遍歷JavaScript數(shù)組錯(cuò)誤的原因與相關(guān)解決技巧,需要的朋友可以參考下2017-01-01Angularjs在360兼容模式下取數(shù)據(jù)緩存問(wèn)題的解決辦法
這篇文章主要為大家詳細(xì)介紹了Angularjs在360兼容模式下取數(shù)據(jù)緩存問(wèn)題的解決辦法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06