mui开发APP教程之上传用户头像
mui开发APP教程之上传用户头像
页面展示：
实现功能：
点击头像出现acntionsheet框，让你选择是从相册选取还是拍照
html代码：
头像
js代码：
mui.plusReady(function(){
if(mui.os.plus){
var a=[{
title:'拍照'
},{
title:'从手机相册选择'
}];
plus.nativeUI.actionSheet({
title:'修改头像',
cancel:'取消',
buttons:a
},function(b){
switch(b.index){
case 0:
break;
case 1:
//拍照
getImages();
break;
case 2:
//打开相册
galleryImages();
break;
default:
break;
}
},false);
}
});
//拍照
function getImages(){
var mobileCamera=Camera();
mobileCamera.captureImage(function(e){
solveLocalFileSystemURL(e,function(entry){
var path&#LocalURL()+'?version='+new Date().getTime();
uploadHeadImg(path);
},function(err){
console.log("读取拍照文件错误");
});
},function(e){
console.log("er",err);
},function(){
filename:'_doc/head.png';
});
}
//从本地相册选择
function galleryImages(){
console.log("你选择了从相册选择");
plus.gallery.pick(function(a){
solveLocalFileSystemURL(a,function(entry){
solveLocalFileSystemURL('_doc/',function(root){
//文件已经存在
console.log("文件移除成功");
var path=e.fullPath+'?version='+new Date().getTime();
uploadHeadImg(path);
},function(err){
console.log("copy image fail: ",err);
});
},function(err){
console.log("删除图片失败：("+JSON.stringify(err)+")");
});
},function(err){
//打开文件失败
var path=e.fullPath+'?version='+new Date().getTime();
uploadHeadImg(path);
},function(err){
console.log("上传图片失败：("+JSON.stringify(err)+")");
});
});
},function(e){
console.log("读取文件夹失败：("+JSON.stringify(err)+")");
});
});
},function(err){
console.log("读取拍照文件失败: ",err);
},{
filter:'image'
});
};
//上传图片
function uploadHeadImg(imgPath){
//选中图片之后，头像当前的照片变为选择的照片
var mainImg&#ElementById('userImg');
mainImg.src=imgPath;
var images=new Image();
images.src=imgPath;
var imgData=getBase64Image(images);
mui.ajax('127.0.0.1/uploadHeadImg',{
data:{
'imgDatas':imgData
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
success:function(data){
if(data.status=='1'){
mui.alert('上传成功！');
}
},
error:function(xhr,type,errorThrown){
if(type=='timeout'){
mui.alert('服务器连接超时，请稍后再试');
}
}
});
}
//压缩图片转成base64
function getBase64Image(img){
var canvas&#ateElement("canvas");
var width=img.width;
var height=img.height;
if(width>height){
if(width>100){
height&#und(height*=100/width);
width=100;
}
}else{
if(height>100){
width&#und(width*=100/height);
}
height=100;
}
canvas.width=width;
canvas.height=height;
var ctx&#Context('2d');
ctx.drawImage(img,0,0,width,height);
var dataUrl&#DataURL('image/png',0.8);
place('data:image/png:base64,','');
}
});
mui开发APP教程之上传用户头像相关教程
本文发布于:2024-01-27 18:38:52，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17063519301939.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
