Base64图片在线转换工具：纯前端、开源、安全高效（附完整代码实现）
在日常开发与设计中，我们经常需要在不同场景下使用Base64编码来处理图片。无论是为了减少HTTP请求在HTML/CSS中直接嵌入图片，还是在JSON中传输图片信息，一个安全、便捷且私密的转换工具都必不可少。
为此，吾爱IIS（52IIS.COM） 推出了一款完全开源的 Base64图片转换工具。该工具秉承了工具箱一贯的隐私优先、纯前端处理理念，所有转换操作均在您的浏览器本地完成，确保图片数据零泄露。作为开源项目，您可以在 GitHub 上查看其完整源代码。
✨ 核心功能与特点
- 双向转换，轻松便捷
- 图片 → Base64：上传图片文件，工具将自动将其转换为Base64编码字符串。您可以直接复制编码，并实时预览原图效果。
- Base64 → 图片：粘贴Base64编码字符串，工具能智能识别（无论是否带有
data:image/...;base64,前缀），即时转换为可预览的图片，并支持一键下载还原。
- 广泛格式支持与合理限制
- 支持格式：全面兼容常见的网页图片格式，包括 JPG、PNG、GIF、WebP、BMP。
- 文件大小：单次处理最大支持 10MB 的图片文件，足以满足绝大多数日常使用场景。
- 隐私安全，纯前端处理
- 与工具箱内所有工具一样，您的图片文件全程不会上传至任何服务器。所有编码与解码计算均在您当前的浏览器中完成，从根源上保障了图片内容的私密性。
- 开源透明，即开即用
- 代码完全开源，技术过程透明可信。界面简洁直观，无需安装任何软件，打开网页即可使用。
💻 完整Vue 3 + TypeScript代码实现
以下是该工具的核心代码实现，基于 Vue 3、TypeScript 和 Element Plus 组件库构建：
<script setup lang="ts"> import { ref, reactive } from 'vue' import { ElMessage } from 'element-plus' import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue' import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue' import { copy } from '@/utils/string' const info = reactive({ title: "Base64图片转换", }) const MAX_FILE_SIZE = 10 * 1024 * 1024 const ALLOWED_FORMATS = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp', 'image/bmp'] const uploadRef = ref() const fileList = ref() const imagePreviewUrl = ref('') const base64Result = ref('') const base64Input = ref('') const imageFromBase64 = ref('') const errorMsg = ref('') const activeTab = ref('imageToBase64') const handleFileChange = (uploadFile: any) => { const file = uploadFile.raw if (!file) return if (!ALLOWED_FORMATS.includes(file.type)) { ElMessage({ message: '不支持的文件格式，请上传图片文件', type: 'error', duration: 2000 }) return } if (file.size > MAX_FILE_SIZE) { ElMessage({ message: '文件大小超过限制（最大10MB）', type: 'error', duration: 2000 }) return } const reader = new FileReader() reader.onload = (e) => { const result = e.target?.result as string base64Result.value = result imagePreviewUrl.value = result errorMsg.value = '' } reader.onerror = () => { ElMessage({ message: '文件读取失败', type: 'error', duration: 2000 }) } reader.readAsDataURL(file) } const convertBase64ToImage = () => { errorMsg.value = '' imageFromBase64.value = '' const base64Str = base64Input.value.trim() if (!base64Str) { ElMessage({ message: '请输入Base64编码', type: 'warning', duration: 2000 }) return } try { if (base64Str.startsWith('data:image/')) { imageFromBase64.value = base64Str } else { const formattedBase64 = `data:image/png;base64,${base64Str}` imageFromBase64.value = formattedBase64 } } catch (error) { errorMsg.value = 'Base64编码格式错误，请检查输入' ElMessage({ message: 'Base64编码格式错误', type: 'error', duration: 2000 }) } } const copyBase64 = () => { if (!base64Result.value) { ElMessage({ message: '暂无Base64编码可复制', type: 'warning', duration: 2000 }) return } copy(base64Result.value) } const downloadImage = (dataUrl: string, filename: string = 'image.png') => { if (!dataUrl) { ElMessage({ message: '暂无图片可下载', type: 'warning', duration: 2000 }) return } try { const link = document.createElement('a') link.href = dataUrl link.download = filename document.body.appendChild(link) link.click() document.body.removeChild(link) ElMessage({ message: '下载成功', type: 'success', duration: 1500 }) } catch (error) { ElMessage({ message: '下载失败', type: 'error', duration: 2000 }) } } const downloadConvertedImage = () => { if (!imageFromBase64.value) { ElMessage({ message: '请先转换Base64编码', type: 'warning', duration: 2000 }) return } const mimeType = imageFromBase64.value.match(/^data:(image\/[a-zA-Z]+);base64,/)?.[1] || 'image/png' const ext = mimeType.split('/')[1] || 'png' const filename = `converted-image.${ext}` downloadImage(imageFromBase64.value, filename) } const clearImageToBase64 = () => { base64Result.value = '' imagePreviewUrl.value = '' errorMsg.value = '' if (uploadRef.value) { uploadRef.value.clearFiles() } } const clearBase64ToImage = () => { base64Input.value = '' imageFromBase64.value = '' errorMsg.value = '' } const handleExceed = () => { uploadRef.value?.clearFiles() ElMessage({ message: '只能上传一个文件，请先清除已上传的文件', type: 'warning', duration: 2000 }) } </script> <template> <div> <DetailHeader :title="info.title"></DetailHeader> <div> <el-tabs v-model="activeTab" type="border-card"> <el-tab-pane label="图片转Base64" name="imageToBase64"> <div> <div> <el-upload ref="uploadRef" v-model:file-list="fileList" accept="image/*" :auto-upload="false" :on-change="handleFileChange" :on-exceed="handleExceed" :limit="1" :show-file-list="true" > <el-button type="primary">选择图片文件</el-button> <template #tip> <div> 支持 JPG、PNG、GIF、WebP、BMP 格式，最大 10MB </div> </template> </el-upload> </div> <div v-if="imagePreviewUrl"> <div> <el-text>图片预览</el-text> <div> <img :src="imagePreviewUrl" alt="预览图片"> </div> </div> <div> <div> <el-text>Base64编码结果</el-text> <div> <el-button type="primary" size="small" @click="copyBase64">复制编码</el-button> <el-button type="danger" size="small" @click="clearImageToBase64">清空</el-button> </div> </div> <el-input v-model="base64Result" type="textarea" :rows="8" readonly placeholder="Base64编码将显示在这里" ></el-input> </div> </div> <div v-else> <el-empty :image-size="150" description="请上传图片文件"></el-empty> </div> </div> </el-tab-pane> <el-tab-pane label="Base64转图片" name="base64ToImage"> <div> <div> <el-text>输入Base64编码</el-text> <div> <el-input v-model="base64Input" type="textarea" :rows="8" placeholder="请输入Base64编码（支持带或不带 data:image/...;base64, 前缀）" ></el-input> </div> <div> <el-button type="primary" @click="convertBase64ToImage">转换为图片</el-button> <el-button type="danger" @click="clearBase64ToImage">清空</el-button> </div> </div> <div v-if="imageFromBase64"> <div> <div> <el-text>图片预览</el-text> <el-button type="success" size="small" @click="downloadConvertedImage">下载图片</el-button> </div> <div> <img :src="imageFromBase64" alt="转换后的图片"> </div> </div> </div> <div v-else> <el-empty :image-size="150" description="请输入Base64编码并点击转换"></el-empty> </div> </div> </el-tab-pane> </el-tabs> <div v-if="errorMsg"> <el-alert type="error" :title="errorMsg" show-icon :closable="true" @close="errorMsg = ''"></el-alert> </div> </div> <ToolDetail title="功能说明"> <el-text> <ul> <li><strong>图片转Base64：</strong>上传图片文件，自动转换为Base64编码字符串，支持复制和预览</li> <li><strong>Base64转图片：</strong>输入Base64编码字符串，转换为可预览的图片，支持下载</li> <li><strong>支持的格式：</strong>JPG、PNG、GIF、WebP、BMP</li> <li><strong>文件大小限制：</strong>最大支持10MB的图片文件</li> <li><strong>智能识别：</strong>自动识别带或不带 data:image/...;base64, 前缀的Base64编码</li> </ul> </el-text> </ToolDetail> <ToolDetail title="使用场景"> <el-text> <ul> <li>在HTML/CSS中直接嵌入图片，减少HTTP请求</li> <li>在JSON数据中传输图片信息</li> <li>在移动应用开发中存储和传输图片</li> <li>在邮件中嵌入图片</li> <li>在数据URI中使用图片</li> </ul> </el-text> </ToolDetail> </div> </template> <style scoped> .space-y-4 > * + * { margin-top: 1rem; } </style>📝 典型使用场景
- 前端开发优化：在CSS或HTML中直接嵌入小图标或背景图，减少页面HTTP请求数量，提升加载速度。
- 数据交换与存储：在JSON、XML等数据格式中安全传输图片数据，或存入localStorage等本地存储中。
- 移动与桌面应用：在应用开发中方便地处理和传递图片资源。
- 邮件嵌入图片：将图片编码后直接嵌入邮件正文，避免附件形式带来的查看不便。
- 数据URI生成：快速生成图片的数据URI，用于Canvas或各类API的调用。
🚀 如何使用（两步极简操作）
- 访问工具：打开 https://www.52iis.com/base64/。
- 按需转换：
- 图片转Base64：在左侧区域点击或拖拽上传图片，右侧即显示生成的编码和预览图，点击“复制”按钮即可。
- Base64转图片：在右侧输入框粘贴Base64字符串，左侧即显示还原的图片预览，点击“下载图片”即可保存。
💎 总结
这款 开源、纯前端的Base64图片转换工具，以极简的操作实现了图片与Base64编码间的双向无缝转换。它完美继承了「52IIS工具箱」对用户隐私的严格保护，将复杂的编码技术隐藏于简洁的界面之后，让你能更专注、更安全地处理图片数据。无论是开发者、设计师还是普通用户，都能在此获得高效、安心的使用体验。
