<!DOCTYPE html><html><head> <title>8.9.11.12班小秘书</title> <style> body { background: linear-gradient(135deg, #FFB6C1, #FFD1DC); min-height: 100vh; margin: 0; padding: 20px; font-family: 'Comic Sans MS', cursive; position: relative; overflow: hidden; } h1 { text-align: center; color: #FF69B4; font-size: 2.8em; text-shadow: 2px 2px white; margin: 15px 0; } #dropZone { width: 500px; height: 300px; border: 3px dashed #FF69B4; border-radius: 20px; margin: 20px auto; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; font-size: 1.5em; color: #FF69B4; transition: 0.3s; } #dropZone.dragover { background: rgba(255,255,255,0.7); transform: scale(1.02); } #resultBox { width: 200px; height: 80px; background: white; border-radius: 15px; margin: 0 auto; box-shadow: 0 0 15px rgba(255,105,180,0.3); display: flex; align-items: center; justify-content: center; font-size: 1.8em; color: #FF69B4; } .heart { position: absolute; font-size: 20px; color: #FF69B4; animation: fall 6s linear infinite; } @keyframes fall { 0% { transform: translateY(-50px) rotate(0deg); } 100% { transform: translateY(100vh) rotate(360deg); } } </style></head><body> <!-- 飘落的心形装饰 --> <divclass="heart">❤</div> <divclass="heart"style="left:10%;animation-delay:1s">❤</div> <divclass="heart"style="left:30%;animation-delay:2s">❤</div> <h1>🌸 8.8班小秘书 🌸</h1> <divid="dropZone"> 把方格纸图片拖到这里~<br> (支持JPG/PNG格式) </div> <divid="resultBox">等待计算...</div> <canvasid="canvas"hidden></canvas> <script> const dropZone = document.getElementById('dropZone'); const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 拖拽事件处理 dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('dragover'); }); dropZone.addEventListener('dragleave', () => { dropZone.classList.remove('dragover'); }); dropZone.addEventListener('drop', (e) => { e.preventDefault(); dropZone.classList.remove('dragover'); const file = e.dataTransfer.files[0]; processImage(file); }); // 图像处理 function processImage(file) { const img = new Image(); img.onload = () => { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); analyzeGrid(); } img.src = URL.createObjectURL(file); } function analyzeGrid() { const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); let gridCount = 0; // 简化版网格检测算法 const gridSize = 20; // 假设每个格子20像素 for(let y = 0; y < canvas.height; y += gridSize) { for(let x = 0; x < canvas.width; x += gridSize) { const pixel = ctx.getImageData(x, y, 1, 1).data; // 检测深色像素（脚印区域） if(pixel[0] < 100 && pixel[1] < 100 && pixel[2] < 100) { gridCount++; } } } // 计算面积（1格=0.1cm²=0.00001m²） const area = gridCount * 0.00001; document.getElementById('resultBox').innerHTML = `${area.toFixed(4)} m²<br><small>≈${gridCount}个小方格</small>`; } </script></body></html>
