做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头像裁剪上传的更多相关文章

  1. springMVC 头像裁剪上传并等比压

    第一次写头像裁剪上传,原本想着直接本地预览裁剪再上传,可是时间有限,jquery.jcrop貌似并没有对 假设是ie下图片预览效果是滤镜做的  做出对应处理,也没有时间去改;仅仅好将就一下先把图片上传 ...

  2. 第三百九十节,Django+Xadmin打造上线标准的在线教育平台—Django+cropper插件头像裁剪上传

    第三百九十节,Django+Xadmin打造上线标准的在线教育平台—Django+cropper插件头像裁剪上传 实现原理 前台用cropper插件,将用户上传头像时裁剪图片的坐标和图片,传到逻辑处理 ...

  3. jfinal头像裁剪上传服务器

    前端页面完整代码,复制可用,记得导入库文件 <!DOCTYPE html> <html lang="en"> <head> <title& ...

  4. 5.21学习总结——android开发实现用户头像的上传

    最近在做个人头像的上传,具体是能调用摄像头和从相册进行选择.本篇文章参考的我的同学的博客,大家有兴趣可以去原作者那里去看看: Hi(.・∀・)ノ (cnblogs.com) 1.使用glide进行图片 ...

  5. PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例

    PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例,在手机上双指捏合为缩放,双指旋转可根据旋转方向每次旋转90度,在电脑上鼠标滚轮为缩放,双击则顺时针旋转90度. 下面让我们来看 ...

  6. 头像截图上传三种方式之一(一个简单易用的flash插件)(asp.net版本)

    flash中有版权声明,不适合商业开发.这是官网地址:http://www.hdfu.net/ 本文参考了http://blog.csdn.net/yafei450225664/article/det ...

  7. 记录下hbuilder vue项目打包APP 在IOS上点击延迟的问题

    做的项目打包成APP在IOS 上有延迟问题,在安卓下却不会,联想到之前 用IONIC时打包的APP也是 在IOS下有300毫秒延迟问题.所以 只能 认吧. 安装fastclick 插件: npm in ...

  8. Vue+axios+Node+express实现文件上传(用户头像上传)

    Vue 页面的代码 <label for='my_file' class="theme-color"> <mu-icon left value="bac ...

  9. 图片裁剪上传插件——jquery.photoClip.js

    想要裁剪图片上传: 需要依赖的的插件为: [jquery.photoClip.js] 插件[iscroll-zoom.js] 插件[hammer.js] 插件 [lrz.all.bundle.js] ...

随机推荐

  1. python unittest 3- 框架Nose

    当前python的测试框架主要有以下三个: 1)zope.testing 2)py.test 3)Nose Nose下载:https://github.com/nose-devs/nose 1.Nos ...

  2. HTML5媒体(音频/视频)

    摘要: 在HTML5出现之前,web媒体大部分通过Flash来实现.这种方式造成了文件大加载慢,影响网站性能,开发难度高,维护麻烦,不易扩展等.这就导致HTML5自己开始支持媒体功能.HTML5 DO ...

  3. office系列调节背景主题

    更改背景主题可以参考:https://jingyan.baidu.com/article/ff42efa9332adec19e220200.html 但是这种方法只是改变了整个软件外框架的背景颜色.以 ...

  4. beautifulsoup4 安装教程

    下载beautifulsoup, 下载地址:https://www.crummy.com/software/BeautifulSoup/bs4/download/ 下载完成之后,解压到一个文件夹,用c ...

  5. linux-nohup后台运行

    先说一下linux重定向: 0.1和2分别表示标准输入.标准输出和标准错误信息输出,可以用来指定需要重定向的标准输入或输出. 在一般使用时,默认的是标准输出,既1.当我们需要特殊用途时,可以使用其他标 ...

  6. 【代码审计】CLTPHP_v5.5.3 前台任意文件上传漏洞

    0x00 环境准备 CLTPHP官网:http://www.cltphp.com 网站源码版本:CLTPHP内容管理系统5.5.3版本 程序源码下载:https://gitee.com/chichu/ ...

  7. WAF Bypass数据库特性(Mysql探索篇)

    0x01 背景 Mysql数据库特性探索,探索能够绕过WAF的数据库特性. 0x02 测试 常见有5个位置即:   SELECT * FROM admin WHERE username = 1[位置一 ...

  8. Selenium 执行JavaScript

    Selenium 可以直接模拟运行 JavaScript,使用 execute_script() 方法即可实现 from selenium import webdriver browser = web ...

  9. React Native(七)——react-native-elements

    配合React native使用的UI库:https://react-native-training.github.io/react-native-elements/ 1. 新建项目:http://w ...

  10. Java的Integer和int有什么区别

    Java是面向对象的编程语言,一切都是对象,但是为了编程的方便还是引入了基本数据类型,为了能够将这些基本数据类型当成对象操作,Java为每一个基本数据类型都引入了对应的包装类型(wrapper cla ...