zhapp/pages/my/avatarCropper.vue

<template>
	<view class="content">
		<view class="cropper-wrapper" :style="{ height: cropperOpt.height + 'px' }">
			<canvas class="cropper" :disable-scroll="true" @touchstart="touchStart" @touchmove="touchMove"
				@touchend="touchEnd"
				:style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: '#999' }"
				canvas-id="cropper" id="cropper"></canvas>
			<canvas class="cropper" :disable-scroll="true" :style="{
					border:'2px solid #000',
					position: 'fixed',
					top: `-${cropperOpt.width * cropperOpt.pixelRatio}px`,
					left: `-${cropperOpt.height * cropperOpt.pixelRatio}px`,
					width: `${cropperOpt.width * cropperOpt.pixelRatio}px`,
					height: `${cropperOpt.height * cropperOpt.pixelRatio}`
				}" canvas-id="targetId" id="targetId"></canvas>
		</view>
		<view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }">
			<!-- #ifdef H5 -->
			<view class="upload" @tap="uploadTap">选择图片</view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view class="upload" @tap="uploadTap">重新选择</view>
			<!-- #endif -->
			<view class="getCropperImage" @tap="getCropperImage(false)">确定</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/pdf.js'
	import store from '@/store';
	import WeCropper from './weCropper.js';
	export default {
		props: {
			// 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色，
			// mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)"
			boundStyle: {
				type: Object,
				default () {
					return {
						lineWidth: 4,
						borderColor: 'rgb(245, 245, 245)',
						mask: 'rgba(0, 0, 0, 0.35)'
					};
				}
			}
			// // 裁剪框宽度，单位rpx
			// rectWidth: {
			// 	type: [String, Number],
			// 	default: 400
			// },
			// // 裁剪框高度，单位rpx
			// rectHeight: {
			// 	type: [String, Number],
			// 	default: 400
			// },
			// // 输出图片宽度，单位rpx
			// destWidth: {
			// 	type: [String, Number],
			// 	default: 400
			// },
			// // 输出图片高度，单位rpx
			// destHeight: {
			// 	type: [String, Number],
			// 	default: 400
			// },
			// // 输出的图片类型，如果发现裁剪的图片很大，可能是因为设置为了"png"，改成"jpg"即可
			// fileType: {
			// 	type: String,
			// 	default: 'jpg',
			// },
			// // 生成的图片质量
			// // H5上无效，目前不考虑使用此参数
			// quality: {
			// 	type: [Number, String],
			// 	default: 1
			// }
		},
		data() {
			return {
				// 底部导航的高度
				bottomNavHeight: 50,
				originWidth: 200,
				width: 0,
				height: 200,
				cropperOpt: {
					id: 'cropper',
					targetId: 'targetCropper',
					pixelRatio: 1,
					width: 0,
					height: 0,
					scale: 2.5,
					zoom: 8,
					cut: {
						x: (this.width - this.originWidth) / 2,
						y: (this.height - this.originWidth) / 2,
						width: this.originWidth,
						height: this.originWidth
					},
					boundStyle: {
						lineWidth: uni.upx2px(this.boundStyle.lineWidth),
						mask: this.boundStyle.mask,
						color: this.boundStyle.borderColor
					}
				},
				// 裁剪框和输出图片的尺寸，高度默认等于宽度
				// 输出图片宽度，单位px
				destWidth: 300,
				// 裁剪框宽度，单位px
				rectWidth: 300,
				// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
				fileType: 'jpg',
				src: '', // 选择的图片路径，用于在点击确定时，判断是否选择了图片
			};
		},
		onLoad(option) {
			let rectInfo = uni.getSystemInfoSync();
			this.width = rectInfo.windowWidth;
			this.height = rectInfo.windowHeight - this.bottomNavHeight;
			this.cropperOpt.width = this.width;
			this.cropperOpt.height = rectInfo.screenHeight;
			this.cropperOpt.pixelRatio = rectInfo.pixelRatio;

			let rectWidth = Number(280);
			this.cropperOpt.cut = {
				x: (this.width - rectWidth) / 2,
				y: (this.height - rectWidth) / 2,
				width: rectWidth,
				height: rectWidth
			};
			// 初始化
			this.cropper = new WeCropper(this.cropperOpt)
				.on('ready', ctx => {
					// wecropper is ready for work!
				})
				.on('beforeImageLoad', ctx => {
					// before picture loaded, i can do something
				})
				.on('imageLoad', ctx => {
					// picture loaded
				})
				.on('beforeDraw', (ctx, instance) => {
					// before canvas draw,i can do something
				});
			// 设置导航栏样式，以免用户在page.json中没有设置为黑色背景
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#000000'
			});
			this.src = option.src; //已选图片
			this.cropper.pushOrign(this.src); //图片赋值给裁剪框

		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			touchStart(e) {
				this.cropper.touchStart(e);
			},
			touchMove(e) {
				this.cropper.touchMove(e);
			},
			touchEnd(e) {
				this.cropper.touchEnd(e);
			},
			getCropperImage(isPre = false) {
				if (!this.src) return this.$u.toast('请先选择图片再裁剪');

				let cropper_opt = {
					destHeight: Number(this.destWidth), // uni.canvasToTempFilePath要求这些参数为数值
					destWidth: Number(this.destWidth),
					fileType: this.fileType
				};
				this.cropper.getCropperImage(cropper_opt, (path, err) => {
					if (err) {
						uni.showModal({
							title: '温馨提示',
							content: err.message
						});
					} else {
						if (isPre) {
							uni.previewImage({
								current: '', // 当前显示图片的 http 链接
								urls: [path] // 需要预览的图片 http 链接列表
							});
						} else {
							//上传裁剪后的图片
							uni.uploadFile({
								url: this.$base.baseUrl + '/file/upload',
								filePath: path,
								name: "file",
								formData: {
									'type': 'image',
								},
								header: {
									Authorization: store.state.token,
								},
								success: async (imgRes) => {
									let data = JSON.parse(imgRes.data).data;
									//头像上传接口
									let res = await this.$http.post('/appUser/userInfoEdit', {
										id: this.userInfo.sysUser.id,
										headSculpture: data.id
									});
									if (res.code == '200') {
										this.$u.route({
											type: 'back'
										});
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none',
										});
									}
								}
							});
							// uni.$emit('uAvatarCropper', path);
						}
					}
				});
			},
			uploadTap() {
				const self = this;
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						self.src = res.tempFilePaths[0];
						//  获取裁剪图片资源后，给data添加src属性及其值

						self.cropper.pushOrign(this.src);
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;
		/* #endif */
	}

	.content {
		background: rgba(255, 255, 255, 1);
		height: 100vh;
	}

	.cropper {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 11;
	}

	#targetId {
		border: 2px solid #fff !important;
	}

	.cropper-wrapper {
		position: relative;
		@include vue-flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100vh;
		background-color: #000;
	}

	.cropper-buttons {
		padding: 0 46rpx;
		box-sizing: border-box;
		color: #eee;
		width: 100vw;
		height: auto;
		@include vue-flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 200rpx;
		left: 0;
		font-size: 28rpx;
		z-index: 999;

		view {
			width: 48%;
			text-align: center;
			padding: 18rpx 65rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 50rpx;
			font-size: 30rpx;

		}

		view:first-child {
			color: #333;
		}

		view:last-child {
			background: #FDE935;
			border-radius: 50rpx;
			color: #1F1F1F;
		}
	}
</style>