🔄 图片格式转换工具

支持JPG、PNG、WEBP、GIF、BMP等多种格式互转，纯客户端处理

上传图片

📤

将图片拖到此处

或点击上传

支持 JPG、PNG、GIF、WEBP、BMP，最大10MB

转换设置

目标格式

图片质量: 85%

💡 使用说明

支持拖拽上传或点击上传图片
支持 JPG、PNG、WEBP、GIF、BMP 格式
可调整输出图片质量（1-100%）
纯客户端处理，保护隐私安全
转换后可直接下载保存

原图预览

请先上传图片

转换结果

转换结果将在此显示

document.getElementById('resultPreview').innerHTML = '

转换结果将在此显示

'; document.getElementById('resultSection').style.display = 'none'; } // 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', function() { updateQuality(); }); // 选择目标格式 function selectFormat(format) { selectedFormat = format; document.querySelectorAll('.format-btn').forEach(btn => btn.classList.remove('active')); event.target.classList.add('active'); // GIF和PNG不支持质量参数 const qualityGroup = document.getElementById('qualityGroup'); if (format === 'gif' || format === 'png') { qualityGroup.style.display = 'none'; } else { qualityGroup.style.display = 'block'; } } // 更新质量显示 function updateQuality() { document.getElementById('qualityValue').textContent = document.getElementById('quality').value; } // 转换图片 function convertImage() { if (!originalImage) { alert('请先上传图片'); return; } const canvas = document.createElement('canvas'); canvas.width = originalImage.width; canvas.height = originalImage.height; const ctx = canvas.getContext('2d'); // 白色背景（用于透明PNG转JPG） if (selectedFormat === 'jpeg' || selectedFormat === 'bmp') { ctx.fillStyle = '#FFFFFF'; ctx.fillRect(0, 0, canvas.width, canvas.height); } ctx.drawImage(originalImage, 0, 0); // 获取质量参数 const quality = parseInt(document.getElementById('quality').value) / 100; // 转换图片 const mimeType = `image/${selectedFormat}`; convertedDataUrl = canvas.toDataURL(mimeType, quality); // 计算转换后的大小 const head = 'data:' + mimeType + ';base64,'; const sizeInBytes = Math.round((convertedDataUrl.length - head.length) * 3 / 4); // 显示转换结果 const resultPreview = document.getElementById('resultPreview'); resultPreview.innerHTML = `

`; // 显示结果信息 document.getElementById('resultFormat').textContent = selectedFormat.toUpperCase(); document.getElementById('resultSize').textContent = formatFileSize(sizeInBytes); document.getElementById('resultQuality').textContent = document.getElementById('quality').value + '%'; document.getElementById('resultSection').style.display = 'block'; } // 下载图片 function downloadImage() { if (!convertedDataUrl) { alert('请先转换图片'); return; } const link = document.createElement('a'); const originalName = document.getElementById('fileName').textContent; const nameWithoutExt = originalName.substring(0, originalName.lastIndexOf('.')); link.download = `${nameWithoutExt}.${selectedFormat}`; link.href = convertedDataUrl; link.click(); } // 重新选择 function resetFile() { fileInput.value = ''; originalImage = null; convertedDataUrl = null; document.getElementById('fileInfo').style.display = 'none'; document.getElementById('originalPreview').innerHTML = '

请先上传图片

'; resetResult(); } // 重置全部 function resetAll() { if (originalImage && !confirm('确定要重置所有内容吗？')) { return; } resetFile(); } // 重置结果 function resetResult() { convertedDataUrl = null; document.getElementById('resultPreview').innerHTML = '

转换结果将在此显示

'; document.getElementById('resultSection').style.display = 'none'; } // 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', function() { updateQuality(); });

🔄 图片格式转换工具

原图预览

转换结果

转换结果

📖 关于图片格式转换工具

✨ 核心功能

🎯 应用场景

❓ 常见问题

支持哪些图片格式转换？

JPG和PNG有什么区别？

什么是WEBP格式？

🔗 相关工具推荐