小程序图片裁剪we-cropper的使用

小程序涉及到了用户上传头像的功能,用户可以手动选择裁剪区域。

(1)上传头像页面

选择图片,将得到的src地址传递到图片裁剪页面

wx.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: function(res) {
        const src = res.tempFilePaths[0];
        wx.navigateTo({
            url: '../upload/upload?src=' + src
        })
    },
})

(2)图片裁剪页面

1、引入we-cropper.wxml,主要为了置入canvas作为图片裁剪的容器