<template>
	<view>
		<canvas  id="splashCanvas" canvas-id="splashCanvas" :style="{'width':width+'px','height':height+'px'}"  style=" z-index: 9999;position: fixed; visibility: hidden;"></canvas>


			<qf-image-cropper :src="src" :showAngle="false" :width="cropWidth" :height="cropHeight" fileType="jpg"
				@crop="handleCrop" :areaScale="0.1" :minScale="0.1" :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,
				width:160,
				height:80,
				times:10
			}
		},
		computed:{
			cropWidth(){
				return this.width*this.times;
			}
			,
			cropHeight(){
				return this.height*this.times;
			}
		},
		onLoad: function(option) {
			const eventChannel = this.getOpenerEventChannel();
			var these = this;
			eventChannel.on('checkImg', (rec)=> {
				console.log("我收到你的消息了，消息内容是：" + JSON.stringify(rec));
				this.src = rec.data;
				this.width=rec.width?rec.width:160;
				this.height=rec.height?rec.height:80;
				this.times=rec.times?rec.times:10;
			})
		},
		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,these.width,these.height
				);
				setTimeout(() => {
					ctx.draw(false, ()=>{
						console.log("abcdefg")
						uni.canvasGetImageData({
							canvasId: 'splashCanvas',
							x: 0,
							y: 0,
							width: these.width,
							height: these.height,
							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 {
	
		border: 1px solid #ccc;
	}
</style>