首先从相册或者拍照选择图片 js代码：
//点击上传头像方法 showAction() { let that = this wx.showActionSheet({ itemList: ['从相册中选择', '拍照'], success: function(res) { if (!res.cancel) { console.log(res.tapIndex) if (res.tapIndex == 0) { that.chooseWxImage('album') } else if (res.tapIndex == 1) { that.chooseWxImage('camera') } } } }) }, chooseWxImage: function(type) { var that = this; wx.chooseImage({ count:1, sizeType: ['original', 'compressed'], sourceType: [type], success: function(res) { console.log(res); // that.setData({ // // tempFile ath可以作为img标签的src属性显示图片 // avatar: res.tempFilePaths[0], // }) var tempFilePaths = res.tempFilePaths; wx.navigateTo({ url: "/pages/avatarCut/index?src=" + tempFilePaths }); } }) },然后新建一个页面，放置画布等，对裁剪图片进行操作 这个地方需要引入一个组件，当如小程序文件中的components文件夹里就可以，文章尾部会有放置下载地址
html代码：
//引入的组件 <import src="../../components/we-cropper/we-cropper.wxml"/> <view class="cropper-wrapper"> <template is="we-cropper" data="{{...cropperOpt}}"/> <view class="cropper-buttons"> <canvas canvas-id='attendCanvasId' class='myCanvas' style="width:100px;height:100px;"></canvas> <view class="upload" bindtap="uploadTap">重新选择</view> <view class="getCropperImage" bindtap="getCropperImage">确定</view> </view> </view>js代码
// pages/avatarCut/avatarCut.js const app = getApp() //引入的组件 import WeCropper from '../../components/we-cropper/we-cropper.js' const device = wx.getSystemInfoSync() const width = device.windowWidth const height = device.windowHeight - 150 const token = wx.getStorageSync('token') Page({ data: { cropperOpt: { id: 'cropper', width, height, scale: 2.5, zoom: 8, cut: { x: (width - 200) / 2, y: (height - 200) / 2, width: 200, height: 200 } }, avatar: "", canvasImgUrl: '', imageSize: '' }, touchStart(e) { this.wecropper.touchStart(e) }, touchMove(e) { this.wecropper.touchMove(e) }, touchEnd(e) { this.wecropper.touchEnd(e) }, //这个是保存上传裁剪后的图片的方法 getCropperImage() { var that = this this.wecropper.getCropperImage((avatar) => { if (avatar) { that.getCanvasImg(0, 0, avatar); //进行压缩 // that.uploadImage(avatar, (res) => { }) } else { console.log('获取图片失败，请稍后重试') } }) }, //重新选择头像 uploadTap() { const self = this wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { const src = res.tempFilePaths[0] // 获取裁剪图片资源后，给data添加src属性及其值 self.wecropper.pushOrign(src) } }) }, //压缩并获取图片，这里用了递归的方法来解决canvas的draw方法延时的问题 getCanvasImg: function (index, failNum, tempFilePaths) { var that = this; console.log(111) wx.getImageInfo({ src: tempFilePaths, //图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径, success: res => { console.log(res) const ctx = wx.createCanvasContext('attendCanvasId'); setTimeout(() => { ctx.drawImage(tempFilePaths, 0, 0, 100, 100); ctx.draw(true, function () { wx.canvasToTempFilePath({ canvasId: 'attendCanvasId', success: function success(res) { console.log(res) that.uploadImage(res.tempFilePath,(res)=> { } ); }, fail: function (e) { failNum += 1;//失败数量，可以用来提示用户 that.getCanvasImg(inedx, failNum, tempFilePaths); } }); }); }, 1000); }, fail: () => { }, complete: () => { } }); }, onLoad(option) { let that = this; const { cropperOpt } = this.data; var tempFilePaths = option.src; // that.setData({ // // tempFilePath可以作为img标签的src属性显示图片 // avatar: option.src, // }) if (option.src) { cropperOpt.src = option.src new WeCropper(cropperOpt) .on('ready', (ctx) => { }) .on('beforeImageLoad', (ctx) => { // wx.showToast({ // title: '上传中', // icon: 'loading', // duration: 2000 // }) }) .on('imageLoad', (ctx) => { // wx.hideToast() }) .on('beforeDraw', (ctx, instance) => { }) .updateCanvas() } }, uploadImage (filePath, cb) { //个人封装的简单的上传单张图片上传的方法 wx.uploadFile({ url: app.baseURL + '/User/uploadSinglePicture', filePath: filePath, name: 'file', header: { "Content-Type": "multipart/form-data" }, formData: { token: app.globalData.token, file: filePath, type: 1 }, success: (res) => { console.log(res) let data = JSON.parse(res.data); //由于拿到的数据未解析，这里先解析json if (data.code == 1){ console.log(222) cb(res); wx.request({ url: app.baseURL + '/user/profile', data: { token: wx.getStorageSync('token'), avatar: data.data, type: 1 }, success(res) { console.log(res) if (res.data.code == 1) { wx.showToast({ title: res.data.msg, }) } //跳转到"我的"页面 wx.switchTab({ url: "/pages/my/index",//这个地方看个人需求了 }); } }) } }, fail: (res) => { wx.showToast({ title: '上传失败', }) }, }) } })好啦，上传并裁剪头像的功能就实现啦，亲测有效喔~
下面就是组件免费下载地址~ (复制粘贴网址直接点击下载就可)
https://download.csdn.net/download/qq_38645868/12567032
