xuziqiang
5 months ago
|
Before Width: | Height: | Size: 688 KiB After Width: | Height: | Size: 1.9 MiB |
|
After Width: | Height: | Size: 93 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 686 B After Width: | Height: | Size: 1002 B |
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,4 @@ |
|||||
|
import verify from './verify.vue'; |
||||
|
import { withInstall } from '/nerv-lib/util'; |
||||
|
|
||||
|
export const NsVerify = withInstall(verify); |
||||
@ -0,0 +1,127 @@ |
|||||
|
<template> |
||||
|
<div class="img-verify"> |
||||
|
<canvas ref="verify" :width="state.width" :height="state.height" @click="handleDraw"></canvas> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { reactive, onMounted, ref, toRefs, defineEmits } from 'vue'; |
||||
|
const verify = ref(null); |
||||
|
const emit = defineEmits(['get-code']); |
||||
|
defineOptions({ |
||||
|
name: 'NsVerify', |
||||
|
}); |
||||
|
const state = reactive({ |
||||
|
pool: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890', // 字符串 |
||||
|
width: 120, |
||||
|
height: 48, |
||||
|
imgCode: '', |
||||
|
}); |
||||
|
onMounted(() => { |
||||
|
// 初始化绘制图片验证码 |
||||
|
state.imgCode = draw(); |
||||
|
emit('get-code', state.imgCode); |
||||
|
}); |
||||
|
// 点击图片重新绘制 |
||||
|
const handleDraw = () => { |
||||
|
state.imgCode = draw(); |
||||
|
emit('get-code', state.imgCode); |
||||
|
}; |
||||
|
|
||||
|
// 随机数 |
||||
|
const randomNum = (min, max) => { |
||||
|
return parseInt(Math.random() * (max - min) + min); |
||||
|
}; |
||||
|
// 随机颜色 |
||||
|
const randomColor = (min, max) => { |
||||
|
const r = randomNum(min, max); |
||||
|
const g = randomNum(min, max); |
||||
|
const b = randomNum(min, max); |
||||
|
return `rgb(${r},${g},${b})`; |
||||
|
}; |
||||
|
|
||||
|
// 绘制图片 |
||||
|
const draw = () => { |
||||
|
// 3.填充背景颜色，背景颜色要浅一点 |
||||
|
const ctx = verify.value?.getContext('2d'); |
||||
|
// 填充颜色 |
||||
|
ctx.fillStyle = randomColor(180, 230); |
||||
|
// 填充的位置 |
||||
|
ctx.fillRect(0, 0, state.width, state.height); |
||||
|
// 定义paramText |
||||
|
let imgCode = ''; |
||||
|
// 4.随机产生字符串，并且随机旋转 |
||||
|
for (let i = 0; i < 4; i++) { |
||||
|
// 随机的四个字 |
||||
|
const text = state.pool[randomNum(0, state.pool.length)]; |
||||
|
imgCode += text; |
||||
|
// 随机的字体大小 |
||||
|
const fontSize = randomNum(Math.floor(state.height / 2), state.height); |
||||
|
// 字体随机的旋转角度 |
||||
|
const deg = randomNum(-30, 30); |
||||
|
/* |
||||
|
* 绘制文字并让四个文字在不同的位置显示的思路 : |
||||
|
* 1、定义字体 |
||||
|
* 2、定义对齐方式 |
||||
|
* 3、填充不同的颜色 |
||||
|
* 4、保存当前的状态（以防止以上的状态受影响） |
||||
|
* 5、平移translate() |
||||
|
* 6、旋转 rotate() |
||||
|
* 7、填充文字 |
||||
|
* 8、restore出栈 |
||||
|
* */ |
||||
|
ctx.font = fontSize + 'px Simhei'; |
||||
|
ctx.textBaseline = 'top'; |
||||
|
ctx.fillStyle = randomColor(80, 150); |
||||
|
/* |
||||
|
* save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。 |
||||
|
* 这就允许您临时地改变图像状态， |
||||
|
* 然后，通过调用 restore() 来恢复以前的值。 |
||||
|
* save是入栈，restore是出栈。 |
||||
|
* 用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。 restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。 |
||||
|
* |
||||
|
* */ |
||||
|
ctx.save(); |
||||
|
ctx.translate(30 * i + 15, 15); |
||||
|
ctx.rotate((deg * Math.PI) / 180); |
||||
|
// fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。 |
||||
|
// 请使用 font 属性来定义字体和字号，并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。 |
||||
|
// fillText(text,x,y,maxWidth); |
||||
|
ctx.fillText(text, -15 + 5, -15); |
||||
|
ctx.restore(); |
||||
|
} |
||||
|
// 5.随机产生5条干扰线,干扰线的颜色要浅一点 |
||||
|
for (let i = 0; i < 5; i++) { |
||||
|
ctx.beginPath(); |
||||
|
ctx.moveTo(randomNum(0, state.width), randomNum(0, state.height)); |
||||
|
ctx.lineTo(randomNum(0, state.width), randomNum(0, state.height)); |
||||
|
ctx.strokeStyle = randomColor(180, 230); |
||||
|
ctx.closePath(); |
||||
|
ctx.stroke(); |
||||
|
} |
||||
|
// 6.随机产生40个干扰的小点 |
||||
|
for (let i = 0; i < state.height; i++) { |
||||
|
ctx.beginPath(); |
||||
|
ctx.arc( |
||||
|
randomNum(0, state.width), |
||||
|
randomNum(0, state.height), |
||||
|
randomNum(0, 3), //随机大小 |
||||
|
0, |
||||
|
2 * Math.PI, |
||||
|
); |
||||
|
ctx.closePath(); |
||||
|
ctx.fillStyle = randomColor(150, 200); |
||||
|
ctx.fill(); |
||||
|
} |
||||
|
return imgCode; |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.img-verify { |
||||
|
height: 48px; |
||||
|
/* margin: 0 0.1rem; */ |
||||
|
} |
||||
|
.img-verify canvas { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
</style> |
||||