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 的实例对象，并将图片的  对象作为参数传入。
        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 的实例对象，并将图片的  对象作为参数传入。
    //         $(".loading").addClass("displaynone");

    //     },
    //     done: function(dataURL) { //裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象，会将裁剪出的图像数据DataURL作为参数传入。            
    //         console.log(dataURL);//dataURL裁剪后图片地址base64格式提交给后台处理
    //         $(".clipbg").hide()
    //     }
    // });
},

 

转载于:https://www.cnblogs.com/e0yu/p/10301003.html