hbuiler+MUI app 头像裁剪上传七牛

参考链接

账户页面

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../css/mui.min.css">
</head>

<body class="mui-fullscreen">
<!--页面主结构开始-->
<div id="app" class="mui-views">
    <div class="mui-view">
        <div class="mui-pages">
            <div id="account" class="mui-page">
                <div class="mui-page-content">
                    <div class="mui-scroll-wrapper">
                        <div class="mui-scroll">
                          <ul class="mui-table-view">
                              <li class="mui-table-view-cell">
                                  <a id="head" class="mui-navigate-right">头像
                                      <span class="mui-pull-right head">
                                <img class="head-img mui-action-preview"  :src="user_head"/>
                            </span>
                                </a>
                            </li>
                            <li class="mui-table-view-cell" id="promptBtn">
                                <a>姓名<span
                                        class="mui-pull-right">{{user_name}}</span></a>
                            </li>
                        </ul>
                        <ul class="mui-table-view">
                            <!--<li class="mui-table-view-cell">-->
                            <!--<a>QQ号<span class="mui-pull-right">88888888</span></a>-->
                            <!--</li>-->
                            <li class="mui-table-view-cell">
                                <a href="javascript:;">手机号<span
                                        class="mui-pull-right">{{user_tel}}</span></a>
                            </li>
                            <!--<li class="mui-table-view-cell">-->
                            <!--<a>邮箱地址<span class="mui-pull-right">hbuilder@dcloud.io</span></a>-->
                            <!--</li>-->
                        </ul>
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right" href="javascript:;" @tap="resetPwd">修改密码<span
                                        class="mui-pull-right"></span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>
<!--页面主结构结束-->

</body>
<script src="../../js/mui.min.js "></script>
<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/setting.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/app.min.js"></script>

<script>
    mui.init();
    mui.plusReady(function () {

    // 预加载修改密码
    resetPwdView = mui.preload({
        url: '../resetPwd.html',
        id: 'resetPwdView',
        styles: {
            "render": "always",
            "popGesture": "hide",
            "bounce": "vertical",
            "bounceBackground": "#efeff4",
            "titleNView": getTitleNView('修改密码')
        }
    });
});

/**
 * 统一导航获取方法
 * @param title
 * @returns {{backgroundColor: string, titleText: *, titleColor: string, type: string, autoBackButton: boolean, splitLine: {color: string}}}
 */
function getTitleNView(title) {
    return { //详情页原生导航配置
        backgroundColor: '#ffffff', //导航栏背景色
        titleText: title, //导航栏标题
        titleColor: '#000000', //文字颜色
        type: 'default', //透明渐变样式
        autoBackButton: true, //自动绘制返回箭头
        splitLine: { //底部分割线
            color: '#cccccc'
        }
    };
}

function getDefaultData() {
    return {
        guid: '',
        user_role: '',
        user_head: '',
        user_name: '',
        user_tel: '',
    }
}

var vue = new Vue({
    el: '#account',
    data: getDefaultData(),
    methods: {
        resetData: function () {//重置数据
            Object.assign(this.$data, getDefaultData());
        }
    }
});

// 监听传来的数据
document.addEventListener('userInfo', function (event) {
    var guid = event.detail.guid;
    if (!guid) {
        return;
    }
    //前页传入的数据，直接渲染，无需等待ajax请求详情后
    vue.guid = event.detail.guid;
    vue.user_role = event.detail.user_role;
    vue.user_head = event.detail.user_head;
    vue.user_name = event.detail.user_name;
    vue.user_tel = event.detail.user_tel;
});

//更换头像
mui(".mui-table-view-cell").on("tap", "#head", function (e) {
    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:
                    getImage();
                    break;
                case 2:
                    galleryImg();
                    break;
                default:
                    break
            }
        })
    }

});

/**
 * 点击拍照
 */
function getImage() {
    var c = plus.camera.getCamera();
    c.captureImage(function (e) {
        plus.io.resolveLocalFileSystemURL(e, function (entry) {
            var imgUrl = entry.toLocalURL();
            // 执行上传操作
            cutImage(imgUrl);
        }, function (e) {
        });
    }, function (s) {
    }, {
        filename: "_doc/head.jpg"
    })
}

/**
 * 点击打开相册
 */
