uniApp实现选择图片裁剪设置用户头像

明日之后

[JavaScript] 纯文本查看 复制代码

//这里要实现的功能是裁剪图片修改用户头像，所以要调用接口上传到服务器。

//这里用到的until.方法都是自己封装或基于原uniapp方法封装的，功能语义化

// 获取图片

getImageInfo() {

        var _this = this;

        uni.showLoading({

                title: '图片生成中...',

        });

        // 将图片写入画布

        const ctx = uni.createCanvasContext('myCanvas');

        ctx.drawImage(_this.imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H);

        ctx.draw(true, () => {

                // 获取画布要裁剪的位置和宽度   均为百分比 * 画布中图片的宽度    保证了在微信小程序中裁剪的图片模糊  位置不对的问题 canvasT = (_this.cutT / _this.cropperH) * (_this.imageH / pixelRatio)

                var canvasW = ((_this.cropperW - _this.cutL - _this.cutR) / _this.cropperW) * IMG_REAL_W;

                var canvasH = ((_this.cropperH - _this.cutT - _this.cutB) / _this.cropperH) * IMG_REAL_H;

                var canvasL = (_this.cutL / _this.cropperW) * IMG_REAL_W;

                var canvasT = (_this.cutT / _this.cropperH) * IMG_REAL_H;

                uni.canvasToTempFilePath({

                        x: canvasL,

                        y: canvasT,

                        width: canvasW,

                        height: canvasH,

                        destWidth: canvasW,

                        destHeight: canvasH,

                        quality: 0.5,

                        canvasId: 'myCanvas',

                        success: function (res) {

                                uni.hideLoading()

                                uni.uploadFile({

                                        url : until.domain() + 'home/upload/upload',

                                        filePath:res.tempFilePath,

                                        name: 'file',

                                        success : function(res){

                                                //upload方法返回回来的数据是string类型，所以这里要转成json对象

                                                let result = JSON.parse(res.data)

                                                if(result.status == 1){

                                                        console.log("进入")

                                                        until.ly_request({

                                                                url : 'user/center/avatar',

                                                                method : 'post',

                                                                data : {

                                                                        avatar: {

                                                                                src : result.id

                                                                        },

                                                                        nocrop : true

                                                                },

                                                                success : function(res){

                                                                        // console.log(JSON.stringify(res))

                                                                        if(res.data.status == 1){

                                                                                uni.showToast({title:'头像修改成功'})

                                                                                setTimeout(function(){uni.navigateBack({delta:2})},1000)

                                                                        }

                                                                        until.tips(res)

                                                                }

                                                        })

                                                }

                                        }

                                })

                        }

                });

        });

},