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

官方demo里有图片裁剪的功能，所以这里直接拿来用了，uniApp——GitHub，效果可以扫下链接里的小程序码（模板-图片裁剪）看下，这块代码位置在pages/template/crop/crop.vue。

//这里要实现的功能是裁剪图片修改用户头像，所以要调用接口上传到服务器。
//这里用到的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)
								}
							})
						}
					}
				})
			}
		});
	});
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

另外这边的需求是设置1：1裁剪，不可拉伸

//注释掉以下部分关闭图片裁剪的拉伸
<!-- 	<view class="uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
		<view class="uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
		<view class="uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
		<view class="uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
		<view class="uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> -->
								
<!-- 	<view class="uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
		<view class="uni-cropper-point point-rb" data-drag="rightBottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
		<view class="uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove" @touchend.stop="dragEnd"></view>
		<view class="uni-cropper-point point-bl" data-drag="bottomLeft"></view>
		<view class="uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> -->

// 设置大小的时候触发的touchStart事件
// 			dragStart(e)
// 设置大小的时候触发的touchMove事件
// 			dragMove(e) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

另外，在loadImage里面的uni.getImageInfo方法中将裁剪比例修改成以下值

// IMG_RATIO = res.width / res.height
IMG_RATIO = 1 / 1
1
2