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


Posted in Javascript onOctober 10, 2017

网络上已有的ionic图片选择上传博客碎片化过于严重,功能残缺或者引入了一些不必要的插件。这次以项目为契机,把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: '<p style="font-size: 18px;">拍照<p>' },
  { text: '<p style="font-size: 18px;">从相册选择<p>' },
  ],
  buttonClicked: function(index) {
  //设置头像
  SelectPicture.chooseSinglePicture(index, 120, 120, $scope);
  return true;
  }
 });
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
IE8 中使用加速器(Activities)
May 14 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
简单了解JavaScript弹窗实现代码
May 07 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 #Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 #Javascript
JS判断数组那点事
Oct 10 #Javascript
template.js前端模板引擎使用详解
Oct 10 #Javascript
AngularJS中table表格基本操作示例
Oct 10 #Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 #Javascript
JavaScript实现计数器基础方法
Oct 10 #Javascript
You might like
PHP 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
js href的用法
2010/05/13 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
Python延时操作实现方法示例
2018/08/14 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
Pycharm更换python解释器的方法
2018/10/29 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
python数据化运营的重要意义
2019/11/25 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
2014年教师节座谈会发言稿
2014/09/10 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书