详解ionic本地相册、拍照、裁剪、上传(单图完全版)
时间:2019-04-07
本文章向大家介绍详解ionic本地相册、拍照、裁剪、上传(单图完全版),主要包括详解ionic本地相册、拍照、裁剪、上传(单图完全版)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
网络上已有的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; } }); } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 数据库[分库分表]中间件 Sharding-JDBC 源码分析 —— SQL 解析(四)之插入SQL
- 基于sliverlight + wcf的web 文字版IM 示例
- 数据库中间件 Sharding-JDBC 源码分析 —— SQL 解析(三)之查询SQL
- zephir-(11)流程控制语句
- phalcon-入门篇7(Model层基础使用)
- Sharding-JDBC 源码分析 —— SQL 解析(二)之SQL解析
- zephir-(1)开篇介绍
- phalcon-入门篇6(控制器)
- phalcon-入门篇5(请求与返回)
- phalcon-入门篇2(HelloWord与PhalconTools)
- 数据库中间件 Sharding-JDBC 源码分析 —— SQL 解析(一)之语法解析
- phalcon-入门篇4(log日志和session缓存)
- zephir-(5)类型
- zephir-(10)内置函数
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- MySQL中group_concat()函数用法总结
- [::-1] 数组中元素反向
- MySQL面试题
- numpy~运算符和Boolean类型变量
- PHP安全基础第一章
- 21 个非常有用的 .htaccess 提示和技巧
- PHP实现图片马赛克效果
- PHP中的类
- PHP获取表单textarea数据中的换行问题
- Numpy根据Bool值挑选数组中元素
- MySQL获取每个分类下面的前三条数据
- windows宿主机如何SSH连接VMware的Linux虚拟机
- np.random.rand均匀分布随机数和np.random.randn正态分布随机数函数使用方法
- Java FileReader使用相对路径读取文件
- MySQL批量插入数据库实现语句性能分析