xuziqiang
3 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> |
|||