ionic local photo album, photo taking, cropping, uploading skills sharing

The existing ionic picture selection upload blogs on the Internet are too fragmented, have incomplete functions, or introduce some unnecessary plug-ins. This time, we took the project as an opportunity to integrate ionic's image selection, cropping, and uploading. To upload multiple images, please click ionic to select multiple images to upload. This article mainly introduces the ionic local photo album, taking pictures, cropping, and uploading (full version of a single picture). It is very practical. Friends who need it can refer to it. I hope it can help everyone.

Plug-in installation

cordova plugin add cordova-plugin-camera //用于通过相机、相册选择图片并完成裁剪
cordova plugin add cordova-plugin-file-transfer //用于上传图片到服务器

Encapsulate functions as services

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 = 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("设置头像成功");
  }

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

//配置单张图片选择
.factory('SelectPicture', function(UploadFile, Toast) {
 return {
 /**
  * 从相机或图库选择一张图片
  * 
  * @param 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 
  });
 }
 }
});

Call service

##

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: &#39;<p style="font-size: 18px;">拍照<p>&#39; },
  { text: &#39;<p style="font-size: 18px;">从相册选择<p>&#39; },
  ],
  buttonClicked: function(index) {
  //设置头像
  SelectPicture.chooseSinglePicture(index, 120, 120, $scope);
  return true;
  }
 });
 }
})

Related recommendations:

Ionic multi-image upload sample code sharing

ionic3 and Angular4 implement interface request and local json file reading

Use ionic implements address book interface switching example code

The above is the detailed content of ionic local photo album, photo taking, cropping, uploading skills sharing. For more information, please follow other related articles on the PHP Chinese website!