이온 로컬 사진 앨범, 사진 촬영, 크롭, 업로드 스킬 공유

기존 인터넷상의 아이온 이미지 업로드 블로그들은 너무 단편적이거나, 기능이 불완전하거나, 불필요한 플러그인을 도입하고 있습니다. 이번에는 ionic의 이미지 선택, 자르기, 업로드를 통합하는 기회로 프로젝트를 진행했습니다. 여러 이미지를 업로드하려면 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 = 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 
  });
 }
 }
});

통화 서비스

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;
  }
 });
 }
})

관련 추천:

ionic이 여러 장의 사진을 업로드했습니다. 샘플 코드 공유

ionic3 및 Angular4는 인터페이스 요청 및 로컬 json 파일 읽기를 구현합니다.

ionic을 사용하여 주소록 인터페이스 전환 예제 코드를 구현합니다

위 내용은 이온 로컬 사진 앨범, 사진 촬영, 크롭, 업로드 스킬 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!