点击用户头像后，弹出actionSheet，选着从相册或是拍照；选着图片后就调用上传方法，上传图片；在上传之前先压缩了一下图片。
使用流程
弹出actionSheet
/
*点击头像触发*/
document.getElementById('headImage').addEventListener('tap',function(){
if(mui.os.plus){
vara=[{
title:"拍照"
},{
title:"从手机相册选择"
}];
plus.nativeUI.actionSheet({
title:"修改用户头像",
cancel:"取消",
buttons:a
},function(b){
switch(b.index){
case0:
break;
case1:
getImage();
break;
case2:
galleryImg();
break;
default:
break;
}
})
}
},false);
拍照上传
//拍照
functiongetImage(){
varc=plus.camera.getCamera();
c.captureImage(function(e){
plus.io.resolveLocalFileSystemURL(e,function(entry){
vars=entry.toLocalURL()+"?version="+newDate().getTime();
uploadHead(s);
},function(e){
console.log("读取拍照文件错误："+e.message);
});
},function(s){
console.log("error"+s);
},{
filename:"_doc/head.png"
})
}
从相册选图上传
//本地相册选择
functiongalleryImg(){
plus.gallery.pick(function(a){
plus.io.resolveLocalFileSystemURL(a,function(entry){
plus.io.resolveLocalFileSystemURL("_doc/",function(root){
root.getFile("head.png",{},function(file){
//文件已存在
file.remove(function(){
console.log("fileremovesuccess");
entry.copyTo(root,'head.png',function(e){
vare=e.fullPath+"?version="+newDate().getTime();
uploadHead(e);
//变更大图预览的src
//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
},
function(e){
console.log('copyimagefail:'+e.message);
});
},function(){
console.log("deleteimagefail:"+e.message);
});
},function(){
//文件不存在
entry.copyTo(root,'head.png',function(e){
varpath=e.fullPath+"?version="+newDate().getTime();
uploadHead(path);
},
function(e){
console.log('copyimagefail:'+e.message);
});
});
},function(e){
console.log("get_wwwfolderfail");
})
},function(e){
console.log("读取拍照文件错误："+e.message);
});
},function(a){},{
filter:"image"
})
};
图片上传和压缩
//上传头像图片
functionuploadHead(imgPath){
console.log("imgPath="+imgPath);
mainImage.src=imgPath;
mainImage.style.width="60px";
mainImage.style.height="60px";
varimage=newImage();
image.src=imgPath;
image.onload=function(){
varimgData=getBase64Image(image);
//mui.ajax("图片上传接口",{//data:{////},//dataType:'json',//type:'post',//timeout:10000,//success:function(data){//console.log('上传成功');//},//error:function(xhr,type,errorThrown){//mui.toast('网络异常，请稍后再试！');//}//});
}
}
//将图片压缩转成base64
functiongetBase64Image(img){
varcanvas=document.createElement("canvas");
varwidth=img.width;
varheight=img.height;
//calculatethewidthandheight,constrainingtheproportions
if(width>height){
if(width>100){
height=Math.round(height*=100/width);
width=100;
}
}else{
if(height>100){
width=Math.round(width*=100/height);
height=100;
}
}
canvas.width=width;
canvas.height=height;
varctx=canvas.getContext("2d");
ctx.drawImage(img,0,0,width,height);
vardataURL=canvas.toDataURL("image/png",0.8);
returndataURL.replace("data:image/png;base64,","");
}
总结
在使用中，我们可以发现，使用流程是非常清晰的；某种程度来说比原生iOS的使用还要简单一些。