function galleryImg() {
    plus.gallery.pick(function (a) {
        plus.io.resolveLocalFileSystemURL(a, function (entry) {
            plus.io.resolveLocalFileSystemURL("_doc/", function (root) {
                root.getFile("head.jpg", {}, function (file) {
                    //文件已存在
                    file.remove(function () {
                        entry.copyTo(root, 'head.jpg', function (e) {
                                var imgUrl = entry.toLocalURL();
                                cutImage(imgUrl);
                            },
                            function (e) {
                            });
                    }, function () {
                    });
                }, function () {
                    //文件不存在
                    entry.copyTo(root, 'head.jpg', function (e) {
                            var path = e.fullPath + "?version=" + new Date().getTime();
                        },
                        function (e) {
                        });
                });
            }, function (e) {
            })
        }, function (e) {
        });
    }, function (a) {
    }, {
        filter: "image"
    })
};


// 修改密码页面
function resetPwd() {
    //触发子窗口变更新闻详情
    mui.fire(resetPwdView, 'userInfo', {
        user_tel: vue.user_tel,
    });
    setTimeout(function () {
        resetPwdView.show("slide-in-right", 300);
    }, 150);
}


//裁剪图片
function cutImage(path) {
    console.log('打开裁剪页面');
    mui.openWindow({
        url: '../cropper.html',
        id: 'cropperPage',
        extras: {
            path: path,
            prePage: 'accountView'
        },
        show: {
            aniShow: 'zoom-fade-in',
            duration: 800
        },
        waiting: {
            autoShow: true
        }
    });
}

// 剪切之后  进行图片上传
document.addEventListener('updateHeadImg',function(event){
    //获得事件参数
    var my_icon = event.detail.img_path;
    console.log('拿到的页面数据:' + my_icon);
    //根据id向服务器请求新闻详情
    if(my_icon != "") {
        console.log('开始上传图片');
        uploadHead(my_icon);
    }
});

//上传头像图片
function uploadHead(base64Data) {
    var base64Data = base64Data.split(',')[1];
    console.log('转换过的base64数据是:' + base64Data);
    /*在这里调用上传接口*/
    mui.ajax({
        url: HOST + '/api/getQiniuToken',
        type: 'get',
        async: false,
        success: function (data) {
            console.log(JSON.stringify(data));
            var key = data.uptoken;
            var pic = base64Data;
            console.log(JSON.stringify('token' + key));
            //注意这个url,可以指定key(文件名), mimeType(文件类型)
            var url = "http://up.qiniu.com/putb64/-1";
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange=function(){

                if (xhr.readyState==4){
                    //这里可以判断图片上传成功,而且可以通过responseText获取图片链接
                    var data = JSON.parse(xhr.responseText)
                    console.log('上传后的数据:' + JSON.stringify(data));
                    var url = uploadBucket + data.key;

                    console.log('成功后的图片为:' + url);

                    // 上传成功之后 开始上传我们自己的服务器
                    mui.ajax({
                        url:HOST+'/api/updateUserHeaderPic',
                        type:'post',
                        headers: {
                            'Accept': 'application/json',
                            'Authorization': 'Bearer ' + plus.storage.getItem('access_token')
                        },
                        data: {
                            'user_pic': data.key
                        },
                        success:function(data){
                            if (data.StatusCode===200) {
                                // 修改本页面的头像
                                vue.user_head = url;
                                // 修改下个页面的头像
                                var settingPage =  plus.webview.getWebviewById('settingPage');
                                var indexPage =  plus.webview.getWebviewById('html/agent/agent-home.html');
                                mui.fire(settingPage, 'changeHeader', {header:url});
                                mui.fire(indexPage, 'changeHeader', {header:url});
                            } else {
                                mui.toast(data.ResultData)
                            }
                        },
                        error:function(a, b , c){
                            mui.toast('上传图片至服务器失败！')
                        }
                    })
                }
            }
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/octet-stream");
            xhr.setRequestHeader("Authorization", "UpToken "+ key);
            xhr.send(pic);
        }
    });
}
</script>

</html>

头像裁剪页面

  <!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>裁剪头像</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
<link href="../css/cropper.min.css" rel="stylesheet" />

<style type="text/css">
    body {
        background-color: #000000;
    }
    #cropper-example-1 {
        background-color: #000000;
        height: 93%;
        width: 100%;
        position: absolute;
    }

    #quxiao,
    #xuanzhuan,
    #xuanqu {
        font-size: 20px;
    }

    .divbut {
        width: 100%;
        text-align: center;
        position: fixed;
        z-index: 2;
        bottom: 0px;
        background-color: #000000;
        height: 7.5%;
        line-height: 50px;
    }

    .divbut>div:first-child {
        float: left;
        width: 20%;
    }

    .divbut>div:last-child {
        float: right;
        width: 20%;
    }

    img#im {
        height: 100%;
        width: 100%;
    }
</style>
</head>

