鍥剧墖鍘嬬缉鍦ㄧ嚎宸ュ叿 - 鍏嶈垂銆佹湰鍦板鐞嗐€佺敾璐ㄥ彲璋?/title> <meta name="description" content="鍏嶈垂鍦ㄧ嚎鍥剧墖鍘嬬缉宸ュ叿锛屾敮鎸丣PG/PNG/WebP锛屾嫋鎷戒笂浼狅紝瀹炴椂瀵规瘮鍘嬬缉鍓嶅悗鏁堟灉锛岃川閲忎笌灏哄鑷敱璋冭妭锛屾墍鏈夊鐞嗗湪娴忚鍣ㄦ湰鍦板畬鎴愶紝涓嶄笂浼犳湇鍔″櫒銆?> <meta name="keywords" content="鍥剧墖鍘嬬缉,鍦ㄧ嚎鍥剧墖鍘嬬缉,鍏嶈垂鍥剧墖鍘嬬缉,jpg鍘嬬缉,png鍘嬬缉,鍥剧墖鍑忓皬浣撶Н"> <link rel="canonical" href="https://www.cqqzx.com/tools/tupian-yasuo.html"> <link rel="alternate" hreflang="en" href="https://www.cqqzx.com/tools/en/image-compressor.html"> <link rel="stylesheet" href="/style.css"> <link rel="icon" type="image/x-icon" href="/favicon.ico"> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/browser-image-compression@2.0.2/dist/browser-image-compression.js"></script> <script> tailwind.config = { theme: { extend: { colors: { primary: '#2f6fed', navy: '#0d1f42', 'navy-deep': '#0a1735', } } } } </script> <script src="https://analytics.ahrefs.com/analytics.js" data-key="nXMYzuPiHdtDaAJkCq07sw" async></script> </head> <body class="bg-gray-50"> <header class="site-header"> <div class="container"> <a href="/" class="brand">閲嶅簡<span class="dot">路</span>鍏姞浜?/a> <nav class="nav-links"> <a href="/tools/" class="active">鍦ㄧ嚎宸ュ叿</a> <a href="/xiaochengxu-kaifa/">灏忕▼搴忓紑鍙?/a> <a href="/dulizhan-jianshe/">鐙珛绔欏缓璁?/a> <a href="/google-seo/">璋锋瓕SEO</a> <a href="/blog/">鍗氬</a> <a href="/contact.html">鍏嶈垂鍜ㄨ</a> </nav> </div> </header> <div class="container breadcrumb"> <a href="/">棣栭〉</a> / <a href="/tools/">鍦ㄧ嚎宸ュ叿</a> / 鍥剧墖鍘嬬缉 </div> <section class="hero" style="padding: 40px 0 30px;"> <div class="container"> <div class="eyebrow">DESIGN 路璁捐宸ュ叿</div> <h1 class="hero-title">鍦ㄧ嚎鍥剧墖鍘嬬缉宸ュ叿</h1> <p class="hero-sub">鎷栨嫿涓婁紶锛屽疄鏃跺姣斿帇缂╂晥鏋滐紝璐ㄩ噺涓庡昂瀵歌嚜鐢辫皟鑺傦紝100% 娴忚鍣ㄦ湰鍦板鐞嗭紝鍥剧墖涓嶄笂浼犳湇鍔″櫒銆?/p> </div> </section> <section class="block" style="padding-top: 10px;"> <div class="container"> <div class="trust-bar" style="background:#e3f2fd;padding:14px;text-align:center;border-radius:10px;margin-bottom:28px;font-size:14px;color:#1565c0;font-weight:500;"> 馃敀 100% 鏈湴杩愯 路鍥剧墖涓嶄細涓婁紶鍒颁换浣曟湇鍔″櫒路瀹夊叏闅愮 </div>  <div class="max-w-5xl mx-auto bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">  <div id="uploadSection" class="p-8 md:p-12"> <div id="dropZone" class="border-2 border-dashed border-gray-300 rounded-xl p-10 md:p-14 text-center cursor-pointer transition-all duration-200 hover:border-primary hover:bg-blue-50/50 group" > <div class="text-5xl mb-4 group-hover:scale-110 transition-transform">馃柤锔?/div> <h3 class="text-lg font-semibold text-gray-800 mb-2">鎷栨嫿鍥剧墖鍒拌繖閲岋紝鎴栫偣鍑婚€夋嫨鏂囦欢</h3> <p class="text-sm text-gray-500 mb-4">鏀寔 JPG銆丳NG銆乄ebP 鏍煎紡锛屽崟寮犳渶澶?20MB</p> <button class="inline-flex items-center gap-2 bg-primary hover:bg-primary/90 text-white px-5 py-2.5 rounded-lg text-sm font-medium transition-colors"> <span>馃搧</span> 閫夋嫨鍥剧墖 </button> <input type="file" id="fileInput" accept="image/jpeg,image/png,image/webp" class="hidden"> </div> </div>  <div id="workSection" class="hidden">  <div class="bg-gray-50 border-b border-gray-100 px-6 md:px-8 py-5"> <div class="flex flex-col md:flex-row md:items-center gap-5">  <div class="flex-1"> <div class="flex items-center justify-between mb-2"> <label class="text-sm font-medium text-gray-700">鍘嬬缉璐ㄩ噺</label> <span id="qualityValue" class="text-sm font-semibold text-primary">0.7</span> </div> <input type="range" id="qualitySlider" min="0.1" max="1" step="0.05" value="0.7" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary" > <div class="flex justify-between text-xs text-gray-400 mt-1"> <span>浣撶Н鏈€灏?/span> <span>鍧囪　</span> <span>鐢昏川鏈€浣?/span> </div> </div>  <div class="w-full md:w-44"> <label class="text-sm font-medium text-gray-700 block mb-2">鏈€澶ц竟闀?(px)</label> <input type="number" id="maxSizeInput" placeholder="涓嶉檺鍒? class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary" > <p class="text-xs text-gray-400 mt-1">渚嬪 1920锛岀暀绌轰笉闄愬埗</p> </div>  <div class="md:ml-auto"> <button id="compressBtn" class="w-full md:w-auto inline-flex items-center justify-center gap-2 bg-primary hover:bg-primary/90 disabled:bg-primary/50 disabled:cursor-not-allowed text-white px-5 py-2.5 rounded-lg text-sm font-medium transition-colors" > <span id="compressBtnIcon">鈿?/span> <span id="compressBtnText">閲嶆柊鍘嬬缉</span> </button> </div> </div> </div>  <div class="p-6 md:p-8"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">  <div> <div class="flex items-center justify-between mb-3"> <h4 class="text-sm font-semibold text-gray-600">鍘熷浘</h4> <span id="originalSize" class="text-sm text-gray-500 font-medium">鈥?/span> </div> <div class="bg-gray-100 rounded-lg overflow-hidden aspect-video flex items-center justify-center"> <img id="originalImg" class="max-w-full max-h-full object-contain" alt="鍘熷浘"> </div> <p id="originalInfo" class="text-xs text-gray-400 mt-2">鈥?/p> </div>  <div> <div class="flex items-center justify-between mb-3"> <h4 class="text-sm font-semibold text-gray-600">鍘嬬缉鍚?/h4> <div class="flex items-center gap-2"> <span id="compressedSize" class="text-sm font-semibold text-green-600">鈥?/span> <span id="savePercent" class="text-xs px-2 py-0.5 bg-green-100 text-green-700 rounded-full font-medium hidden">鑺傜渷 0%</span> </div> </div> <div class="bg-gray-100 rounded-lg overflow-hidden aspect-video flex items-center justify-center relative"> <img id="compressedImg" class="max-w-full max-h-full object-contain" alt="鍘嬬缉鍚?> <div id="loadingOverlay" class="absolute inset-0 bg-white/80 flex items-center justify-center hidden"> <div class="flex flex-col items-center gap-2"> <div class="w-8 h-8 border-3 border-primary/30 border-t-primary rounded-full animate-spin"></div> <span class="text-sm text-gray-500">鍘嬬缉涓?..</span> </div> </div> </div> <p id="compressedInfo" class="text-xs text-gray-400 mt-2">鈥?/p> </div> </div>  <div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-3"> <button id="downloadBtn" class="inline-flex items-center gap-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white px-8 py-3 rounded-xl text-sm font-semibold transition-colors shadow-sm" disabled > <span>猬囷笍</span> 涓嬭浇鍘嬬缉鍚庣殑鍥剧墖 </button> <button id="resetBtn" class="inline-flex items-center gap-2 text-gray-500 hover:text-gray-700 px-4 py-3 rounded-xl text-sm font-medium transition-colors" > <span>馃攧</span> 鎹竴寮犲浘鐗? </button> </div> </div> </div> </div>  <div class="max-w-5xl mx-auto mt-10 grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="bg-white rounded-xl p-5 border border-gray-100"> <div class="text-2xl mb-2">馃敀</div> <h4 class="font-semibold text-gray-800 mb-1">鏈湴澶勭悊</h4> <p class="text-sm text-gray-500">鎵€鏈夊帇缂╁湪娴忚鍣ㄥ唴瀹屾垚锛屽浘鐗囦笉浼氫笂浼犲埌浠讳綍鏈嶅姟鍣ㄣ€?/p> </div> <div class="bg-white rounded-xl p-5 border border-gray-100"> <div class="text-2xl mb-2">鈿?/div> <h4 class="font-semibold text-gray-800 mb-1">鍗冲紑鍗崇敤</h4> <p class="text-sm text-gray-500">鏃犻渶娉ㄥ唽鐧诲綍锛屾嫋鎷戒笂浼犲嵆鍙帇缂╋紝鏀寔鎵归噺鍗曞紶澶勭悊銆?/p> </div> <div class="bg-white rounded-xl p-5 border border-gray-100"> <div class="text-2xl mb-2">馃帥锔?/div> <h4 class="font-semibold text-gray-800 mb-1">鑷敱璋冭妭</h4> <p class="text-sm text-gray-500">鍘嬬缉璐ㄩ噺婊戝潡 + 鏈€澶у昂瀵搁檺鍒讹紝鎵惧埌浣撶Н涓庣敾璐ㄧ殑骞宠　鐐广€?/p> </div> </div> </div> </section>  <section class="block" style="background:#f8f9fa;"> <div class="container"> <h2 style="margin-bottom:20px;font-size:18px;">馃敆鐩稿叧宸ュ叿鎺ㄨ崘</h2> <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;"> <a href="/tools/erweima-shengcheng.html" class="rel-card"><h4>浜岀淮鐮佺敓鎴愬櫒</h4><p>杈撳叆鏂囧瓧鐢熸垚浜岀淮鐮侊紝鏀寔PNG涓嬭浇</p></a> <a href="/tools/yanse-zhuanhuan.html" class="rel-card"><h4>棰滆壊鍊艰浆鎹?/h4><p>HEX/RGB/HSL棰滆壊妯″紡浜掕浆</p></a> <a href="/tools/pdf-hebing.html" class="rel-card"><h4>PDF 鍚堝苟</h4><p>澶氫釜PDF鏂囦欢鍚堝苟涓轰竴涓?/p></a> <a href="/tools/zishu-tongji.html" class="rel-card"><h4>瀛楁暟缁熻</h4><p>鍦ㄧ嚎缁熻瀛楃鏁般€佸崟璇嶆暟銆佽鏁?/p></a> </div> </div> </section> <footer class="site-footer"> <div class="container"> <div>閲嶅簡鍏姞浜岀鎶€鏈夐檺鍏徃路 <a href="https://beian.miit.gov.cn/">娓滻CP澶?025058865鍙?1</a></div> <div><a href="/tools/">涓枃</a> 路 <a href="/tools/en/">English</a> 路 <a href="/tools/es/">Espa帽ol</a> 路 <a href="/tools/ja/">鏃ユ湰瑾?/a> 路 <a href="/tools/de/">Deutsch</a></div> </div> </footer> <script> const dropZone = document.getElementById('dropZone'); const fileInput = document.getElementById('fileInput'); const uploadSection = document.getElementById('uploadSection'); const workSection = document.getElementById('workSection'); const qualitySlider = document.getElementById('qualitySlider'); const qualityValue = document.getElementById('qualityValue'); const maxSizeInput = document.getElementById('maxSizeInput'); const compressBtn = document.getElementById('compressBtn'); const compressBtnText = document.getElementById('compressBtnText'); const compressBtnIcon = document.getElementById('compressBtnIcon'); const originalImg = document.getElementById('originalImg'); const compressedImg = document.getElementById('compressedImg'); const originalSize = document.getElementById('originalSize'); const compressedSize = document.getElementById('compressedSize'); const originalInfo = document.getElementById('originalInfo'); const compressedInfo = document.getElementById('compressedInfo'); const savePercent = document.getElementById('savePercent'); const downloadBtn = document.getElementById('downloadBtn'); const resetBtn = document.getElementById('resetBtn'); const loadingOverlay = document.getElementById('loadingOverlay'); let currentFile = null; let compressedFile = null; // 鏍煎紡鍖栨枃浠跺ぇ灏? 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'; } // 鐐瑰嚮涓婁紶 dropZone.addEventListener('click', () => fileInput.click()); fileInput.addEventListener('change', (e) => { if (e.target.files[0]) handleFile(e.target.files[0]); }); // 鎷栨嫿涓婁紶 ['dragenter', 'dragover'].forEach(evt => { dropZone.addEventListener(evt, (e) => { e.preventDefault(); dropZone.classList.add('border-primary', 'bg-blue-50'); }); }); ['dragleave', 'drop'].forEach(evt => { dropZone.addEventListener(evt, (e) => { e.preventDefault(); dropZone.classList.remove('border-primary', 'bg-blue-50'); }); }); dropZone.addEventListener('drop', (e) => { const file = e.dataTransfer.files[0]; if (file && file.type.startsWith('image/')) handleFile(file); }); // 鍏ㄥ眬鎷栨嫿闃叉鎵撳紑鏂囦欢 window.addEventListener('dragover', e => e.preventDefault()); window.addEventListener('drop', e => e.preventDefault()); // 澶勭悊鏂囦欢 function handleFile(file) { if (file.size > 20 * 1024 * 1024) { alert('鍥剧墖澶у皬涓嶈兘瓒呰繃 20MB'); return; } currentFile = file; originalImg.src = URL.createObjectURL(file); originalSize.textContent = formatSize(file.size); originalImg.onload = () => { originalInfo.textContent = `${originalImg.naturalWidth} 脳 ${originalImg.naturalHeight} px`; }; uploadSection.classList.add('hidden'); workSection.classList.remove('hidden'); // 鑷姩鍘嬬缉涓€娆? compressImage(); } // 璐ㄩ噺婊戝潡瀹炴椂鏄剧ず qualitySlider.addEventListener('input', () => { qualityValue.textContent = parseFloat(qualitySlider.value).toFixed(2); }); // 鍘嬬缉鎸夐挳 compressBtn.addEventListener('click', compressImage); // 鎵ц鍘嬬缉 async function compressImage() { if (!currentFile) return; compressBtn.disabled = true; compressBtnText.textContent = '鍘嬬缉涓?..'; compressBtnIcon.textContent = '鈴?; loadingOverlay.classList.remove('hidden'); downloadBtn.disabled = true; try { const quality = parseFloat(qualitySlider.value); const maxSize = maxSizeInput.value ? parseInt(maxSizeInput.value) : undefined; const options = { initialQuality: quality, maxSizeMB: 50, // 璁惧ぇ涓€鐐癸紝璁﹒uality璧蜂富瀵间綔鐢? useWebWorker: true, }; if (maxSize) { options.maxWidthOrHeight = maxSize; } const result = await imageCompression(currentFile, options); compressedFile = result; compressedImg.src = URL.createObjectURL(result); compressedSize.textContent = formatSize(result.size); compressedImg.onload = () => { compressedInfo.textContent = `${compressedImg.naturalWidth} 脳 ${compressedImg.naturalHeight} px`; }; // 璁＄畻鑺傜渷姣斾緥 const saved = ((1 - result.size / currentFile.size) * 100).toFixed(1); if (saved > 0) { savePercent.textContent = `鑺傜渷 ${saved}%`; savePercent.classList.remove('hidden'); savePercent.className = 'text-xs px-2 py-0.5 bg-green-100 text-green-700 rounded-full font-medium'; } else { savePercent.textContent = `澧炲姞 ${Math.abs(saved)}%`; savePercent.classList.remove('hidden'); savePercent.className = 'text-xs px-2 py-0.5 bg-red-100 text-red-700 rounded-full font-medium'; } downloadBtn.disabled = false; } catch (err) { console.error(err); alert('鍘嬬缉澶辫触锛? + err.message); } finally { compressBtn.disabled = false; compressBtnText.textContent = '閲嶆柊鍘嬬缉'; compressBtnIcon.textContent = '鈿?; loadingOverlay.classList.add('hidden'); } } // 涓嬭浇 downloadBtn.addEventListener('click', () => { if (!compressedFile) return; const url = URL.createObjectURL(compressedFile); const a = document.createElement('a'); const dotIndex = currentFile.name.lastIndexOf('.'); const baseName = currentFile.name.substring(0, dotIndex); const ext = currentFile.name.substring(dotIndex); a.href = url; a.download = `${baseName}-compressed${ext}`; a.click(); URL.revokeObjectURL(url); }); // 閲嶇疆 resetBtn.addEventListener('click', () => { currentFile = null; compressedFile = null; fileInput.value = ''; originalImg.src = ''; compressedImg.src = ''; workSection.classList.add('hidden'); uploadSection.classList.remove('hidden'); savePercent.classList.add('hidden'); downloadBtn.disabled = true; }); </script> <style> /* 瑕嗙洊 Tailwind 涓?header 鏍峰紡涓嶅彈褰卞搷 */ .site-header { position: relative; z-index: 10; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #2f6fed; cursor: pointer; box-shadow: 0 2px 6px rgba(47,111,237,.4); } input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #2f6fed; cursor: pointer; border: none; box-shadow: 0 2px 6px rgba(47,111,237,.4); } @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 0.8s linear infinite; } .border-3 { border-width: 3px; } </style> </body> </html>