mui 用户头像更改

mui 用户头像更改

html部分：

<img class="mui-media-object mui-pull-left head-img" id="head-img" src="img/head.png">

js部分：

/*点击头像触发*/
ElementById('head').addEventListener('tap', function() {if(mui.os.plus) {var a = [{title: "拍照"}, {title: "从手机相册选择"}];plus.nativeUI.actionSheet({title: "修改用户头像",cancel: "取消",buttons: a}, function(b) { /*actionSheet 按钮点击事件*/switch(b.index) {case 0:break;case 1:getImage(); /*拍照*/break;case 2:galleryImg(); /*打开相册*/break;default:break;}})}
}, false);
//拍照
function getImage() {var cmr = Camera();var res = cmr.supportedImageResolutions[0];var fmt = cmr.supportedImageFormats[0];cmr.captureImage(function(path) {//solveLocalFileSystemURL(path, function(entry) {  solveLocalFileSystemURL(path, function(entry) {var localUrl = LocalURL();uploadHead(localUrl + "?version=" + new Date().getTime());}, function(err) {("拍照失败：" + ssage);}, {index: 1});});
} 
//本地相册选择
function galleryImg() {plus.gallery.pick(function(a) {solveLocalFileSystemURL(a, function(entry) {solveLocalFileSystemURL("_doc/", function(root) {File("head.png", {}, function(file) {//文件已存在ve(function() {console.log("file remove success");pyTo(root, 'head.png', function(e) {var e = e.fullPath + "?version=" + new Date().getTime();uploadHead(e); /*上传图片*///变更大图预览的src//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现},function(e) {console.log('copy image fail:' + e.message);});}, function() {console.log("delete image fail:" + e.message);});}, function() {//文件不存在pyTo(root, 'head.png', function(e) {var path = e.fullPath + "?version=" + new Date().getTime();uploadHead(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 uploadHead(imgPath) {var image = new Image();image.src = load = function() {var imgData = getBase64Image(image);console.log(imgData);/*在这里调用上传接口*///mui.ajax("图片上传接口", {//data: {//img: imgData//},//dataType: 'json',//type: 'post',//timeout: 10000,//success: function(data) {//ast('上传成功',{//duration:'long',//type:'div'//});//ElementById('head-img').src = imgPath;//ElementById('head-img1').src = imgPath;//ElementById('head-img2').src=imgPath;//}, //error: function(xhr, type, errorThrown) {//ast('网络异常，请稍后再试！');//}//});
    }
}
//将图片压缩转成base64
function getBase64Image(img) {var canvas = ateElement("canvas");var width = img.width;var height = img.height;// calculate the width and height, constraining the proportionsif(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,", "");
}                

转载于:.html