app头像上传vue_mui+vue+photoclip做APP头像裁剪上传

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=" + newDate().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 的实例对象，并将图片的 对象作为参数传入。

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 的实例对象，并将图片的 对象作为参数传入。

//$(".loading").addClass("displaynone");

//},

//done: function(dataURL) { //裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象，会将裁剪出的图像数据DataURL作为参数传入。

//console.log(dataURL);//dataURL裁剪后图片地址base64格式提交给后台处理

//$(".clipbg").hide()

//}

//});

},