chenjiangjiang/kt-financial-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 增加基于图片拼图切片平移的验证码

Browse Source
This commit is contained in:
chenweiran
2025-07-03 18:20:20 +08:00
parent 8554924cb9
commit bbd8a53d9d
6 changed files with 64 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/effects/common-ui/src/components/captcha/slider-translate-captcha/index.vue
View File

@@ -127,7 +127,12 @@ function resetCanvas() {
if (!puzzleCanvas || !pieceCanvas) return;
pieceCanvas.width = canvasWidth;
const puzzleCanvasCtx = puzzleCanvas.getContext('2d');
const pieceCanvasCtx = pieceCanvas.getContext('2d');
// Canvas2D: Multiple readback operations using getImageData
// are faster with the willReadFrequently attribute set to true.
// See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently (anonymous)
const pieceCanvasCtx = pieceCanvas.getContext('2d', {
willReadFrequently: true,
});
if (!puzzleCanvasCtx || !pieceCanvasCtx) return;
puzzleCanvasCtx.clearRect(0, 0, canvasWidth, canvasHeight);
pieceCanvasCtx.clearRect(0, 0, canvasWidth, canvasHeight);
@@ -139,9 +144,16 @@ function initCanvas() {
const pieceCanvas = unref(pieceCanvasRef);
if (!puzzleCanvas || !pieceCanvas) return;
const puzzleCanvasCtx = puzzleCanvas.getContext('2d');
const pieceCanvasCtx = pieceCanvas.getContext('2d');
// Canvas2D: Multiple readback operations using getImageData
// are faster with the willReadFrequently attribute set to true.
// See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently (anonymous)
const pieceCanvasCtx = pieceCanvas.getContext('2d', {
willReadFrequently: true,
});
if (!puzzleCanvasCtx || !pieceCanvasCtx) return;
const img = new Image();
// 解决跨域
img.crossOrigin = 'Anonymous';
img.src = src;
img.addEventListener('load', () => {
draw(puzzleCanvasCtx, pieceCanvasCtx);
@@ -158,6 +170,7 @@ function initCanvas() {
);
pieceCanvas.width = pieceLength;
pieceCanvasCtx.putImageData(imageData, 0, sy);
setLeft('0');
});
}
@@ -265,7 +278,7 @@ onMounted(() => {
@click="resume"
></canvas>
<div
class="absolute bottom-3 left-0 z-10 block h-7 w-full text-center text-xs leading-[30px] text-white"
class="h-15 absolute bottom-3 left-0 z-10 block w-full text-center text-xs leading-[30px] text-white"
>
<div
v-if="state.showTip"