mui+vue+photoclip做APP頭像裁剪上傳

做APP由於項目需要，需要做用戶頭像上傳的功能，頭像上傳包括拍照和相冊選擇圖片進行上傳，這里使用的技術是mui封裝的plus，在進行圖片裁剪的時候，使用的是photoclip來進行裁剪，由於個人在使用mui自帶的組件做圖片上傳比較麻煩，所以就采用了base64的圖片做上傳會比較簡單，頁面的渲染采用的VUE來進行雙向數據綁定。

不說了，看代碼：

changeFace:function(){
    this.selectFace = true;
    this.mask = mui.createMask((res)=>{
        this.selectFace = false;
    });
    this.mask.show();            
},
// 拍照
takingPictures:function(){            
    this.selectFace = false;
    this.mask.close();
    // 拍照
    var c = plus.camera.getCamera();
    c.captureImage((e)=>{
        plus.io.resolveLocalFileSystemURL(e,(entry)=>{
            var path = entry.toLocalURL() + "?version=" + new Date().getTime();
            console.log(path);
            this.cutOutPictures(path);
            // alert(imgPath);
        },(e)=>{
            console.log("讀取拍照片文件錯誤：" + e.message);
        });
    },(s)=>{
        console.log("error:"+s);
    },{
        filename: "_doc/head.png"
    }); 
    // this.cutOutPictures();
    // console.log('takingPictures');
},
// 從相冊中選擇
selectFromalbum:function(){            
    this.selectFace = false;
    this.mask.close();
    // 從相冊中選擇圖片
    console.log("從相冊中選擇圖片");
    plus.gallery.pick((path)=>{
        console.log(path);
        this.cutOutPictures(path);
    },(e)=>{
        console.log("取消選擇圖片");
    },{filter:"image"});
    //console.log('selectFromalbum');
},
// 裁剪圖片
cutOutPictures:function(imgSrc){
    var that = this;
    that.showSelectFace = true;
    var saveImg = (imgPath)=>{
        imgPath = imgPath.replace("data:image/jpeg;base64,", ""); 
        this.data = {avatar:imgPath};
        this.data = config.getParam(this.data);
        mui.post(config.userProfileUpdate,this.data,(res)=>{
            if(res.code == 200){
                config.userInfo.avatar = res.data.avatar;
                config.setStorage('userInfo',JSON.stringify(config.userInfo));
                mui.toast("頭像修改成功");
            }else{
                mui.toast(res.msg);
            };
        });
    };
    var clipArea = new  PhotoClip("#clipArea", {
        size: [300, 300],//裁剪框大小
        outputSize:[0,0],//打開圖片大小，[0,0]表示原圖大小
        file: "#file",
        ok: "#clipBtn",
        // img: "http://127.0.0.1/ff.jpg",
        // img:'http://m3.biz.itc.cn/pic/new/n/50/14/Img5431450_n.jpg',
        // img:"file:///F:/MuiProject/domo6/images/music0.jpg",
        // img: "../images/music0.jpg",
        // img: "../images/huiyuan_03.jpg?version=124545487878",
        img:imgSrc,
        // 圖片開始加載的回調函數。this 指向當前 PhotoClip 的實例對象，並將正在加載的 file 對象作為參數傳入。（如果是使用非 file 的方式加載圖片，則該參數為圖片的 url）
        loadStart: function(){ 
            $(".loading").removeClass("displaynone");
        },
        // 圖片加載完成的回調函數。this 指向當前 PhotoClip 的實例對象，並將圖片的 <img> 對象作為參數傳入。
        loadComplete: function() {
            $(".loading").addClass("displaynone");
        },
        // 裁剪完成的回調函數。this 指向當前 PhotoClip 實例對象，會將裁剪出的圖像數據DataURL作為參數傳入。
        done: function(dataURL){
            that.showSelectFace = false;
            saveImg(dataURL);
            // console.log(dataURL);//dataURL裁剪后圖片地址base64格式提交給后台處理
            $(".clipbg").hide()
        }
    });
    $("#cancelBtn").on('tap',()=>{
        that.showSelectFace = false;
        $(".clipbg").hide();
    });
    // this.showSelectFace = true;
    // var clipArea = new  PhotoClip("#clipArea", {
    //     size: [300, 300],//裁剪框大小
    //     outputSize:[0,0],//打開圖片大小，[0,0]表示原圖大小
    //     file: "#file",
    //     ok: "#clipBtn",
    //     // img: "http://127.0.0.1/ff.jpg",
    //     // img:'http://m3.biz.itc.cn/pic/new/n/50/14/Img5431450_n.jpg',
    //     // img:"file:///F:/MuiProject/domo6/images/music0.jpg",
    //     img: "../images/music0.jpg",
    //     loadStart: function() { //圖片開始加載的回調函數。this 指向當前 PhotoClip 的實例對象，並將正在加載的 file 對象作為參數傳入。（如果是使用非 file 的方式加載圖片，則該參數為圖片的 url）
    //         $(".loading").removeClass("displaynone");
    //     },
    //     loadComplete: function() {//圖片加載完成的回調函數。this 指向當前 PhotoClip 的實例對象，並將圖片的 <img> 對象作為參數傳入。
    //         $(".loading").addClass("displaynone");

    //     },
    //     done: function(dataURL) { //裁剪完成的回調函數。this 指向當前 PhotoClip 的實例對象，會將裁剪出的圖像數據DataURL作為參數傳入。            
    //         console.log(dataURL);//dataURL裁剪后圖片地址base64格式提交給后台處理
    //         $(".clipbg").hide()
    //     }
    // });
},