图片与 Base64 编码互转

图片与 Base64 互转完整指南

双面板工具：编码把本地图片转为 Base64/Data URL；解码把 Base64 或 Data URL 还原为图片。编码区支持拖拽 #dropZone 与文件选择 #fileInput，预览 #previewImg，信息 #imgInfo/#imgSize，输出 #encodeOutput 与字符计数 #charCount，可复制。格式按钮可在纯 Base64、Data URL、HTML/CSS 片段等之间切换（setFormat/updateOutput）。解码区粘贴到 #decodeInput，预览 #decodedImg，可下载还原图。处理在浏览器本地完成，适合前端内联小图标，不适合把巨大照片塞进代码仓库。

编码侧行为

• handleFile 读入图片，生成预览与 Base64 字符串缓存。
• 输出模式：纯 Base64 无前缀；Data URL 带 data:image/...;base64,。
• HTML/CSS 片段便于粘贴到 img src 或 background-image。
• 字符数用于评估体积膨胀（Base64 约增大 33%）。
• 非图片文件应被忽略或提示（以实现为准）。

解码与下载

1. 粘贴完整 Data URL 或纯 Base64（纯 Base64 时需可被浏览器识别的图像数据）。
2. 成功后右侧显示图片与信息，点下载保存文件。
3. 失败时检查是否缺前缀、是否被截断、是否实为其他编码。
4. 敏感截图解码后注意本地文件残留，用完删除。

何时该用 / 不该用

• 适合：几 KB 小图标、邮件内联、演示单文件 HTML。
• 不适合：数 MB 照片内联（阻塞 CSS/HTML、缓存差）。
• 大图请用对象存储 URL 或构建链图片优化，而非 Base64。
• 本页不做额外压缩；体积大请先用压缩/转格式工具。

常见问题

复制到 CSS 不显示？

确认使用 url("data:image/...") 形式且引号匹配，未截断字符串。

字符数暴涨正常吗？

正常，Base64 比二进制大约多三分之一，另加 Data URL 前缀。

会上传图片吗？

编码解码在本地；请仍避免在不信任设备处理机密图。

和 SVG 占位图区别？

占位图生成矢量示意；本页转换已有位图与 Base64 文本。

工程实践建议

构建工具链里优先 url-loader/asset modules 的阈值策略：小于某 KB 才内联。邮件 HTML 内联需注意客户端裁剪长度。把 Base64 提交进 Git 会使 diff 巨大，应用 LFS 或外链。解码来源不明的字符串前注意恶意内容风险，本工具不做病毒扫描。

格式按钮怎么选

贴进 JSON/配置多用纯 Base64；浏览器直接当图片地址用 Data URL；写演示 HTML 用 img 片段；写样式用 CSS background 片段。切换格式只改包装，不重新压缩像素。字符计数帮助判断是否超过文档/邮件限制。

性能与仓库卫生

大图先缩小再编码。避免把几百 KB Base64 提交进 Git 造成仓库膨胀。邮件客户端可能裁剪超长 CSS。解码区对错误字符串失败时不要反复尝试来源不明的巨大粘贴，以免卡顿。

隐私

截图含证件时，编码后字符串同样敏感，复制到聊天等于传原图。用完清输出。处理在本地，但不等于可以忽视终端安全。

本地数据与使用边界

本页结果与草稿主要保存在当前浏览器环境中，清除站点数据、更换设备或使用隐私模式可能导致内容丢失，重要清单、密文、任务与 WBS 请及时导出、复制或截图备份。公共电脑使用完毕后应清空页面上的敏感输入，避免姓名、口令、项目结构等留给下一位用户。工具用于提升个人与小团队效率，不替代组织内正式的项目管理、考勤人事、密钥托管或合规审计系统；请以公司制度与当地法规为准。