详解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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
Prototype源码浅析 String部分(二)
Jan 16 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
Array.filter中如何正确使用Async
Nov 04 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和ACCESS写聊天室(一)
2006/10/09 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
php遍历目录方法小结
2015/03/10 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
Python字典简介以及用法详解
2016/11/15 Python
Python中的函数作用域
2018/05/07 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
导游个人求职信范文
2014/03/23 职场文书
励志演讲稿范文
2014/04/29 职场文书
迎新晚会策划方案
2014/06/13 职场文书
舞蹈专业求职信
2014/06/13 职场文书
英语课外活动总结
2014/08/27 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书