WEB进制转换器 进制转换器 tailwind.config = { theme: { extend: { colors: { primary: '#3B82F6', secondary: '#10B981', accent: '#8B5CF6', dark: '#1E293B', light: '#F8FAFC' }, fontFamily: { inter: ['Inter', 'sans-serif'], }, }, } } @layer utilities { .content-auto { content-visibility: auto; } .number-input { @apply w-full px-4 py-3 rounded-lg border-2 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary/50; } .card { @apply bg-white rounded-xl shadow-lg p-6 transition-all duration-300 hover:shadow-xl; } .btn { @apply px-6 py-3 rounded-lg font-medium transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2; } .btn-primary { @apply bg-primary text-white hover:bg-primary/90 focus:ring-primary/50; } .btn-secondary { @apply bg-secondary text-white hover:bg-secondary/90 focus:ring-secondary/50; } .btn-outline { @apply border-2 border-primary text-primary hover:bg-primary/10 focus:ring-primary/50; } } 进制转换器 轻松在二进制、八进制、十进制和十六进制之间进行转换，支持批量输入和实时计算 输入 数值 当前进制 二进制 八进制 十进制 十六进制 转换 转换结果 二进制 八进制 十进制 十六进制 转换历史 暂无历史记录 © 2025 进制转换器 | 设计与开发 // 当前选中的进制 let selectedBase = 10; // 历史记录数组 let history = []; // DOM 元素 const inputValue = document.getElementById('inputValue'); const convertBtn = document.getElementById('convertBtn'); const baseBtns = document.querySelectorAll('.base-btn'); const binaryOutput = document.getElementById('binaryOutput'); const octalOutput = document.getElementById('octalOutput'); const decimalOutput = document.getElementById('decimalOutput'); const hexOutput = document.getElementById('hexOutput'); const historyList = document.getElementById('historyList'); const copyBtns = document.querySelectorAll('.copy-btn'); // 进制按钮点击事件 baseBtns.forEach(btn => { btn.addEventListener('click', () => { // 移除所有按钮的活动状态 baseBtns.forEach(b => b.classList.remove('bg-primary/10', 'border-primary', 'text-primary')); baseBtns.forEach(b => b.classList.add('border-gray-300', 'text-gray-700')); // 添加当前按钮的活动状态 btn.classList.remove('border-gray-300', 'text-gray-700'); btn.classList.add('bg-primary/10', 'border-primary', 'text-primary'); // 更新选中的进制 selectedBase = parseInt(btn.dataset.base); }); }); // 默认选中十进制 baseBtns[2].click(); // 转换按钮点击事件 convertBtn.addEventListener('click', convertNumber); // 输入框回车事件 inputValue.addEventListener('keypress', (e) => { if (e.key === 'Enter') { convertNumber(); } }); // 复制按钮点击事件 copyBtns.forEach(btn => { btn.addEventListener('click', () => { const targetId = btn.dataset.target; const targetElement = document.getElementById(targetId); // 复制到剪贴板 targetElement.select(); document.execCommand('copy'); // 显示复制成功提示 const originalText = btn.innerHTML; btn.innerHTML = ''; btn.classList.add('text-secondary'); setTimeout(() => { btn.innerHTML = originalText; btn.classList.remove('text-secondary'); }, 2000); }); }); // 转换数字函数 function convertNumber() { const input = inputValue.value.trim(); if (!input) { showToast('请输入要转换的数值', 'error'); return; } try { // 验证输入是否符合当前进制 if (!validateInput(input, selectedBase)) { showToast(`输入的数值不符合${getBaseName(selectedBase)}格式`, 'error'); return; } // 转换为十进制 const decimalValue = parseInt(input, selectedBase); // 转换为各种进制 binaryOutput.value = decimalValue.toString(2); octalOutput.value = decimalValue.toString(8); decimalOutput.value = decimalValue.toString(10); hexOutput.value = decimalValue.toString(16).toUpperCase(); // 添加到历史记录 addToHistory(input, selectedBase); // 显示成功提示 showToast('转换成功', 'success'); } catch (error) { showToast('转换失败，请检查输入', 'error'); console.error(error); } } // 验证输入是否符合进制格式 function validateInput(input, base) { const patterns = { 2: /^[01]+$/, 8: /^[0-7]+$/, 10: /^\d+$/, 16: /^[0-9A-Fa-f]+$/ }; return patterns[base].test(input); } // 获取进制名称 function getBaseName(base) { const names = { 2: '二进制', 8: '八进制', 10: '十进制', 16: '十六进制' }; return names[base]; } // 添加到历史记录 function addToHistory(input, base) { const timestamp = new Date().toLocaleString(); const historyItem = { input, base, timestamp }; // 添加到数组开头 history.unshift(historyItem); // 限制历史记录数量 if (history.length > 10) { history.pop(); } // 更新历史记录UI updateHistoryUI(); } // 更新历史记录UI function updateHistoryUI() { if (history.length === 0) { historyList.innerHTML = '暂无历史记录'; return; } historyList.innerHTML = ''; history.forEach((item, index) => { const historyEntry = document.createElement('div'); historyEntry.className = `py-3 ${index === history.length - 1 ? '' : 'pb-3'}`; historyEntry.innerHTML = ` ${item.input} (${getBaseName(item.base)}) ${item.timestamp} 恢复 `; historyList.appendChild(historyEntry); }); // 添加历史记录项点击事件 document.querySelectorAll('.history-item-btn').forEach(btn => { btn.addEventListener('click', () => { const index = parseInt(btn.dataset.index); const item = history[index]; inputValue.value = item.input; // 选中对应的进制按钮 baseBtns.forEach(b => { if (parseInt(b.dataset.base) === item.base) { b.click(); } }); // 触发转换 convertNumber(); }); }); } // 显示提示框 function showToast(message, type = 'info') { // 创建提示框元素 const toast = document.createElement('div'); // 设置样式 toast.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-300 translate-y-[-20px] opacity-0`; // 根据类型设置不同的样式 if (type === 'success') { toast.classList.add('bg-green-50', 'border-l-4', 'border-green-400', 'text-green-700'); toast.innerHTML = ` ${message} `; } else if (type === 'error') { toast.classList.add('bg-red-50', 'border-l-4', 'border-red-400', 'text-red-700'); toast.innerHTML = ` ${message} `; } else { toast.classList.add('bg-blue-50', 'border-l-4', 'border-blue-400', 'text-blue-700'); toast.innerHTML = ` ${message} `; } // 添加到页面 document.body.appendChild(toast); // 显示动画 setTimeout(() => { toast.classList.remove('translate-y-[-20px]', 'opacity-0'); toast.classList.add('translate-y-0', 'opacity-100'); }, 10); // 3秒后隐藏 setTimeout(() => { toast.classList.remove('translate-y-0', 'opacity-100'); toast.classList.add('translate-y-[-20px]', 'opacity-0'); // 动画结束后移除元素 setTimeout(() => { document.body.removeChild(toast); }, 300); }, 3000); }

