JiaZhiQianYan/components/codeImg/codeImg.vue

<template>
	<view>
		<image v-if="img" class="img" :src="img" mode="aspectFit"></image>
		<canvas v-else type='2d' id="scanvas" canvas-id="scanvas" :style="'width:'+props.contentWidth+'px;'+'height:'+props.contentHeight+'px;'" @click="reDrawPic()"></canvas>
	</view>
</template>

<script setup>
	import { getCurrentInstance, onMounted,ref,watch } from 'vue'
		
	const props = defineProps({
		codeStr:{
			type:String,
			default:'0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
		},
		fontSizeMin:{
			type:Number,
			default:25
		},
		fontSizeMin:{
			type:Number,
			default:25
		},
		fontSizeMax:{
			type:Number,
			default:35
		},
		backgroundColorMin:{
			type:Number,
			default:0
		},
		backgroundColorMax:{
			type:Number,
			default:255
		},
		colorMin:{
			type:Number,
			default:0
		},
		colorMax:{
			type:Number,
			default:160
		},
		lineColorMin:{
			type:Number,
			default:40
		},
		lineColorMax:{
			type:Number,
			default:180
		},
		dotColorMin:{
			type:Number,
			default:0
		},
		dotColorMax:{
			type:Number,
			default:255
		},
		contentWidth:{
			type:Number,
			default:112
		},
		contentHeight:{
			type:Number,
			default:30
		},
	})
	const context = ref(null)
	const img = ref('')
	
	const emit = defineEmits(['updateValue'])

	const randomNum = (min,max) => {
		return Math.floor(Math.random() * (max - min) + min)
	}
	
	const randomColor = (min,max,a) => {
		let r = randomNum(min,max)
		let g = randomNum(min,max)
		let b = randomNum(min,max)
		return 'rgba('+ r +','+ g +','+ b +','+a+')'
	}
	const drawLine = (ctx) =>{
		for (var i = 0; i < 5; i++) {
			ctx.strokeStyle = randomColor(props.lineColorMin,props.lineColorMax,1)
			ctx.beginPath()
			ctx.moveTo(randomNum(0,props.contentWidth),randomNum(0,props.contentHeight))
			ctx.lineTo(randomNum(0,props.contentWidth),randomNum(0,props.contentHeight))
			ctx.stroke()
		}
	}
	
	const makeCode = () =>{
		let codeStr = ''
		let codeSet = props.codeStr
		for (let i = 0; i < 4; i++) {
			codeStr += codeSet[randomNum(0,codeSet.length)]
		}
		return codeStr
	}
	
	const drawText = (ctx, txt, i) =>{
		ctx.fillStyle = '#333'
		ctx.font = randomNum(props.fontSizeMin,props.fontSizeMax)+'px SimHei'
		let x = (i+1) * (props.contentWidth / 5)
		let y = randomNum(props.fontSizeMax,props.contentHeight-5)
		var deg = randomNum(-45,45)
		ctx.translate(x,y)
		ctx.rotate((deg * Math.PI) / 180)
		ctx.fillText(txt,0,0)
		ctx.rotate((-deg * Math.PI) / 180)
		ctx.translate(-x,-y)
	}
	const drawDot = (ctx) =>{
		for (var i = 0; i < 80; i++) {
			ctx.fillStyle = randomColor(0,255)
			ctx.beginPath()
			ctx.arc(randomNum(0,props.contentWidth),randomNum(0,props.contentHeight),1,0,2 * Math.PI)
			ctx.fill()
		}
	}
	
	const drawPic = () =>{
		const query = uni.createSelectorQuery().in(getCurrentInstance().proxy)
		query.select('#scanvas').fields({ node: true, size: true }).exec((res) => {
			console.log(res)
			const canvas = res[0].node
			const ctx = canvas.getContext('2d')
			console.log(ctx)
			const dpr = wx.getSystemInfoSync().pixelRatio
			canvas.width = res[0].width * dpr
			canvas.height = res[0].height * dpr
			ctx.scale(dpr, dpr)
			ctx.clearRect(0,0,props.contentWidth,props.contentHeight)
			ctx.textBaseline = 'bottom'
			ctx.fillStyle = randomColor(props.backgroundColorMin,props.backgroundColorMax,.2)
			ctx.fillRect(0,0,props.contentWidth,props.contentHeight)
			
			let str = makeCode()
			for (let i = 0; i < str.length; i++) {
				drawText(ctx,str[i],i)
			}
			emit('updateValue',str)
			drawLine(ctx)
			// drawDot(ctx)
			// ctx.draw()
			context.value = ctx
			uni.canvasToTempFilePath({
				canvasId:'scanvas',
				success(res) {
					console.log(res)
					img.value = res.tempFilePath
				},
				fail(error) {
					console.log(error)
				}
			})
		  })
		
		
		// let ctx = uni.createCanvasContext('scanvas',getCurrentInstance())
		
	}
	
	const reDrawPic = () =>{
		img.value = ''
		let ctx = context.value
		ctx.clearRect(0,0,props.contentWidth,props.contentHeight)
		ctx.textBaseline = 'bottom'
		ctx.fillStyle = randomColor(props.backgroundColorMin,props.backgroundColorMax,.2)
		ctx.fillRect(0,0,props.contentWidth,props.contentHeight)
		
		let str = makeCode()
		emit('updateValue',str)
		for (let i = 0; i < str.length; i++) {
			drawText(ctx,str[i],i)
		}
		drawLine(ctx)
		// drawDot(ctx)
		// ctx.draw()
		uni.canvasToTempFilePath({
			canvasId:'scanvas',
			success(res) {
				console.log(res)
				img.value = res.tempFilePath
			},
			fail(error) {
				console.log(error)
			}
		})
	}
	onMounted(()=>{
		drawPic()
	})
</script>

<style lang="less">
	.img 
	{
		width: 112px;
		height: 30px;
	}
</style>