zoukankan      html  css  js  c++  java
  • 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,", "");
    }                
  • 相关阅读:
    Console.WriteLine输出字符格式化
    GridView动态生成列问题
    日历控件,可运行在XHTML1.0下
    GridView內容導出Excel時異常:必须置於有 runat=server 的表单标记之中
    圆弧分割
    矩阵变换
    使用group by 来统计的小作业
    group by 后使用 rollup 子句总结
    mysql字符串拼接,存储过程,(来自网上看到)
    【深入理解Linux内核】《第二章 内存寻址》笔记 (2014-06-28 12:38)
  • 原文地址:https://www.cnblogs.com/lijia-kapok/p/6565995.html
Copyright © 2011-2022 走看看