图片压缩 - 小睿 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: 700px; 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-area.dragover { border-color: #667eea; background: #f0f0ff; } .upload-icon { font-size: 48px; margin-bottom: 15px; } .file-input { display: none; } .preview-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0; } .preview-box { text-align: center; padding: 15px; background: #f9f9f9; border-radius: 10px; } .preview-box img { max-width: 100%; border-radius: 8px; } .preview-label { font-weight: 500; margin: 10px 0 5px; } .preview-size { color: #999; font-size: 14px; } .option-group { margin: 20px 0; } .option-group label { display: block; margin-bottom: 8px; font-weight: 500; } .quality-slider { width: 100%; } .quality-value { font-size: 20px; font-weight: bold; color: #667eea; text-align: center; } .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; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 20px 0; } .stat-box { text-align: center; padding: 15px; background: #f0f0ff; border-radius: 10px; } .stat-value { font-size: 24px; font-weight: bold; color: #667eea; } .stat-label { font-size: 13px; color: #666; margin-top: 5px; } </style> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "SoftwareApplication", "name": "图片压缩", "description": "在线压缩图片，保持清晰度", "url": "https://xrdj.club/tool.php?id=33", "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、WEBP 格式</p> <input type="file" class="file-input" id="fileInput" accept="image/*"> </div> <div id="editorArea" class="hidden"> <div class="option-group"> <label>压缩质量�?span class="quality-value" id="qualityValue">80%</span></label> <input type="range" class="quality-slider" id="quality" min="10" max="100" value="80" oninput="document.getElementById('qualityValue').textContent = this.value + '%'"> </div> <div class="stats"> <div class="stat-box"> <div class="stat-value" id="originalSize">-</div> <div class="stat-label">原始大小</div> </div> <div class="stat-box"> <div class="stat-value" id="compressedSize">-</div> <div class="stat-label">压缩后大�?/div> </div> <div class="stat-box"> <div class="stat-value" id="compressRate">-</div> <div class="stat-label">压缩�?/div> </div> </div> <div class="preview-container"> <div class="preview-box"> <div class="preview-label">原始图片</div> <img id="originalPreview" alt="原始图片"> <div class="preview-size" id="originalDimensions">-</div> </div> <div class="preview-box"> <div class="preview-label">压缩预览</div> <img id="compressedPreview" alt="压缩预览"> <div class="preview-size" id="compressedDimensions">-</div> </div> </div> <div class="btn-group"> <button class="btn btn-primary" onclick="compressImage()">🔄 重新压缩</button> <button class="btn btn-success" onclick="downloadImage()">📥 下载压缩图片</button> <button class="btn" style="background:#ff4d4f;color:#fff" onclick="resetAll()">�?重新选择</button> </div> </div> </div> <script> let originalFile = null; let compressedBlob = null; const uploadArea = document.getElementById('uploadArea'); const fileInput = document.getElementById('fileInput'); const editorArea = document.getElementById('editorArea'); uploadArea.addEventListener('dragover', (e) => { e.preventDefault(); uploadArea.classList.add('dragover'); }); uploadArea.addEventListener('dragleave', () => { uploadArea.classList.remove('dragover'); }); uploadArea.addEventListener('drop', (e) => { e.preventDefault(); uploadArea.classList.remove('dragover'); const files = e.dataTransfer.files; if (files.length > 0) handleFile(files[0]); }); fileInput.addEventListener('change', (e) => { if (e.target.files.length > 0) handleFile(e.target.files[0]); }); function handleFile(file) { if (!file.type.startsWith('image/')) { alert('请上传图片文�?); return; } originalFile = file; const reader = new FileReader(); reader.onload = (e) => { const img = new Image(); img.onload = () => { document.getElementById('originalPreview').src = e.target.result; document.getElementById('originalDimensions').textContent = `${img.width} x ${img.height}`; document.getElementById('originalSize').textContent = formatSize(file.size); uploadArea.classList.add('hidden'); editorArea.classList.remove('hidden'); compressImage(); }; img.src = e.target.result; }; reader.readAsDataURL(file); } function compressImage() { if (!originalFile) return; const quality = parseInt(document.getElementById('quality').value) / 100; const img = document.getElementById('originalPreview'); const canvas = document.createElement('canvas'); canvas.width = img.naturalWidth; canvas.height = img.naturalHeight; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); canvas.toBlob((blob) => { compressedBlob = blob; const url = URL.createObjectURL(blob); document.getElementById('compressedPreview').src = url; document.getElementById('compressedDimensions').textContent = `${img.naturalWidth} x ${img.naturalHeight}`; document.getElementById('compressedSize').textContent = formatSize(blob.size); const rate = ((1 - blob.size / originalFile.size) * 100).toFixed(1); document.getElementById('compressRate').textContent = rate + '%'; }, 'image/jpeg', quality); } function downloadImage() { if (!compressedBlob) return; const url = URL.createObjectURL(compressedBlob); const a = document.createElement('a'); a.href = url; a.download = 'compressed-' + Date.now() + '.jpg'; a.click(); URL.revokeObjectURL(url); } function resetAll() { originalFile = null; compressedBlob = null; fileInput.value = ''; editorArea.classList.add('hidden'); uploadArea.classList.remove('hidden'); } function formatSize(bytes) { if (bytes < 1024) return bytes + ' B'; if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'; return (bytes / (1024 * 1024)).toFixed(2) + ' MB'; } document.getElementById('quality').addEventListener('input', compressImage); </script> </body> </html>