<template>
	<view>
		<canvas  id="splashCanvas" canvas-id="splashCanvas"  style="width: 160px; height: 80px; z-index: 9999;position: fixed; visibility: hidden;"></canvas>


			<qf-image-cropper :src="src" :showAngle="false" :width="1600" :height="800" fileType="jpg"
				@crop="handleCrop" :gpu="true">
			</qf-image-cropper>
	</view>
</template>

<script>
	import QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue';
	export default {
		components: {
			QfImageCropper
		},
		data() {
			return {
				src: "",
				Statu: false

			}
		},
		onLoad: function(option) {
			const eventChannel = this.getOpenerEventChannel();
			var these = this;
			eventChannel.on('checkImg', (data)=> {
				console.log("我收到你的消息了，消息内容是：" + JSON.stringify(data));
				this.src = data.data;
				console.log("我收到你的消息了，消息内容是：",data);
			})
		},
		methods: {
			handleCrop(e) {
				
				var these = this;
				const eventChannel = these.getOpenerEventChannel();
				this.Statu = true;
				console.log("裁剪完成");
				console.log(e.tempFilePath);
				eventChannel.emit('ImgCutOver_Path',e.tempFilePath);
				const ctx = uni.createCanvasContext('splashCanvas', this);
				ctx.drawImage(
					e.tempFilePath,
					0,0,160,80
				);
				setTimeout(() => {
					ctx.draw(false, ()=>{
						console.log("abcdefg")
						uni.canvasGetImageData({
							canvasId: 'splashCanvas',
							x: 0,
							y: 0,
							width: 160,
							height: 80,
							success: (res) => {
								// 处理像素数据并发送
								
								console.log("res.data.length="+res.data.length);
								eventChannel.emit('ImgCutOverPath', {
									picPath: e.tempFilePath
								});
								 
								 eventChannel.emit('ImgCutOver',{piexls:res.data,picPath:e.tempFilePath});
								
								 uni.navigateBack();
							},
							fail: (err) => {
								reject(`获取canvas数据失败: ${err.errMsg}`);
							}
						});
					});
				}, 500);

			}

		}
	}
</script>

<style>
	.canvas {
		width: 1600px;
		height: 800px;
		border: 1px solid #ccc;
	}
</style>