uni-app 图片剪裁页 weCropper

//剪裁第二部分  生成剪裁页剪裁

当检测图片不违规后。拿到上传图片的临时路径，就可以携带临时路径跳到剪裁页
uni.$off('src')
uni.navigateTo({
    url: "/pages/路径?path=" + url[0]
})

//裁剪页

<template>
	<view class="content">
		<image @load="loadImage" class="bg" src="" mode="widthFix"</image>
                //裁剪的部分的四个剪头 一个方向的就行
		<view  class="corner" :style="{top:cropperOpt.cut.y+'px',width:cropperOpt.cut.width+'px',height:cropperOpt.cut.height+'px'}">
			<image class="corner_border1" src=""></image>
			<image class="corner_border2" src=""></image>
			<image class="corner_border3" src=""></image>
			<image class="corner_border4" src=""></image>
		</view>
                //裁剪
		<view class="Tailoring">
			<view class="cropper-wrapper1">
				<canvas class="cropper" :style="{width:cropperOpt.width+'px',height:cropperOpt.height+'px'}"
					disable-scroll="true" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"
					canvas-id="cropper"></canvas>
			</view>
		</view>
               // 裁剪按钮
		<image @click="getCropperImage" class="btn"
			src="" mode="widthFix"></image>
		<!-- 投诉 -->
	</view>
</template>

<script>
	//import WeCropper from '@/common/weCropper.js'
	import WeCropper from '@/common/weCropper.js'
	const device = tt.getSystemInfoSync() // 获取设备信息
	const width = device.windowWidth // 示例为一个与屏幕等宽的正方形裁剪框
	const height = device.windowHeight;
	const app = getApp();
	export default {
		data() {
			return {
				cropperOpt: {
					id: 'cropper', // 用于手势操作的canvas组件标识符
					targetId: 'targetCropper', // 用于用于生成截图的canvas组件标识符
					pixelRatio: device.pixelRatio, // 传入设备像素比
					width, // 画布宽度
					height, // 画布高度
					scale: 2.5, // 最大缩放倍数
					zoom: 8, // 缩放系数
					cut: {
						x: (width - uni.upx2px(495)) / 2, // 裁剪框x轴起点
						y: (height - uni.upx2px(530)) / 2+40, // 裁剪框y轴期起点
						width: uni.upx2px(495), // 裁剪框宽度
						height: uni.upx2px(530) // 裁剪框高度
					}
				},
				cropper: ''
			}
		},
		onLoad(options) {
			this.path = options.path;
			this.cropperOpt.src = this.path;
			this.cropper = new WeCropper(this.cropperOpt)
				.on('ready', (ctx) => {
					console.log(`wecropper is ready for work!`)
				})
				.on('beforeImageLoad', (ctx) => {
					uni.showToast({
						title: '上传中',
						icon: 'loading',
						duration: 20000
					})
				})
				.on('imageLoad', (ctx) => {
					uni.hideToast()
				})
		},
		methods: {
			touchStart(e) {
				this.cropper.touchStart(e)
			},
			touchMove(e) {
				this.cropper.touchMove(e)
			},
			touchEnd(e) {
				this.cropper.touchEnd(e)
			},
			getCropperImage() {
				var that = this
				that.cropper.getCropperImage((tempFilePath) => {
					// tempFilePath 为裁剪后的图片临时路径
					if (tempFilePath) {
						//console.log('tempFilePath1', tempFilePath)
						let arr = tempFilePath.split("?")
						tempFilePath = arr[0]
						//console.log('tempFilePath2', tempFilePath)
	
						uni.getFileSystemManager().readFile({
	
							filePath: tempFilePath, //选择图片返回的相对路径
							encoding: 'base64', //编码格式
							success: function(base64_str) {
								let data = {
									base64:`${base64_str.data}`,
									src:tempFilePath
								}
//保存裁剪后的图片								uni.setStorageSync('image',tempFilePath)
								uni.redirectTo({
									url: `/pages/路径`
								})
							},
							fail(e) {
								//console.log('fail(e)');
								console.log('失败了1', e)
							}
						})
					} else {
						console.log('获取图片地址失败，请稍后重试')
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
		position: relative;
		overflow: hidden;
		background-color: #0A0432;
	}

	.bg {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 1624rpx;
		
	}

	.cropper-wrapper1 {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		/* width: 100%; */
		background: url('') no-repeat;
		background-size: 100% 100%;
	}

	.cropper {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		min-height: 100%;
	}
	.bg-dera{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		background: rgba($color: #000000, $alpha: 0.3);
		z-index: 88;
	}
	.corner{
		position: absolute;
		z-index: 6;
		// top: 214px;
		left: 50%;
		transform: translate(-50%,0);
		// border: 1px solid red;
		pointer-events:none;
	}
	.corner_border1{
		position: absolute;
		width: 73rpx;
		height: 74rpx;
		top: -5rpx;
		left: -5rpx;
	}
	.corner_border2{
		position: absolute;
		width: 73rpx;
		height: 74rpx;
		top: -5rpx;
		right: -5rpx;
		transform:rotate(90deg);
	}
	.corner_border3{
		position: absolute;
		width: 73rpx;
		height: 74rpx;
		bottom: -5rpx;
		left: -5rpx;
		transform:rotate(270deg);
	}
	.corner_border4{
		position: absolute;
		width: 73rpx;
		height: 74rpx;
		bottom: -5rpx;
		right: -5rpx;
		transform:rotate(180deg);
	}

	/* 	.diban{
		position: fixed;
		bottom: 30upx;
		left: 186rpx;
		width: 379rpx;
		height: 90rpx;
		line-height: 100rpx;
		font-size: 36rpx;
		color: #040931;
		z-index: 999;
	} */
	.btn {
		width: 452rpx;
		height: 130rpx;
		position: absolute;
		top: 1202rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 999;
	}



	.eg-img {
		width: 738rpx;
		height: 389rpx;
		z-index: 999;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	.loading{
		position: fixed;
		top: 0rpx;
		left: 0;
		float: left;
		width: 100vw;
		height: 100vh;
		background-color: #FFFFFF;
		z-index: 99999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>