mui调用本地相册和拍照功能
图例

只用更改上传图片ajax部分代码即可
1、html
<div class="headdiv"> <img src="" id="userImg"/> </div>
2、js
<script>
/*调相机本地相抵上传图片*/
mui.plusReady(function(){
document.getElementById(‘userImg‘).addEventListener(‘tap‘,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=plus.camera.getCamera();
mobileCamera.captureImage(function(e){
plus.io.resolveLocalFileSystemURL(e,function(entry){
var path=entry.toLocalURL()+‘?version=‘+new Date().getTime();
uploadHeadImg(path);
console.log(path);
},function(err){
console.log("读取拍照文件错误");
});
},function(e){
console.log("er",err);
},function(){
filename:‘_doc/head.png‘;
});
}
//本地相册选择
function galleryImages() {
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("file remove success");
entry.copyTo(root, ‘head.png‘, function(e) {
var e = e.fullPath + "?version=" + new Date().getTime();
uploadHeadImg(e); /*上传图片*/
//变更大图预览的src
//目前仅有一张图片,暂时如此处理,后续需要通过标准组件实现
},
function(e) {
console.log(‘copy image fail:‘ + e.message);
});
}, function() {
console.log("delete image fail:" + e.message);
});
}, function() {
//文件不存在
entry.copyTo(root, ‘head.png‘, function(e) {
var path = e.fullPath + "?version=" + new Date().getTime();
uploadHeadImg(path); /*上传图片*/
},
function(e) {
console.log(‘copy image fail:‘ + e.message);
});
});
}, function(e) {
console.log("get _www folder fail");
})
}, function(e) {
console.log("读取拍照文件错误:" + e.message);
});
}, function(a) {}, {
filter: "image"
})
};
//上传图片
function uploadHeadImg(imgPath){
//选中图片之后,头像当前的照片变为选择的照片
var mainImg=document.getElementById(‘userImg‘);
mainImg.src=imgPath;
var images=new Image();
images.src=imgPath;
var imgData=getBase64Image(images);
mui.ajax(‘‘,{ //第一个参数是接口名
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=document.createElement("canvas");
var width=img.width;
var height=img.height;
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;
var ctx=canvas.getContext(‘2d‘);
ctx.drawImage(img,0,0,width,height);
var dataUrl=canvas.toDataURL(‘image/png‘,0.8);
return dataUrl.replace(‘data:image/png:base64,‘,‘‘);
}
});
</script>