详解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学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
js创建数组的简单方法
Jul 27 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 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自定义的格式化时间示例代码
2013/12/05 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
python通过实例讲解反射机制
2019/10/17 Python
python logging通过json文件配置的步骤
2020/04/27 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
法国时尚童装网站:Melijoe
2016/08/10 全球购物
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
办公设备采购方案
2014/03/16 职场文书
销售求职信范文
2014/05/26 职场文书
社区创先争优承诺书
2014/08/30 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers