MUI---上傳頭像功能實現

這裏使用MUI上傳頭像的功能是結合VUE來作的，因此：

changeFace:function(){
    var IMAGE_UNSPECIFIED = "image/*"; //相冊顯示的文件類型
    var PHOTOZOOM = 2; // 獲取完圖片返回key
    var PHOTOLAT = 1; // 剪裁完畢後返回key
    var main = plus.android.runtimeMainActivity(); //h5+獲取應用主Activity實例對象
    var Intent = plus.android.importClass("android.content.Intent");
    //導入java類intent對象  如下importClass都是使用安卓原生類
    var MediaStore = plus.android.importClass("android.provider.MediaStore");
    var File = plus.android.importClass("java.io.File");
    var Uri = plus.android.importClass("android.net.Uri");
    var intent = new Intent(Intent.ACTION_PICK, null);
    intent.setDataAndType(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, IMAGE_UNSPECIFIED);
    intent.putExtra("scale", true);
    intent.putExtra("scaleUpIfNeeded", true);
    var outPutPath = plus.io.convertLocalFileSystemURL("_www/head.jpg");
    main.startActivityForResult(intent, PHOTOZOOM);
    // uploadImgPath
    main.onActivityResult = (requestCode,resultCode,data)=>{
    // main.onActivityResult = function(requestCode, resultCode, data) {
        if (PHOTOZOOM == requestCode) {         
            var file = new File(outPutPath);
            // 輸出目錄uri
            var outPutUri = Uri.fromFile(file);
            if (data == undefined) {
                return false;
            }
            plus.android.importClass(data);
            var uri = data.getData();
            var cropIntent = new Intent("com.android.camera.action.CROP"); //裁剪
            cropIntent.setDataAndType(uri, IMAGE_UNSPECIFIED);
            // 截圖完畢後 輸出目錄
            cropIntent.putExtra(MediaStore.EXTRA_OUTPUT, outPutUri);
            cropIntent.putExtra("crop", "true");
            //aspectX aspectY 是寬高的比例
            cropIntent.putExtra("aspectX", 1);
            cropIntent.putExtra("aspectY", 1);
            // outputX outputY 是裁剪圖片寬高
            cropIntent.putExtra("outputX", 70);
            cropIntent.putExtra("outputY", 70);
            cropIntent.putExtra("return-data", true);
            main.startActivityForResult(cropIntent, PHOTOLAT);
        } else if (requestCode == PHOTOLAT) {
            if (data == undefined) {
                return false;
            }
            var a = new File(outPutPath);
            if (!a.exists()) {
                console.log(outPutPath);
                mui.toast('裁剪錯誤');
                return false;
            }
            this.uploadImgPath = outPutPath;
            console.log(outPutPath);
            alert(outPutPath);
            // img.src = outPutPath;
        };
    };
    // user/profile/update/
    var server = "";
    server = config.userProfileUpdate;
    var files = [];
    var upload_img = (p)=>{
        files = [];
        var n = p.substr(p.lastIndexOf('/')+1);
        files.push({name:"uploadkey"},{path:p});
        // 開始上傳
        start_upload();
    };
    var start_upload = ()=>{
        if(files.length <= 0){
            plus.nativeUI.alert("沒有添加上傳文件");
            return;
        };
        // 原生的轉圈等待框
        var wt = plus.nativeUI.showWaiting();
        var task = plus.uploader.createUpload(server,{methods:"POST"},(t,status){
            // 上傳完成 
            alert(status);
            if(status == 200){
                // 資源
                var responseText = t.responseText;
                // 轉化爲json
                var json = eval('('+responseText+')');
                // 上傳文件的信息
                var files = json.files;
                // 上傳成功之後的保存路徑
                var img_url = files.uploadkey.url;
                alert(img_url);
                // ajax 寫入數據庫
                // 關閉轉圈等待框
                wt.close();
            }else{
                console.log("上傳失敗："+status);
            };
        });
        task.addData("client","");
        task.addData("uid",getUid()); // 每次都不一樣
        for(var i=0;i<files.length;i++){
            var f = files[i];
            task.addFile(f.path,{key:f.name});
        };
        task.start();// 執行到這裏纔會開始上傳
    };
    // 產生一個隨機數
    var getUid = (){
        return Math.floor(Math.random()*100000000+100000000).toString();
    };
    // main.onActivityResult = function(requestCode, resultCode, data) {
    //     if (PHOTOZOOM == requestCode) {
 
    //         var file = new File(outPutPath);
    //         // 輸出目錄uri
    //         var outPutUri = Uri.fromFile(file);
    //         if (data == undefined) {
    //             return false;
    //         }
    //         plus.android.importClass(data);
    //         var uri = data.getData();
    //         var cropIntent = new Intent("com.android.camera.action.CROP"); //裁剪
    //         cropIntent.setDataAndType(uri, IMAGE_UNSPECIFIED);
    //         // 截圖完畢後 輸出目錄
    //         cropIntent.putExtra(MediaStore.EXTRA_OUTPUT, outPutUri);
    //         cropIntent.putExtra("crop", "true");
    //         //aspectX aspectY 是寬高的比例
    //         cropIntent.putExtra("aspectX", 1);
    //         cropIntent.putExtra("aspectY", 1);
    //         // outputX outputY 是裁剪圖片寬高
    //         cropIntent.putExtra("outputX", 70);
    //         cropIntent.putExtra("outputY", 70);
    //         cropIntent.putExtra("return-data", true);
    //         main.startActivityForResult(cropIntent, PHOTOLAT);
    //     } else if (requestCode == PHOTOLAT) {
    //         if (data == undefined) {
    //             return false;
    //         }
    //         var a = new File(outPutPath);
    //         if (!a.exists()) {
    //             console.log(outPutPath);
    //             mui.toast('裁剪錯誤');
    //             return false;
    //         }
    //         console.log(outPutPath);
    //         alert(outPutPath);
    //         // img.src = outPutPath;
    //     } 
    // }
    // this.showSelectFace = !this.showSelectFace;
    // this.selectFace = true;
    // this.mask = mui.createMask((res)=>{
    //     this.selectFace = false;
    // });
    // this.mask.show();
    // 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; 
    //         } 
    //     }) 
    // };
    // 拍照
    function getImage() { 
        var c = plus.camera.getCamera(); 
        c.captureImage(function(e) { 
            plus.io.resolveLocalFileSystemURL(e, function(entry) { 
                var s = entry.toLocalURL() + "?version=" + new Date().getTime(); 
                uploadHead(s); /*上傳圖片*/ 
            }, function(e) { 
                console.log("讀取拍照文件錯誤：" + e.message); 
            }); 
        }, function(s) { 
            console.log("error" + s); 
        }, { 
            filename: "_doc/head.png" 
        }) 
    };
    // 本地相冊
    function galleryImg() {
        // 從相冊中選擇圖片
        console.log("從相冊中選擇圖片");
        plus.gallery.pick(function(path){
            console.log(path);
        },function ( e ) {
            console.log( "取消選擇圖片" );
        }, {filter:"image"} );            
        // 從相冊中選擇圖片 
        // 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) { 
        console.log("imgPath = " + imgPath); 
        mainImage.src = imgPath; 
        mainImage.style.width = "60px"; 
        mainImage.style.height = "60px";
        var image = new Image(); 
        image.src = imgPath; 
        image.onload = function() { 
            var imgData = getBase64Image(image);
            pc = new PhotoClip("#clipArea",{
                size: [300, 300],//裁剪框大小
                outputSize:[0,0],//打開圖片大小，[0,0]表示原圖大小
                ok:"#clipBtn",
                img: imgPath,
                // 圖片開始加載的回調函數。this 指向當前 PhotoClip 的實例對象，並將正在加載的 file 對象做爲參數傳入。（若是是使用非 file 的方式加載圖片，則該參數爲圖片的 url）
                loadStart:function(){},
                // 圖片加載完成的回調函數。this 指向當前 PhotoClip 的實例對象，並將圖片的 <img> 對象做爲參數傳入。
                loadComplete:function(){},
                // 裁剪完成的回調函數。this 指向當前 PhotoClip 的實例對象，會將裁剪出的圖像數據DataURL做爲參數傳入。
                done:function(dataURL){
                    // 在這裏調用上傳接口
                    // mui.ajax("圖片上傳接口",{
                    //     data:{},
                    //     dataType:'json', 
                    //     type:'post', 
                    //     timeout:10000, 
                    //     success:function(data){console.log('上傳成功');}, 
                    //     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,", ""); 
    };
},