九宫格切�?- 小睿 AI 工具�?/title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; } .container { max-width: 800px; margin: 0 auto; background: #fff; border-radius: 20px; padding: 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid #f0f0f0; } .tool-name { font-size: 24px; font-weight: bold; color: #333; } .back-link { color: #667eea; text-decoration: none; } .upload-area { border: 3px dashed #e0e0e0; border-radius: 15px; padding: 40px; text-align: center; cursor: pointer; transition: all 0.3s; margin: 20px 0; } .upload-area:hover { border-color: #667eea; background: #f9f9ff; } .upload-icon { font-size: 48px; margin-bottom: 15px; } .file-input { display: none; } .preview-area { margin: 30px 0; } .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; } .grid-item { position: relative; aspect-ratio: 1; border: 2px solid #e0e0e0; border-radius: 10px; overflow: hidden; background: #f9f9f9; } .grid-item img { width: 100%; height: 100%; object-fit: cover; } .grid-number { position: absolute; top: 5px; left: 5px; background: rgba(0,0,0,0.6); color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; } .btn { padding: 15px 30px; border: none; border-radius: 10px; font-size: 16px; cursor: pointer; margin: 10px 5px; } .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; } .btn-success { background: #52c41a; color: #fff; } .btn-group { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; } .hidden { display: none; } .option-group { margin: 20px 0; text-align: center; } .option-group label { margin: 0 10px; cursor: pointer; } .option-group input[type="radio"] { margin-right: 5px; } </style> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "SoftwareApplication", "name": "九宫格切图", "description": "一键将图片切成九宫格", "url": "https://xrdj.club/tool.php?id=32", "applicationCategory": "UtilitiesApplication", "operatingSystem": "All", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "CNY" }, "author": { "@type": "Organization", "name": "小睿 AI 工具箱", "url": "https://xrdj.club" } } </script> </head> <body> <div class="container"> <div class="header"> <div class="tool-name">📱 九宫格切�?/div> <a href="/" class="back-link">�?返回首页</a> </div> <div class="upload-area" id="uploadArea" onclick="document.getElementById('fileInput').click()"> <div class="upload-icon">📁</div> <h3>点击或拖拽上传图�?/h3> <p style="color: #999; margin-top: 10px;">支持 JPG、PNG 格式</p> <input type="file" class="file-input" id="fileInput" accept="image/*"> </div> <div id="editorArea" class="hidden"> <div class="option-group"> <label><input type="radio" name="gridType" value="3" checked> 3x3 (九宫�?</label> <label><input type="radio" name="gridType" value="4"> 4x4 (十六宫格)</label> <label><input type="radio" name="gridType" value="6"> 6x6 (三十六宫�?</label> </div> <div class="preview-area"> <h3 style="margin-bottom: 15px;">切图预览�?/h3> <div class="grid-container" id="gridContainer"></div> </div> <div class="btn-group"> <button class="btn btn-primary" onclick="cutImage()">🔄 重新切图</button> <button class="btn btn-success" onclick="downloadAll()">📥 打包下载</button> <button class="btn" style="background:#ff4d4f;color:#fff" onclick="resetAll()">�?重新选择</button> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script> <script> let originalImage = null; let slices = []; document.getElementById('fileInput').addEventListener('change', handleFile); function handleFile(e) { const file = e.target.files[0]; if (!file || !file.type.startsWith('image/')) { alert('请上传图片文�?); return; } const reader = new FileReader(); reader.onload = (event) => { const img = new Image(); img.onload = () => { originalImage = img; document.getElementById('uploadArea').classList.add('hidden'); document.getElementById('editorArea').classList.remove('hidden'); cutImage(); }; img.src = event.target.result; }; reader.readAsDataURL(file); } function cutImage() { if (!originalImage) return; const gridType = parseInt(document.querySelector('input[name="gridType"]:checked').value); const container = document.getElementById('gridContainer'); container.innerHTML = ''; container.style.gridTemplateColumns = `repeat(${gridType}, 1fr)`; const sliceWidth = originalImage.naturalWidth / gridType; const sliceHeight = originalImage.naturalHeight / gridType; slices = []; for (let row = 0; row < gridType; row++) { for (let col = 0; col < gridType; col++) { const canvas = document.createElement('canvas'); canvas.width = sliceWidth; canvas.height = sliceHeight; const ctx = canvas.getContext('2d'); ctx.drawImage( originalImage, col * sliceWidth, row * sliceHeight, sliceWidth, sliceHeight, 0, 0, sliceWidth, sliceHeight ); const dataUrl = canvas.toDataURL('image/jpeg', 0.9); slices.push(dataUrl); const item = document.createElement('div'); item.className = 'grid-item'; item.innerHTML = ` <div class="grid-number">${row * gridType + col + 1}</div> <img src="${dataUrl}" alt="Slice ${row * gridType + col + 1}"> `; container.appendChild(item); } } } function downloadAll() { if (slices.length === 0) return; const zip = new JSZip(); const gridType = Math.sqrt(slices.length); slices.forEach((dataUrl, index) => { const base64Data = dataUrl.split(',')[1]; zip.file(`slice_${index + 1}.jpg`, base64Data, {base64: true}); }); zip.generateAsync({type: 'blob'}).then((blob) => { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `grid-${gridType}x${gridType}-${Date.now()}.zip`; a.click(); URL.revokeObjectURL(url); }); } function resetAll() { originalImage = null; slices = []; document.getElementById('fileInput').value = ''; document.getElementById('editorArea').classList.add('hidden'); document.getElementById('uploadArea').classList.remove('hidden'); } document.querySelectorAll('input[name="gridType"]').forEach(radio => { radio.addEventListener('change', cutImage); }); </script> </body> </html>