WEB图片压缩工具 高效照片压缩工具 tailwind.config = { theme: { extend: { colors: { primary: '#3B82F6', secondary: '#10B981', neutral: '#64748B', dark: '#1E293B', light: '#F8FAFC' }, fontFamily: { inter: ['Inter', 'system-ui', 'sans-serif'], }, } } } @layer utilities { .content-auto { content-visibility: auto; } .shadow-soft { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .transition-custom { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .scale-hover { @apply hover:scale-105 transition-all duration-300; } } 高效照片压缩工具 浏览器端处理 · 保护隐私 · 免费使用 上传图片 支持JPG、PNG等格式，文件将在浏览器中处理，不会上传到服务器 选择图片 重新选择 压缩设置 压缩质量: 80% 数值越低，压缩率越高，画质可能下降越明显 输出格式 JPEG PNG WebP (现代格式) 选择压缩后的图片格式 开始压缩 压缩前后对比 原图 暂无图片 尺寸: -- 大小: -- 格式: -- 压缩后 暂无图片 尺寸: -- 大小: -- 格式: -- 下载压缩图片 提示信息将显示在这里 高效照片压缩工具 © 2025 - 所有图片均在您的浏览器中处理，不会上传到任何服务器 正在处理图片... // 全局变量 let originalImageData = null; let compressedImageData = null; let isImageUploaded = false; // DOM 元素 const fileUpload = document.getElementById('file-upload'); const fileName = document.getElementById('file-name'); const resetUpload = document.getElementById('reset-upload'); const uploadContainer = document.getElementById('upload-container'); const compressionSettings = document.getElementById('compression-settings'); const previewSection = document.getElementById('preview-section'); const infoSection = document.getElementById('info-section'); const infoMessage = document.getElementById('info-message'); const qualitySlider = document.getElementById('quality'); const qualityValue = document.getElementById('quality-value'); const outputFormat = document.getElementById('output-format'); const compressBtn = document.getElementById('compress-btn'); const downloadBtn = document.getElementById('download-btn'); const originalImage = document.getElementById('original-image'); const compressedImage = document.getElementById('compressed-image'); const originalPlaceholder = document.getElementById('original-placeholder'); const compressedPlaceholder = document.getElementById('compressed-placeholder'); const originalDimensions = document.getElementById('original-dimensions'); const originalSize = document.getElementById('original-size'); const originalFormat = document.getElementById('original-format'); const compressedDimensions = document.getElementById('compressed-dimensions'); const compressedSize = document.getElementById('compressed-size'); const compressedFormat = document.getElementById('compressed-format'); const loadingOverlay = document.getElementById('loading-overlay'); // 事件监听器 fileUpload.addEventListener('change', handleFileUpload); resetUpload.addEventListener('click', resetUploadedFile); qualitySlider.addEventListener('input', updateQualityValue); compressBtn.addEventListener('click', compressImage); downloadBtn.addEventListener('click', downloadCompressedImage); // 显示质量值 function updateQualityValue() { qualityValue.textContent = qualitySlider.value; } // 处理文件上传 function handleFileUpload(e) { const file = e.target.files[0]; if (!file) return; // 检查是否是图片文件 if (!file.type.startsWith('image/')) { showInfo('请上传有效的图片文件', 'error'); resetUploadedFile(); return; } // 防止重复上传相同文件 if (isImageUploaded) { showInfo('已上传图片，请先压缩或重新选择', 'warning'); return; } // 读取文件并显示 const reader = new FileReader(); reader.onload = function(event) { const base64Data = event.target.result; // 创建图片对象获取尺寸信息 const img = new Image(); img.onload = function() { // 存储原始图片数据 originalImageData = { base64: base64Data, width: img.width, height: img.height, size: file.size, format: file.type.split('/')[1] }; // 更新UI updateOriginalImageUI(); fileName.textContent = file.name; fileName.classList.remove('hidden'); resetUpload.classList.remove('hidden'); compressionSettings.classList.remove('hidden'); previewSection.classList.remove('hidden'); uploadContainer.classList.remove('border-dashed', 'border-gray-200'); uploadContainer.classList.add('border-primary'); isImageUploaded = true; showInfo('图片上传成功，请调整压缩设置并点击"开始压缩"', 'info'); }; img.src = base64Data; }; reader.readAsDataURL(file); } // 重置上传 function resetUploadedFile() { fileUpload.value = ''; fileName.classList.add('hidden'); resetUpload.classList.add('hidden'); uploadContainer.classList.add('border-dashed', 'border-gray-200'); uploadContainer.classList.remove('border-primary'); // 重置图片数据 originalImageData = null; compressedImageData = null; isImageUploaded = false; // 重置UI resetOriginalImageUI(); resetCompressedImageUI(); compressionSettings.classList.add('hidden'); previewSection.classList.add('hidden'); infoSection.classList.add('hidden'); downloadBtn.disabled = true; } // 更新原始图片UI function updateOriginalImageUI() { originalImage.src = originalImageData.base64; originalImage.classList.remove('hidden'); originalPlaceholder.classList.add('hidden'); originalDimensions.textContent = `${originalImageData.width} × ${originalImageData.height} 像素`; originalSize.textContent = formatFileSize(originalImageData.size); originalFormat.textContent = originalImageData.format.toUpperCase(); } // 重置原始图片UI function resetOriginalImageUI() { originalImage.src = ''; originalImage.classList.add('hidden'); originalPlaceholder.classList.remove('hidden'); originalDimensions.textContent = '--'; originalSize.textContent = '--'; originalFormat.textContent = '--'; } // 重置压缩图片UI function resetCompressedImageUI() { compressedImage.src = ''; compressedImage.classList.add('hidden'); compressedPlaceholder.classList.remove('hidden'); compressedDimensions.textContent = '--'; compressedSize.textContent = '--'; compressedFormat.textContent = '--'; } // 显示提示信息 function showInfo(message, type = 'info') { infoMessage.textContent = message; infoSection.classList.remove('hidden'); // 设置不同类型的样式 infoSection.className = ''; if (type === 'info') { infoSection.classList.add('bg-blue-50', 'border-l-4', 'border-primary', 'p-4', 'rounded-r-lg', 'mb-10'); infoMessage.classList.add('text-blue-700'); infoMessage.classList.remove('text-yellow-700', 'text-red-700'); } else if (type === 'warning') { infoSection.classList.add('bg-yellow-50', 'border-l-4', 'border-yellow-400', 'p-4', 'rounded-r-lg', 'mb-10'); infoMessage.classList.add('text-yellow-700'); infoMessage.classList.remove('text-blue-700', 'text-red-700'); } else if (type === 'error') { infoSection.classList.add('bg-red-50', 'border-l-4', 'border-red-400', 'p-4', 'rounded-r-lg', 'mb-10'); infoMessage.classList.add('text-red-700'); infoMessage.classList.remove('text-blue-700', 'text-yellow-700'); } // 5秒后自动隐藏 setTimeout(() => { infoSection.classList.add('hidden'); }, 5000); } // 格式化文件大小 function formatFileSize(bytes) { if (bytes < 1024) return bytes + ' B'; else if (bytes < 1048576) return (bytes / 1024).toFixed(2) + ' KB'; else return (bytes / 1048576).toFixed(2) + ' MB'; } // 计算Base64数据大小 function getBase64FileSize(base64String) { // Base64编码的字符串大小计算: (长度 * 3) / 4 - 填充字符数 const padding = (base64String.endsWith('==') ? 2 : base64String.endsWith('=') ? 1 : 0); const fileSizeInBytes = (base64String.length * 3 / 4) - padding; return Math.round(fileSizeInBytes); } // 压缩图片 function compressImage() { if (!originalImageData) return; showLoading(true); resetCompressedImageUI(); // 使用setTimeout避免UI阻塞 setTimeout(() => { try { const img = new Image(); img.onload = function() { // 创建canvas元素 const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // 设置初始尺寸为原图尺寸 let width = img.width; let height = img.height; // 获取用户设置 const quality = qualitySlider.value / 100; const format = outputFormat.value; // 首次压缩尝试 canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height); // 根据格式获取Base64数据 let base64Data; if (format === 'jpeg') { base64Data = canvas.toDataURL('image/jpeg', quality); } else if (format === 'webp') { base64Data = canvas.toDataURL('image/webp', quality); } else { // png // PNG格式不支持quality参数，我们需要通过其他方式压缩 base64Data = canvas.toDataURL('image/png'); } // 计算压缩后大小 let compressedSize = getBase64FileSize(base64Data.split(',')[1]); // 强制确保压缩后大小小于原图大小 let iterations = 0; const maxIterations = 20; // 防止无限循环 // 如果压缩后的大小仍然大于原图，继续压缩 while (compressedSize >= originalImageData.size && iterations < maxIterations) { iterations++; // 每次迭代减小10%的尺寸 width = Math.round(width * 0.9); height = Math.round(height * 0.9); // 确保尺寸不会过小 if (width < 10 || height < 10) break; // 重新绘制并压缩 canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height); if (format === 'jpeg') { base64Data = canvas.toDataURL('image/jpeg', Math.max(0.1, quality - (iterations * 0.1))); } else if (format === 'webp') { base64Data = canvas.toDataURL('image/webp', Math.max(0.1, quality - (iterations * 0.1))); } else { // png // 对于PNG，我们通过减小尺寸来压缩 base64Data = canvas.toDataURL('image/png'); } compressedSize = getBase64FileSize(base64Data.split(',')[1]); } // 存储压缩后的图片数据 compressedImageData = { base64: base64Data, width: width, height: height, size: compressedSize, format: format }; // 更新UI updateCompressedImageUI(); downloadBtn.disabled = false; // 计算压缩率 const rate = ((1 - compressedSize / originalImageData.size) * 100).toFixed(1); showInfo(`图片压缩成功，压缩率: ${rate}%`, 'info'); showLoading(false); }; img.src = originalImageData.base64; } catch (error) { showInfo(`压缩失败: ${error.message}`, 'error'); showLoading(false); } }, 100); } // 更新压缩图片UI function updateCompressedImageUI() { if (!compressedImageData) return; compressedImage.src = compressedImageData.base64; compressedImage.classList.remove('hidden'); compressedPlaceholder.classList.add('hidden'); compressedDimensions.textContent = `${compressedImageData.width} × ${compressedImageData.height} 像素`; compressedSize.textContent = formatFileSize(compressedImageData.size); compressedFormat.textContent = compressedImageData.format.toUpperCase(); } // 下载压缩后的图片 function downloadCompressedImage() { if (!compressedImageData) return; const link = document.createElement('a'); link.href = compressedImageData.base64; // 生成文件名 const originalName = fileName.textContent.split('.').slice(0, -1).join('.'); link.download = `${originalName}_compressed.${compressedImageData.format}`; document.body.appendChild(link); link.click(); document.body.removeChild(link); showInfo('图片已下载', 'info'); } // 显示/隐藏加载动画 function showLoading(show) { if (show) { loadingOverlay.classList.remove('hidden'); } else { loadingOverlay.classList.add('hidden'); } }