详解ionic本地相册、拍照、裁剪、上传（单图完全版）

详解ionic本地相册、拍照、裁剪、上传（单图完全版）

网络上已有的ionic图片选择上传博客碎片化过于严重，功能残缺或者引入了一些不必要的插件。这次以项目为契机，把ionic的图片选择、裁剪、上传http://整合一下，多图上传请戳ionic选择多张图片上传

插件安装

cordova plugin add cordova-plugin-camera //用于通过相机、相册选择图片并完成裁剪

cordova plugin add cordova-plugin-file-transfer //用于上传图片到服务器

将功能封装为服务

angular.module('starter.services', [])

//文件上传

.factory('UploadFile', function(Toast) {

return {

/**

* 上传文件到服务器

*

* @param fileUrl 文件路径

* @param server 服务器接口

*/

uploadFile: function(fileUrl, server) {

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

var options = nehttp://w 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("设置头像成功");

}

function err(error){

Toast.show("上传头像失败，请确保网络正常后再试");

}

}

}

})

//配置单张图片选择

.factory('SelectPicture', function(UploadFile, Toast) {

return {

/**

* 从相机或图库选择一张图片

*

* @param http://type 选择类型，0 拍照，1 相册

* @param width 目标宽度

* @param height 目标高度

* @param scope $scope对象

*/

chooseSinglePicture: function(type, width, height, scope) {

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

var options = {//相机配置

targetWidth: width,

targetHeight: height,

quality: 100,

allowEdit: true

}

if(type == 1){//图片源设置为相册

options.sourceType = 2;

}

navigator.camera.getPicture(

function(res){

scope.avatar_src = res;

scope.$apply();

localStorage.avatar = res;

UploadFile.uploadFile(res, "我的服务器地址");//传递自己的服务器接口地址

}, function(res){

Toast.show("选择头像失败");

}, options

);

}

},

/**

* 从图库选择多张图片

*/

choosePictures: function() {

window.imagePicker.getPictures(function(res){

alert(res+",success");

}, function(res){

alert(res+",failed");

}, {

maximumImagesCount: 10,

width: 80,

height: 80,

quality: 80

});

}

}

});

调用服务

angular.module('starter.controllers', [])

.controller('MyCtrl', function($scope, $state, $ionicActionSheet, Uplohttp://adFile,Toast, SelectPicture) {

$scope.avatar_src = "img/default_avatar.jpg";

/**

*选择头像

*/

$scope.selectAvatar = function(){

// 显示操作表

$ionicActionSheet.show({

buttons: [

{ text: '

拍照

' },

{ text: '

从相册选择

' },

],

buttonClicked: function(index) {

//设置头像

SelectPicture.chooseSinglePicture(index, 120, 120, $scope);

return true;

}

});

}

})

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。