详解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 相关文章推荐
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 Javascript
vuex分模块后,实现获取state的值
Jul 26 Javascript
JavaScript实现移动端拖动元素
Nov 24 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
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
Python3爬虫全国地址信息
2019/01/05 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
python config文件的读写操作示例
2019/09/27 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
水务局局长岗位职责
2013/11/28 职场文书
人力资源经理自我评价
2014/01/04 职场文书
运动会表扬稿大全
2014/01/16 职场文书
遗体告别仪式答谢词
2014/01/23 职场文书
低碳生活倡议书
2014/04/14 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
高三物理教学反思
2016/02/20 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python