<body>
<div id="cropper-example-1" class="mui-hidden">
    <img id="im" alt="Picture" />
</div>

<div class="divbut">
    <div>
        <p id="quxiao" class="iconfont icon-quxiao">取消</p>
    </div>
    <div>
        <p id="xuanqu" class="iconfont icon-queding">确认</p>
    </div>
</div>
<img src="" alt="" class="mui-hidden" id="im_exif" />

<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/mui.min.js"></script>
<script  src="../js/exif.js"></script>
<script src="../js/cropper.min.js"></script>
<script src="../js/app.min.js"></script>
<script>
(function(c) {
    var Cro = function() {}
    c.extend(Cro.prototype, {
        orientation: null,
        urldata: null,
        view: null,
        num: 0,
        sbx: null,
        sby: null,
        n: 0,
        onReady: function() {
            var that = this;
            mui.init();
            that.bindEvent();
            that.view = plus.webview.currentWebview();

            var img = document.getElementById("im_exif");
            img.src = that.view.path;
            img.addEventListener("load", function() {
                //exif调整图片的横竖
                EXIF.getData(this, function() {
                    var orientation = EXIF.getAllTags(this).Orientation;
                    $("#im").attr("src", that.loadcopyImg(img, orientation));
                    document.getElementById("cropper-example-1").classList.remove("mui-hidden"); //显示裁剪区域
                    that.cropperImg();
                });
            })
        },
        cropperImg: function() {
            var that = this;
            $('#cropper-example-1 > img').cropper({
                aspectRatio: 1 / 1,
                autoCropArea: 1,
                strict: true,
                background: false,
                guides: false,
                highlight: false,
                dragCrop: false,
                movable: false,
                resizable: false,
                crop: function(data) {
                    that.urldata = that.base64(data);
                }
            });
        },
        loadcopyImg: function(img, opt) {
            var that = this;
            var canvas = document.createElement("canvas");
            var square = 500;
            var imageWidth, imageHeight;
            if(img.width > img.height) {
                imageHeight = square;
                imageWidth = Math.round(square * img.width / img.height);
            } else {
                imageHeight = square; //this.width;
                imageWidth = Math.round(square * img.width / img.height);
            }
            canvas.height = imageHeight;
            canvas.width = imageWidth;
            if(opt == 6) {
                that.num = 90;
            } else if(opt == 3) {
                that.num = 180;
            } else if(opt == 8) {
                that.num = 270;
            }
            if(that.num == 360) {
                that.num = 0;
            }

            var ctx = canvas.getContext("2d");
            ctx.translate(imageWidth / 2, imageHeight / 2);
            ctx.rotate(that.num * Math.PI / 180);
            ctx.translate(-imageWidth / 2, -imageHeight / 2);
            ctx.drawImage(img, 0, 0, imageWidth, imageHeight);
            var dataURL = canvas.toDataURL("image/jpeg", 1);
            return dataURL;
        },
        bindEvent: function() {
            var that = this;
            document.getElementById("quxiao").addEventListener("tap", function() {
                mui.back();            //取消就直接返回
            });

            /**
             *  根据页面决定触发那个页面更新
             */
            document.getElementById("xuanqu").addEventListener("tap", function() {
                var preView = plus.webview.getWebviewById(that.view.prePage);
                //触发上一个页面刷新图片事件
                console.log('传到的数据:' + that.urldata);
                mui.fire(preView,'updateHeadImg',{
                    img_path:that.urldata
                });
                mui.back();
            });
        },
        base64: function(data) {
            var that = this;
            var img = document.getElementById("im");

            var canvas = document.createElement("canvas");
            //像素
            canvas.height = 500;
            canvas.width = 500;
            var bx = data.x;
            var by = data.y;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, bx, by, data.width, data.height, 0, 0, 500, 500);
            var dataURL = canvas.toDataURL("image/jpeg", 1.0);            //第二个参数是质量
            return dataURL;
        }
    });

    var cro = new Cro();

    c.plusReady(function() {
        cro.onReady();
    })
})(mui)
</script>
</body>

</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,401评论 25赞 707
  • SpringMVC下用Jcrop预览裁剪上传头像
    date: 2017/4/10 16:17:25tags: Jcrop 预览裁剪上传头像 最近用了Jcrop实现了...
    iftom阅读 851评论 0赞 2
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4赞 62
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1赞 92
  • 十年一觉扬州梦
    故人西辞黄鹤楼，烟花三月下扬州。 孤帆远影碧空尽，唯见长江天际流。 大诗人李白的这首《送孟浩然之广陵》，穿透历史烟...
    流星雨儿下阅读 2,811评论 29赞 69