详解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写的点击上下滚动的小例子
Aug 27 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
element中el-container容器与div布局区分详解
May 13 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 信息采集程序代码
2009/03/17 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
python实现用于测试网站访问速率的方法
2015/05/26 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
pandas通过索引进行排序的示例
2018/11/16 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
应用电子技术专业个人求职信
2013/09/21 职场文书
给导游的表扬信
2014/01/10 职场文书
运动会稿件200字
2014/02/07 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
心灵点滴观后感
2015/06/02 职场文书
养成教育工作总结
2015/08/13 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android
使用Django框架创建项目
2022/06/10 Python