mui 用户头像更改

html部分:

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

js部分:

/*点击头像触发*/
document.getElementById('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 = plus.camera.getCamera();
    var res = cmr.supportedImageResolutions[0];
    var fmt = cmr.supportedImageFormats[0];
    cmr.captureImage(function(path) {
        //plus.io.resolveLocalFileSystemURL(path, function(entry) {  
    plus.io.resolveLocalFileSystemURL(path, function(entry) {
        var localUrl = entry.toLocalURL();
        uploadHead(localUrl + "?version=" + new Date().getTime());
    }, function(err) {
        console.error("拍照失败:" + err.message);
    }, {
        index: 1
    });
    });
} 
//本地相册选择
function galleryImg() {
    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();
                uploadHead(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();
            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 = imgPath;
    image.onload = function() {
    var imgData = getBase64Image(image);
    console.log(imgData);
    /*在这里调用上传接口*/
    //mui.ajax("图片上传接口", {
        //data: {
        //img: imgData
        //},
        //dataType: 'json',
        //type: 'post',
        //timeout: 10000,
        //success: function(data) {
        //mui.toast('上传成功',{
            //duration:'long',
            //type:'div'
        //});
                //document.getElementById('head-img').src = imgPath;
        //document.getElementById('head-img1').src = imgPath;
        //document.getElementById('head-img2').src=imgPath;
        //}, 
            //error: function(xhr, type, errorThrown) {
        //mui.toast('网络异常,请稍后再试!');
        //}
    //});
    }
}
//将图片压缩转成base64
function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    var width = img.width;
    var height = img.height;
    // calculate the width and height, constraining the proportions
    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,", "");
}                

 

posted @ 2017-03-17 14:35  家猪难养  阅读(5339)  评论(1编辑  收藏  举报