详解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 相关文章推荐
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
js使用心得分享
Jan 13 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
原生js编写焦点图效果
Dec 08 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
微信小程序基础教程之echart的使用
Jun 01 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获取指定范围内最接近数的方法
2015/06/02 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
javascript控制台详解
2015/06/25 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
python实现简单tftp(基于udp协议)
2018/07/30 Python
Django 路由控制的实现代码
2018/11/08 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
python中如何设置代码自动提示
2020/07/15 Python
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
综合素质的自我鉴定
2013/10/07 职场文书
节水标语大全
2014/06/11 职场文书
经营理念标语
2014/06/21 职场文书
幼师中班个人总结
2015/02/12 职场文书
新员工辞职信范文
2015/05/12 职场文书
班委竞选稿范文
2015/11/21 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python