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('修改密碼')
        }
    });
});

/**
 * 統(tǒng)一導航獲取方法
 * @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 () {//重置數(shù)據(jù)
            Object.assign(this.$data, getDefaultData());
        }
    }
});

// 監(jiān)聽傳來的數(shù)據(jù)
document.addEventListener('userInfo', function (event) {
    var guid = event.detail.guid;
    if (!guid) {
        return;
    }
    //前頁傳入的數(shù)據(jù)，直接渲染，無需等待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();
            // 執(zhí)行上傳操作
            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() {
    //觸發(fā)子窗口變更新聞詳情
    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){
    //獲得事件參數(shù)
    var my_icon = event.detail.img_path;
    console.log('拿到的頁面數(shù)據(jù):' + my_icon);
    //根據(jù)id向服務器請求新聞詳情
    if(my_icon != "") {
        console.log('開始上傳圖片');
        uploadHead(my_icon);
    }
});

//上傳頭像圖片
function uploadHead(base64Data) {
    var base64Data = base64Data.split(',')[1];
    console.log('轉換過的base64數(shù)據(jù)是:' + 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('上傳后的數(shù)據(jù):' + 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"); //顯示裁剪區(qū)域
                    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();            //取消就直接返回
            });

            /**
             *  根據(jù)頁面決定觸發(fā)那個頁面更新
             */
            document.getElementById("xuanqu").addEventListener("tap", function() {
                var preView = plus.webview.getWebviewById(that.view.prePage);
                //觸發(fā)上一個頁面刷新圖片事件
                console.log('傳到的數(shù)據(jù):' + 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);            //第二個參數(shù)是質量
            return dataURL;
        }
    });

    var cro = new Cro();

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

</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,167評論 25贊 708
  • date: 2017/4/10 16:17:25tags: Jcrop 預覽裁剪上傳頭像 最近用了Jcrop實現(xiàn)了...
    iftom閱讀 923評論 0贊 2
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 15,422評論 4贊 61
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,168評論 1贊 92
  • 故人西辭黃鶴樓，煙花三月下?lián)P州。 孤帆遠影碧空盡，唯見長江天際流。 大詩人李白的這首《送孟浩然之廣陵》，穿透歷史煙...
    流星雨兒下閱讀 2,927評論 29贊 70

友情鏈接更多精彩內容