From 88a7bf976d7d5f8b28650cfd7b45105c5edf95e2 Mon Sep 17 00:00:00 2001 From: Evan Huang Date: Sat, 19 Oct 2024 13:32:12 +0800 Subject: [PATCH] Update api_test.js --- 0/api_test.js | 141 ++++++++++++-------------------------------------- 1 file changed, 32 insertions(+), 109 deletions(-) diff --git a/0/api_test.js b/0/api_test.js index fe26b22..7f42699 100644 --- a/0/api_test.js +++ b/0/api_test.js @@ -504,65 +504,43 @@ function OneCaptchaInit() { }); function showSliderCaptcha() { - currentImage = images[Math.floor(Math.random() * images.length)]; - puzzleImage.src = `https://onecaptcha.us.kg/assets/v3/${currentImage}`; - - puzzleImage.onload = () => { - const pieceSize = 50; - const maxX = puzzleImage.width - pieceSize; - const maxY = puzzleImage.height - pieceSize; - const pieceX = Math.floor(Math.random() * (maxX - 50) + 50); - const pieceY = Math.floor(Math.random() * maxY); - - // 确保拼图块元素存在 - if (!document.getElementById('puzzle-piece')) { - const newPuzzlePiece = document.createElement('div'); - newPuzzlePiece.id = 'puzzle-piece'; - document.getElementById('puzzle-container').appendChild(newPuzzlePiece); - puzzlePiece = newPuzzlePiece; - } - - puzzlePiece.style.left = '0px'; - puzzlePiece.style.top = `${pieceY}px`; - puzzlePiece.style.backgroundImage = `url(https://onecaptcha.us.kg/assets/v3/${currentImage})`; - puzzlePiece.style.backgroundPosition = `-${pieceX}px -${pieceY}px`; - puzzlePiece.style.backgroundSize = `${puzzleImage.width}px ${puzzleImage.height}px`; - puzzlePiece.style.display = 'block'; - puzzlePiece.style.zIndex = '1000'; // 确保拼图块在最上层 - - // 移除旧的拼图洞 - const oldPuzzleHole = document.getElementById('puzzle-hole'); - if (oldPuzzleHole) { - oldPuzzleHole.remove(); - } - - const puzzleHole = document.createElement('div'); - puzzleHole.id = 'puzzle-hole'; - puzzleHole.style.left = `${pieceX}px`; - puzzleHole.style.top = `${pieceY}px`; - puzzleHole.style.display = 'block'; - puzzleHole.style.zIndex = '999'; // 确保拼图洞在拼图块下面 - document.getElementById('puzzle-container').appendChild(puzzleHole); - - piecePosition = pieceX; - sliderCaptcha.style.display = 'block'; - resetSlider(); + const puzzleImage = document.getElementById('puzzle-image'); + const puzzlePiece = document.getElementById('puzzle-piece'); - // 确保所有元素都正确显示 - setTimeout(() => { - puzzlePiece.style.display = 'block'; - puzzleHole.style.display = 'block'; - sliderCaptcha.style.opacity = '1'; + // 随机选择要绘制的形状 + const shapeType = Math.random() < 0.5 ? 'circle' : 'square'; + + const maxSize = 100; // 可以根据需要调整 + const img = new Image(); + img.src = puzzleImage.src; // 使用当前的puzzle-image的src + + img.onload = () => { + const canvas = document.createElement('canvas'); + canvas.width = img.width; + canvas.height = img.height; + const ctx = canvas.getContext('2d'); + + // 绘制原始图像 + ctx.drawImage(img, 0, 0); + + // 绘制随机形状 + const x = Math.random() * img.width; + const y = Math.random() * img.height; - // 随机选择绘制形状 - drawShapesOnCanvas(pieceX, pieceY); - }, 100); + if (shapeType === 'circle') { + drawConcentricCircles(ctx, x, y, maxSize); + } else { + drawConcentricSquares(ctx, x, y, maxSize); + } + + // 更新puzzle-image和puzzle-piece + puzzleImage.src = canvas.toDataURL(); + puzzlePiece.src = canvas.toDataURL(); }; } -// 绘制同心正方形 function drawConcentricSquares(ctx, x, y, maxSize) { - const levels = 12; + const levels = 12; for (let i = 0; i < levels; i++) { const size = maxSize - (i * maxSize / levels); ctx.strokeStyle = `rgba(${Math.random() * 180},${Math.random() * 180},${Math.random() * 180},0.3)`; @@ -571,9 +549,8 @@ function drawConcentricSquares(ctx, x, y, maxSize) { } } -// 绘制同心圆 function drawConcentricCircles(ctx, x, y, maxRadius) { - const levels = 12; + const levels = 12; for (let i = 0; i < levels; i++) { const radius = maxRadius - (i * maxRadius / levels); ctx.strokeStyle = `rgba(${Math.random() * 180},${Math.random() * 180},${Math.random() * 180},0.3)`; @@ -584,60 +561,6 @@ function drawConcentricCircles(ctx, x, y, maxRadius) { } } -// 随机选择绘制形状的函数 -function drawShapesOnCanvas(pieceX, pieceY) { - const canvas = document.getElementById('puzzle-image'); - const ctx = canvas.getContext('2d'); - - const img = new Image(); - img.src = puzzleImage.src; // 使用拼图图片的URL - - img.onload = function () { - // 绘制拼图图片 - ctx.drawImage(img, 0, 0, canvas.width, canvas.height); - - // 随机选择绘制正方形或圆形 - const drawSquare = Math.random() < 0.5; // 50% 概率选择绘制正方形 - - if (drawSquare) { - drawConcentricSquares(ctx, pieceX + 25, pieceY + 25, 100); // 绘制同心正方形 - } else { - drawConcentricCircles(ctx, pieceX + 25, pieceY + 25, 50); // 绘制同心圆 - } - - // 添加结构化噪声 - addStructuredNoise(img); - - // 将绘制的结果转化为图片并设置为拼图块背景 - const dataURL = canvas.toDataURL(); - puzzlePiece.style.backgroundImage = `url(${dataURL})`; - }; -} - -// 添加结构化噪声的函数 -function addStructuredNoise(image) { - const canvas = document.getElementById('puzzle-image'); - const ctx = canvas.getContext('2d'); - const width = canvas.width; - const height = canvas.height; - - ctx.drawImage(image, 0, 0, width, height); - - // 添加噪声 - for (let i = 0; i < 1000; i++) { - const x = Math.random() * width; - const y = Math.random() * height; - const radius = Math.random() * 5; - - ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'; // 黑色噪声 - ctx.beginPath(); - ctx.arc(x, y, radius, 0, Math.PI * 2, true); - ctx.fill(); - } -} - - - function startDragging(e) { e.preventDefault(); isDragging = true;