微信小程序 上传头像截图功能

越来越多的微信小程序 拥有了自己的个人中心, 既然有了个人中心 那就要有 头像了, 有些人不想用微信的头像来当做小程序的头像, 于是有了下面的问题 头像上传, 以及截取头像.

这种方法 是比较简单的一种 下面是主要的JS 在文章最后有源码下载地址 直接放在小程序的page 里面打开即可查看效果



// pages/wx-cropper/index.js
var network = require("../../utils/api.js").default
// 手机的宽度
var windowWRPX = 750
// 拖动时候的 pageX
var pageX = 0
// 拖动时候的 pageY
var pageY = 0

var pixelRatio = wx.getSystemInfoSync().pixelRatio

// 调整大小时候的 pageX
var sizeConfPageX = 0
// 调整大小时候的 pageY
var sizeConfPageY = 0

var initDragCutW = 0
var initDragCutL = 0
var initDragCutH = 0
var initDragCutT = 0
var qualityWidth = 1080
var innerAspectRadio = 1
// 移动时 手势位移与 实际元素位移的比
var dragScaleP = 2

Page({
    /**
     * 页面的初始数据
     */
    data: {
        // imageSrc: 'https://lpd.hi-finance.com.cn/20170918001.jpg',
        // 'https://lpd.hi-finance.com.cn/9019013.png'
        imageSrc: '',
        returnImage: '',
        isShowImg: true,
        // 初始化的宽高
        cropperInitW: windowWRPX,
        cropperInitH: 92,
        // 动态的宽高
        cropperW: windowWRPX,
        cropperH: windowWRPX,
        // 动态的left top值
        cropperL: 0,
        cropperT: 0,

        // 图片缩放值
        scaleP: 0,
        imageW: 0,
        imageH: 0,

        // 裁剪框 宽高
        cutW: 0,
        cutH: 0,
        cutL: 0,
        cutT: 0,
        qualityWidth: qualityWidth,
        innerAspectRadio: innerAspectRadio,
        //要上传的img
        img: ''
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        console.log(options.img);
        this.setData({
            imageSrc: options.img,
        })
        this.loadImage();
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    getImage: function () {

        var _this = this
        wx.chooseImage({
            success: function (res) {
                _this.setData({
                    imageSrc: res.tempFilePaths[0],
                })
                _this.loadImage();
            },
        })
        // wx.showToast({
        // title: 'sss',
        // })
    },
    loadImage: function () {
        var _this = this
        wx.showLoading({
            title: '加载中...',
        })

        wx.getImageInfo({
            src: _this.data.imageSrc,

            // src:src,
            success: function success(res) {
                console.log(res);
                innerAspectRadio = res.width / res.height;

                // 根据图片的宽高显示不同的效果 保证图片可以正常显示
                if (innerAspectRadio >= 1) {
                    // 宽型图片就让高当边框
                    var width = windowWRPX / innerAspectRadio > 500 ? 500 : windowWRPX /
                        innerAspectRadio;

                    _this.setData({
                        cropperW: windowWRPX,
                        cropperH: windowWRPX / innerAspectRadio,
                        // 初始化left right
                        // cropperL: Math.ceil((windowWRPX - windowWRPX) / 2),
                        // cropperT: Math.ceil((windowWRPX - windowWRPX / innerAspectRadio) / 2),
                        // 裁剪框 宽高
                        cutW: width,
                        cutH: width,
                        cutL: Math.ceil((windowWRPX - width) / 2),
                        cutT: Math.ceil((windowWRPX - width) / 2),
                        // 图片缩放值
                        scaleP: res.width * pixelRatio / windowWRPX,
                        // 图片原始宽度 rpx
                        imageW: res.width * pixelRatio,
                        imageH: res.height * pixelRatio,

                        innerAspectRadio: innerAspectRadio
                    })
                } else {
                    // 窄型图片居然跟宽当大小
                    var width = windowWRPX * innerAspectRadio > 500 ? 500 : windowWRPX *
                        innerAspectRadio;
                    _this.setData({
                        cropperW: windowWRPX,
                        cropperH: windowWRPX / innerAspectRadio,
                        // 初始化left right
                        // cropperL: Math.ceil((windowWRPX - windowWRPX * innerAspectRadio) / 2),
                        // cropperT: Math.ceil((windowWRPX - windowWRPX) / 2),
                        // 裁剪框的宽高
                        cutW: width,
                        cutH: width,
                        cutL: Math.ceil((windowWRPX - width) / 2),
                        cutT: Math.ceil((windowWRPX - width) / 2),
                        // 图片缩放值
                        scaleP: res.width * pixelRatio / windowWRPX,
                        // 图片原始宽度 rpx
                        imageW: res.width * pixelRatio,
                        imageH: res.height * pixelRatio,

                        innerAspectRadio: innerAspectRadio
                    })
                }
                _this.setData({
                    isShowImg: true
                })
                wx.hideLoading()
            }
        })
    },
    // 拖动时候触发的touchStart事件
    contentStartMove(e) {
        pageX = e.touches[0].pageX
        pageY = e.touches[0].pageY
    },

    // 拖动时候触发的touchMove事件
    contentMoveing(e) {
        var _this = this
        // _this.data.cutL + (e.touches[0].pageX - pageX)
        // console.log(e.touches[0].pageX)
        // console.log(e.touches[0].pageX - pageX)
        var dragLengthX = (pageX - e.touches[0].pageX) * dragScaleP
        var dragLengthY = (pageY - e.touches[0].pageY) * dragScaleP
        var minX = Math.max(_this.data.cutL - (dragLengthX), 0)
        var minY = Math.max(_this.data.cutT - (dragLengthY), 0)
        var maxX = _this.data.cropperW - _this.data.cutW
        var maxY = _this.data.cropperH - _this.data.cutH
        this.setData({
            cutL: Math.min(maxX, minX),
            cutT: Math.min(maxY, minY),
        })
        console.log(`${maxX} ----- ${minX}`)
        pageX = e.touches[0].pageX
        pageY = e.touches[0].pageY
    },

    // 获取图片
    getImageInfo() {

        var _this = this

        wx.showLoading({
            title: '图片生成中...',
        })
        // 将图片写入画布
        const ctx = wx.createCanvasContext('myCanvas')
        ctx.drawImage(_this.data.imageSrc, 0, 0, qualityWidth, qualityWidth / innerAspectRadio);
        ctx.draw(true, () => {
            // 获取画布要裁剪的位置和宽度 均为百分比 * 画布中图片的宽度 保证了在微信小程序中裁剪的图片模糊 位置不对的问题 canvasT = (_this.data.cutT / _this.data.cropperH) * (_this.data.imageH / pixelRatio)
            var canvasW = (_this.data.cutW / _this.data.cropperW) * qualityWidth
            var canvasH = (_this.data.cutH / _this.data.cropperH) * qualityWidth / innerAspectRadio
            var canvasL = (_this.data.cutL / _this.data.cropperW) * qualityWidth
            var canvasT = (_this.data.cutT / _this.data.cropperH) * qualityWidth / innerAspectRadio
            console.log(
                `canvasW:${canvasW} --- canvasH: ${canvasH} --- canvasL: ${canvasL} --- canvasT: ${canvasT} -------- _this.data.imageW: ${_this.data.imageW} ------- _this.data.imageH: ${_this.data.imageH} ---- pixelRatio ${pixelRatio}`
            )
            wx.canvasToTempFilePath({
                x: canvasL,
                y: canvasT,
                width: canvasW,
                height: canvasH,
                destWidth: canvasW,
                destHeight: canvasH,
                quality: 0.5,
                canvasId: 'myCanvas',
                success: function (res) {
                    wx.hideLoading()
                    // 成功获得地址的地方
                    console.log(res.tempFilePath)
                    _this.setData({
                        img: res.tempFilePath,
                    })
                    _this.upimg();
                }
            })
        })
    },
    upimg() {
        var _this = this;
        var aa = {}
        network.upload('users/updateUsersInfo', _this.data.img, aa,
            function (data) {
                console.log(data)
                wx.switchTab({
                    url: '../user/user'
                })
            })
    },
    // 设置大小的时候触发的touchStart事件
    dragStart(e) {
        var _this = this
        sizeConfPageX = e.touches[0].pageX
        sizeConfPageY = e.touches[0].pageY
        initDragCutW = _this.data.cutW
        initDragCutL = _this.data.cutL
        initDragCutT = _this.data.cutT
        initDragCutH = _this.data.cutH
    },

    // 设置大小的时候触发的touchMove事件
    dragMove(e) {
        var _this = this
        var dragType = e.target.dataset.drag
        switch (dragType) {
            case 'right':
                var dragLength = (sizeConfPageX - e.touches[0].pageX) * dragScaleP
                if (initDragCutW >= dragLength) {
                    // 如果 移动小于0 说明是在往下啦 放大裁剪的高度 这样一来 图片的高度 最大 等于 图片的top值加 当前图片的高度 否则就说明超出界限
                    if (dragLength < 0 && _this.data.cropperW > initDragCutL + _this.data.cutW) {
                        this.setData({
                            cutW: initDragCutW - dragLength
                        })
                    }
                    // 如果是移动 大于0 说明在缩小 只需要缩小的距离小于原本裁剪的高度就ok
                    if (dragLength > 0) {
                        this.setData({
                            cutW: initDragCutW - dragLength
                        })
                    } else {
                        return
                    }
                } else {
                    return
                }
                break;
            case 'left':
                var dragLength = (dragLength = sizeConfPageX - e.touches[0].pageX) * dragScaleP
                console.log(dragLength)
                if (initDragCutW >= dragLength && initDragCutL > dragLength) {
                    if (dragLength < 0 && Math.abs(dragLength) >= initDragCutW) return
                    this.setData({
                        cutL: initDragCutL - dragLength,
                        cutW: initDragCutW + dragLength
                    })
                } else {
                    return;
                }
                break;
            case 'top':
                var dragLength = (sizeConfPageY - e.touches[0].pageY) * dragScaleP
                if (initDragCutH >= dragLength && initDragCutT > dragLength) {
                    if (dragLength < 0 && Math.abs(dragLength) >= initDragCutH) return
                    this.setData({
                        cutT: initDragCutT - dragLength,
                        cutH: initDragCutH + dragLength
                    })
                } else {
                    return;
                }
                break;
            case 'bottom':
                var dragLength = (sizeConfPageY - e.touches[0].pageY) * dragScaleP
                // console.log(_this.data.cropperH > _this.data.cutT + _this.data.cutH)
                console.log(dragLength)
                console.log(initDragCutH >= dragLength)
                console.log(_this.data.cropperH > initDragCutT + _this.data.cutH)
                // 必须是 dragLength 向上缩小的时候必须小于原本的高度
                if (initDragCutH >= dragLength) {
                    // 如果 移动小于0 说明是在往下啦 放大裁剪的高度 这样一来 图片的高度 最大 等于 图片的top值加 当前图片的高度 否则就说明超出界限
                    if (dragLength < 0 && _this.data.cropperH > initDragCutT + _this.data.cutH) {
                        this.setData({
                            cutH: initDragCutH - dragLength
                        })
                    }
                    // 如果是移动 大于0 说明在缩小 只需要缩小的距离小于原本裁剪的高度就ok
                    if (dragLength > 0) {
                        this.setData({
                            cutH: initDragCutH - dragLength
                        })
                    } else {
                        return
                    }
                } else {
                    return
                }
                break;
            case 'rightBottom':
                var dragLengthX = (sizeConfPageX - e.touches[0].pageX) * dragScaleP
                var dragLengthY = (sizeConfPageY - e.touches[0].pageY) * dragScaleP
                if (initDragCutH >= dragLengthY && initDragCutW >= dragLengthX) {
                    // bottom 方向的变化
                    if ((dragLengthY < 0 && _this.data.cropperH > initDragCutT + _this.data.cutH) || (
                            dragLengthY > 0)) {
                        this.setData({
                            cutH: initDragCutH - dragLengthY
                        })
                    }

                    // right 方向的变化
                    if ((dragLengthX < 0 && _this.data.cropperW > initDragCutL + _this.data.cutW) || (
                            dragLengthX > 0)) {
                        this.setData({
                            cutW: initDragCutW - dragLengthX
                        })
                    } else {
                        return
                    }
                } else {
                    return
                }
                break;
            default:
                break;
        }
    },

})


最后附上源码

链接： https: //pan.baidu.com/s/1o03VV8Cw4WIOx7igCrGEKg 密码：ol96