mui+vue+photoclip做APP头像裁剪上传
做APP由于项目需要,需要做用户头像上传的功能,头像上传包括拍照和相册选择图片进行上传,这里使用的技术是mui封装的plus,在进行图片裁剪的时候,使用的是photoclip来进行裁剪,由于个人在使用mui自带的组件做图片上传比较麻烦,所以就采用了base64的图片做上传会比较简单,页面的渲染采用的VUE来进行双向数据绑定。
不说了,看代码:
changeFace:function(){
this.selectFace = true;
this.mask = mui.createMask((res)=>{
this.selectFace = false;
});
this.mask.show();
},
// 拍照
takingPictures:function(){
this.selectFace = false;
this.mask.close();
// 拍照
var c = plus.camera.getCamera();
c.captureImage((e)=>{
plus.io.resolveLocalFileSystemURL(e,(entry)=>{
var path = entry.toLocalURL() + "?version=" + new Date().getTime();
console.log(path);
this.cutOutPictures(path);
// alert(imgPath);
},(e)=>{
console.log("读取拍照片文件错误:" + e.message);
});
},(s)=>{
console.log("error:"+s);
},{
filename: "_doc/head.png"
});
// this.cutOutPictures();
// console.log('takingPictures');
},
// 从相册中选择
selectFromalbum:function(){
this.selectFace = false;
this.mask.close();
// 从相册中选择图片
console.log("从相册中选择图片");
plus.gallery.pick((path)=>{
console.log(path);
this.cutOutPictures(path);
},(e)=>{
console.log("取消选择图片");
},{filter:"image"});
//console.log('selectFromalbum');
},
// 裁剪图片
cutOutPictures:function(imgSrc){
var that = this;
that.showSelectFace = true;
var saveImg = (imgPath)=>{
imgPath = imgPath.replace("data:image/jpeg;base64,", "");
this.data = {avatar:imgPath};
this.data = config.getParam(this.data);
mui.post(config.userProfileUpdate,this.data,(res)=>{
if(res.code == 200){
config.userInfo.avatar = res.data.avatar;
config.setStorage('userInfo',JSON.stringify(config.userInfo));
mui.toast("头像修改成功");
}else{
mui.toast(res.msg);
};
});
};
var clipArea = new PhotoClip("#clipArea", {
size: [300, 300],//裁剪框大小
outputSize:[0,0],//打开图片大小,[0,0]表示原图大小
file: "#file",
ok: "#clipBtn",
// img: "http://127.0.0.1/ff.jpg",
// img:'http://m3.biz.itc.cn/pic/new/n/50/14/Img5431450_n.jpg',
// img:"file:///F:/MuiProject/domo6/images/music0.jpg",
// img: "../images/music0.jpg",
// img: "../images/huiyuan_03.jpg?version=124545487878",
img:imgSrc,
// 图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象,并将正在加载的 file 对象作为参数传入。(如果是使用非 file 的方式加载图片,则该参数为图片的 url)
loadStart: function(){
$(".loading").removeClass("displaynone");
},
// 图片加载完成的回调函数。this 指向当前 PhotoClip 的实例对象,并将图片的 <img> 对象作为参数传入。
loadComplete: function() {
$(".loading").addClass("displaynone");
},
// 裁剪完成的回调函数。this 指向当前 PhotoClip 实例对象,会将裁剪出的图像数据DataURL作为参数传入。
done: function(dataURL){
that.showSelectFace = false;
saveImg(dataURL);
// console.log(dataURL);//dataURL裁剪后图片地址base64格式提交给后台处理
$(".clipbg").hide()
}
});
$("#cancelBtn").on('tap',()=>{
that.showSelectFace = false;
$(".clipbg").hide();
});
// this.showSelectFace = true;
// var clipArea = new PhotoClip("#clipArea", {
// size: [300, 300],//裁剪框大小
// outputSize:[0,0],//打开图片大小,[0,0]表示原图大小
// file: "#file",
// ok: "#clipBtn",
// // img: "http://127.0.0.1/ff.jpg",
// // img:'http://m3.biz.itc.cn/pic/new/n/50/14/Img5431450_n.jpg',
// // img:"file:///F:/MuiProject/domo6/images/music0.jpg",
// img: "../images/music0.jpg",
// loadStart: function() { //图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象,并将正在加载的 file 对象作为参数传入。(如果是使用非 file 的方式加载图片,则该参数为图片的 url)
// $(".loading").removeClass("displaynone");
// },
// loadComplete: function() {//图片加载完成的回调函数。this 指向当前 PhotoClip 的实例对象,并将图片的 <img> 对象作为参数传入。
// $(".loading").addClass("displaynone"); // },
// done: function(dataURL) { //裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象,会将裁剪出的图像数据DataURL作为参数传入。
// console.log(dataURL);//dataURL裁剪后图片地址base64格式提交给后台处理
// $(".clipbg").hide()
// }
// });
},
mui+vue+photoclip做APP头像裁剪上传的更多相关文章
- springMVC 头像裁剪上传并等比压
第一次写头像裁剪上传,原本想着直接本地预览裁剪再上传,可是时间有限,jquery.jcrop貌似并没有对 假设是ie下图片预览效果是滤镜做的 做出对应处理,也没有时间去改;仅仅好将就一下先把图片上传 ...
- 第三百九十节,Django+Xadmin打造上线标准的在线教育平台—Django+cropper插件头像裁剪上传
第三百九十节,Django+Xadmin打造上线标准的在线教育平台—Django+cropper插件头像裁剪上传 实现原理 前台用cropper插件,将用户上传头像时裁剪图片的坐标和图片,传到逻辑处理 ...
- jfinal头像裁剪上传服务器
前端页面完整代码,复制可用,记得导入库文件 <!DOCTYPE html> <html lang="en"> <head> <title& ...
- 5.21学习总结——android开发实现用户头像的上传
最近在做个人头像的上传,具体是能调用摄像头和从相册进行选择.本篇文章参考的我的同学的博客,大家有兴趣可以去原作者那里去看看: Hi(.・∀・)ノ (cnblogs.com) 1.使用glide进行图片 ...
- PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例
PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例,在手机上双指捏合为缩放,双指旋转可根据旋转方向每次旋转90度,在电脑上鼠标滚轮为缩放,双击则顺时针旋转90度. 下面让我们来看 ...
- 头像截图上传三种方式之一(一个简单易用的flash插件)(asp.net版本)
flash中有版权声明,不适合商业开发.这是官网地址:http://www.hdfu.net/ 本文参考了http://blog.csdn.net/yafei450225664/article/det ...
- 记录下hbuilder vue项目打包APP 在IOS上点击延迟的问题
做的项目打包成APP在IOS 上有延迟问题,在安卓下却不会,联想到之前 用IONIC时打包的APP也是 在IOS下有300毫秒延迟问题.所以 只能 认吧. 安装fastclick 插件: npm in ...
- Vue+axios+Node+express实现文件上传(用户头像上传)
Vue 页面的代码 <label for='my_file' class="theme-color"> <mu-icon left value="bac ...
- 图片裁剪上传插件——jquery.photoClip.js
想要裁剪图片上传: 需要依赖的的插件为: [jquery.photoClip.js] 插件[iscroll-zoom.js] 插件[hammer.js] 插件 [lrz.all.bundle.js] ...
随机推荐
- wget 下载指定url路径下的 指定类型的(全部)文件
wget http://mirrors.ustc.edu.cn/ubuntu/pool/main/g/gcc-4.4/ -r -np -nd -A .deb -e robots=offwget htt ...
- 【转】Redis集群搭建与简单使用
介绍安装环境与版本 用两台虚拟机模拟6个节点,一台机器3个节点,创建出3 master.3 salve 环境. redis 采用 redis-3.2.4 版本. 两台虚拟机都是 CentOS ,一台 ...
- mysql中json_remove函数的使用?
需求描述: 今天看json记录,可以通过json_remove函数对一个key或多个key从个json记录中去掉. 操作过程: 1.查看一个已经存在的json表 mysql> select * ...
- The confusion about jsp four scopes and ServletContext,HttpSession,HttpServletReqest,PageContext
The jsp four scopes are same with ServletContext,HttpSession,HttpServletRequest,PageContext? How ser ...
- Java实现在复制文件时使用进度条
在对大文件操作时,可能会需要些时间,此时为用户提供进度条提示是非常常见的一项功能,这样用户就可以了解操作文件需要的时间信息.本实例为大家介绍了在复制大的文件时使用的进度条提示,需要注意的是,只有在读取 ...
- JQuery Mobile难点备忘
1 固定header: data-position="fixed",如果仅仅是加了这个属性,当页面出现滚动条的时候点击页面内容,header还是会隐藏显示全屏,如果不需要这样,加入 ...
- Spring @Scheduled定时任务动态修改cron参数
在定时任务类上增加@EnableScheduling注解,并实现SchedulingConfigurer接口.(注意低版本无效) 设置一个静态变量cron,用于存放任务执行周期参数. 另辟一线程,用于 ...
- [C/E] 等差数列求和
题目:要求给定一个整数 N,求从 0 到 N 之间所有整数相加之和. 解1:使用 for 循环依次递加. #include <stdio.h> int main(void){ int x; ...
- 第六篇:Eclipse上运行第一个Hadoop实例 - WordCount(单词统计程序)
需求 计算出文件中每个单词的频数.要求输出结果按照单词的字母顺序进行排序.每个单词和其频数占一行,单词和频数之间有间隔. 比如,输入两个文件,其一内容如下: hello world hello had ...
- AngularJS的表达式、指令的学习(2)
最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿. 一.AngularJS 表达式 AngularJS表达式写在双大括号内:{{expressio ...