197 lines
7.0 KiB
HTML
197 lines
7.0 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>算法测试 - Gemini 去水印工具</title>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
font-family: monospace;
|
|||
|
|
padding: 20px;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
.test-section {
|
|||
|
|
background: white;
|
|||
|
|
padding: 20px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
.test-result {
|
|||
|
|
padding: 10px;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
.success {
|
|||
|
|
background: #d4edda;
|
|||
|
|
color: #155724;
|
|||
|
|
}
|
|||
|
|
.error {
|
|||
|
|
background: #f8d7da;
|
|||
|
|
color: #721c24;
|
|||
|
|
}
|
|||
|
|
canvas {
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h1>Gemini 去水印工具 - 算法测试</h1>
|
|||
|
|
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h2>测试 1: Alpha Map 计算</h2>
|
|||
|
|
<div id="test1-result"></div>
|
|||
|
|
<canvas id="test1-canvas" width="48" height="48"></canvas>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h2>测试 2: 水印检测</h2>
|
|||
|
|
<div id="test2-result"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h2>测试 3: 反向 Alpha 混合</h2>
|
|||
|
|
<div id="test3-result"></div>
|
|||
|
|
<canvas id="test3-before" width="100" height="100"></canvas>
|
|||
|
|
<canvas id="test3-after" width="100" height="100"></canvas>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script type="module">
|
|||
|
|
import { calculateAlphaMap } from './js/core/alphaMap.js';
|
|||
|
|
import { removeWatermark } from './js/core/blendModes.js';
|
|||
|
|
import { detectWatermarkConfig, calculateWatermarkPosition } from './js/core/watermarkEngine.js';
|
|||
|
|
|
|||
|
|
// 测试 1: Alpha Map 计算
|
|||
|
|
function test1() {
|
|||
|
|
const canvas = document.getElementById('test1-canvas');
|
|||
|
|
const ctx = canvas.getContext('2d');
|
|||
|
|
|
|||
|
|
// 创建一个渐变测试图像
|
|||
|
|
const gradient = ctx.createLinearGradient(0, 0, 48, 48);
|
|||
|
|
gradient.addColorStop(0, 'black');
|
|||
|
|
gradient.addColorStop(1, 'white');
|
|||
|
|
ctx.fillStyle = gradient;
|
|||
|
|
ctx.fillRect(0, 0, 48, 48);
|
|||
|
|
|
|||
|
|
// 获取 ImageData
|
|||
|
|
const imageData = ctx.getImageData(0, 0, 48, 48);
|
|||
|
|
|
|||
|
|
// 计算 alpha map
|
|||
|
|
const alphaMap = calculateAlphaMap(imageData);
|
|||
|
|
|
|||
|
|
// 验证结果
|
|||
|
|
const result = document.getElementById('test1-result');
|
|||
|
|
if (alphaMap instanceof Float32Array && alphaMap.length === 48 * 48) {
|
|||
|
|
result.className = 'test-result success';
|
|||
|
|
result.innerHTML = `
|
|||
|
|
✓ Alpha map 计算成功<br>
|
|||
|
|
- 类型: Float32Array<br>
|
|||
|
|
- 长度: ${alphaMap.length}<br>
|
|||
|
|
- 最小值: ${Math.min(...alphaMap).toFixed(3)}<br>
|
|||
|
|
- 最大值: ${Math.max(...alphaMap).toFixed(3)}
|
|||
|
|
`;
|
|||
|
|
} else {
|
|||
|
|
result.className = 'test-result error';
|
|||
|
|
result.textContent = '✗ Alpha map 计算失败';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 测试 2: 水印检测
|
|||
|
|
function test2() {
|
|||
|
|
const result = document.getElementById('test2-result');
|
|||
|
|
let html = '';
|
|||
|
|
|
|||
|
|
// 测试不同尺寸
|
|||
|
|
const testCases = [
|
|||
|
|
{ width: 512, height: 512, expected: 48 },
|
|||
|
|
{ width: 1024, height: 1024, expected: 48 },
|
|||
|
|
{ width: 2048, height: 2048, expected: 96 },
|
|||
|
|
{ width: 1920, height: 1080, expected: 48 },
|
|||
|
|
{ width: 3840, height: 2160, expected: 96 }
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
let allPassed = true;
|
|||
|
|
testCases.forEach(test => {
|
|||
|
|
const config = detectWatermarkConfig(test.width, test.height);
|
|||
|
|
const position = calculateWatermarkPosition(test.width, test.height, config);
|
|||
|
|
const passed = config.logoSize === test.expected;
|
|||
|
|
allPassed = allPassed && passed;
|
|||
|
|
|
|||
|
|
html += `
|
|||
|
|
<div style="margin: 5px 0;">
|
|||
|
|
${passed ? '✓' : '✗'} ${test.width}×${test.height}:
|
|||
|
|
检测到 ${config.logoSize}×${config.logoSize}
|
|||
|
|
(期望 ${test.expected}×${test.expected})
|
|||
|
|
位置: (${position.x}, ${position.y})
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
result.className = `test-result ${allPassed ? 'success' : 'error'}`;
|
|||
|
|
result.innerHTML = html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 测试 3: 反向 Alpha 混合
|
|||
|
|
function test3() {
|
|||
|
|
const canvasBefore = document.getElementById('test3-before');
|
|||
|
|
const canvasAfter = document.getElementById('test3-after');
|
|||
|
|
const ctxBefore = canvasBefore.getContext('2d');
|
|||
|
|
const ctxAfter = canvasAfter.getContext('2d');
|
|||
|
|
|
|||
|
|
// 创建一个简单的测试图像（红色背景）
|
|||
|
|
ctxBefore.fillStyle = 'red';
|
|||
|
|
ctxBefore.fillRect(0, 0, 100, 100);
|
|||
|
|
|
|||
|
|
// 模拟添加白色水印（alpha = 0.5）
|
|||
|
|
ctxBefore.fillStyle = 'rgba(255, 255, 255, 0.5)';
|
|||
|
|
ctxBefore.fillRect(25, 25, 50, 50);
|
|||
|
|
|
|||
|
|
// 获取带水印的图像数据
|
|||
|
|
const imageData = ctxBefore.getImageData(0, 0, 100, 100);
|
|||
|
|
|
|||
|
|
// 创建一个简单的 alpha map（中心区域 alpha = 0.5）
|
|||
|
|
const alphaMap = new Float32Array(50 * 50);
|
|||
|
|
alphaMap.fill(0.5);
|
|||
|
|
|
|||
|
|
// 应用反向 alpha 混合
|
|||
|
|
const position = { x: 25, y: 25, width: 50, height: 50 };
|
|||
|
|
removeWatermark(imageData, alphaMap, position);
|
|||
|
|
|
|||
|
|
// 显示处理后的图像
|
|||
|
|
ctxAfter.putImageData(imageData, 0, 0);
|
|||
|
|
|
|||
|
|
// 验证结果（检查中心像素是否接近红色）
|
|||
|
|
const centerPixel = imageData.data[(50 * 100 + 50) * 4];
|
|||
|
|
const result = document.getElementById('test3-result');
|
|||
|
|
|
|||
|
|
if (centerPixel > 200) { // 应该接近 255 (红色)
|
|||
|
|
result.className = 'test-result success';
|
|||
|
|
result.innerHTML = `
|
|||
|
|
✓ 反向 alpha 混合成功<br>
|
|||
|
|
- 处理前: 带白色半透明水印<br>
|
|||
|
|
- 处理后: 恢复为红色背景<br>
|
|||
|
|
- 中心像素红色值: ${centerPixel} (期望 > 200)
|
|||
|
|
`;
|
|||
|
|
} else {
|
|||
|
|
result.className = 'test-result error';
|
|||
|
|
result.innerHTML = `
|
|||
|
|
✗ 反向 alpha 混合失败<br>
|
|||
|
|
- 中心像素红色值: ${centerPixel} (期望 > 200)
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 运行所有测试
|
|||
|
|
try {
|
|||
|
|
test1();
|
|||
|
|
test2();
|
|||
|
|
test3();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('测试失败:', error);
|
|||
|
|
alert('测试失败: ' + error.message);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|