🔄 图片批量改后缀名

© 2026 ZenTools · 所有处理均在浏览器本地完成 const dropZone = document.getElementById('dropZone'); const fileInput = document.getElementById('fileInput'); const convertBtn = document.getElementById('convertBtn'); const downloadBtn = document.getElementById('downloadBtn'); const formatSelect = document.getElementById('formatSelect'); const fileList = document.getElementById('fileList'); let files = []; let convertedBlobs = []; dropZone.addEventListener('click', () => fileInput.click()); dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('dragover'); }); dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover')); dropZone.addEventListener('drop', (e) => { e.preventDefault(); dropZone.classList.remove('dragover'); handleFiles(e.dataTransfer.files); }); fileInput.addEventListener('change', (e) => handleFiles(e.target.files)); function handleFiles(selectedFiles) { files = Array.from(selectedFiles).filter(f => f.type.startsWith('image/')); if (!files.length) return; renderFileList(); convertBtn.disabled = false; convertedBlobs = []; } function renderFileList() { fileList.innerHTML = files.map((f, i) => ``).join(''); } convertBtn.addEventListener('click', async () => { convertBtn.disabled = true; convertedBlobs = []; for (let i = 0; i < files.length; i++) { const item = fileList.querySelector(`[data-index="${i}"] .status`); const format = formatSelect.value; try { const img = await loadImage(files[i]); const canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; const ctx = canvas.getContext('2d'); if (format === 'jpg') ctx.fillStyle = '#fff'; else ctx.fillStyle = 'transparent'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0); const blob = await new Promise(r => canvas.toBlob(r, 'image/' + format, 0.9)); convertedBlobs.push({ blob, name: files[i].name.replace(/\.[^.]+$/, '') + '.' + format }); item.textContent = '✓ 转换成功'; item.classList.add('success'); } catch (e) { item.textContent = '✗ 转换失败'; item.classList.add('error'); } } downloadBtn.disabled = convertedBlobs.length === 0; convertBtn.disabled = false; }); function loadImage(file) { return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => resolve(img); img.onerror = reject; img.src = URL.createObjectURL(file); }); } downloadBtn.addEventListener('click', () => { if (!convertedBlobs.length) return; if (convertedBlobs.length === 1) { const a = document.createElement('a'); a.href = URL.createObjectURL(convertedBlobs[0].blob); a.download = convertedBlobs[0].name; a.click(); } else { import('https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js').then(JSZip => { const zip = new JSZip.default(); convertedBlobs.forEach(b => zip.file(b.name, b.blob)); zip.generateAsync({ type: 'blob' }).then(content => { const a = document.createElement('a'); a.href = URL.createObjectURL(content); a.download = 'converted-images.zip'; a.click(); }); }); } });

适用场景

图片批量改后缀名批量修改图片文件扩展名，统一格式为 JPG、PNG 或 WebP。它把繁琐的操作变成浏览器里的一步工具，无需安装软件、无需注册，打开网页即可使用，所有计算都在本地完成，文件不会离开你的设备。

适合谁使用

设计师、自媒体运营、电商卖家，以及任何经常需要处理截图、头像、商品图的普通用户。

进阶技巧

• 批量处理前先用统一规则命名，结果更容易区分
• 对画质要求高时避免过度压缩，保留细节
• 处理前后留意尺寸与比例，避免变形
• 多张图可先拼合或统一格式再一次性导出

常见问题

用图片批量改后缀名时，转换后排版会乱吗？

工具尽量保留原始排版、字体与图片，极少数复杂版式建议导出后核对一遍。

用图片批量改后缀名时，转换需要联网吗？

不需要。转换在浏览器本地完成，文件不上传。

用图片批量改后缀名时，能转成哪些格式？

常见格式互转均支持，具体以页面可选目标格式为准。

用图片批量改后缀名时，转换对大小有限制吗？

无固定限制，但文件越大越久，超大文件建议先拆分。