文件与Base64互转工具(支持data URI)
将图片、PDF等任意文件转换为Base64字符串或data URI,也可以将Base64字符串或data URI还原为文件并下载。所有转换均在浏览器内完成,文件不会上传到服务器。
什么是文件与Base64互转
Base64是一种编码方式,仅用A~Z、a~z、0~9、+、/这64种可打印字符来表示图片、PDF等任意二进制数据。当开发者需要把文件内容嵌入到只能安全处理文本的场景(例如JSON数据、CSS样式表或HTML代码)时,就会先把文件转换为Base64字符串。如果在编码字符串前加上MIME类型信息,形成data:image/png;base64,...的形式,就成为data URI,浏览器可以直接将其解析为图片,无需另外获取文件。
本工具同时支持两个方向:将任意文件转换为Base64字符串或data URI,以及将Base64字符串或data URI还原为原始文件并下载。所有转换均通过浏览器内的JavaScript(FileReader、Blob API)完成,文件内容绝不会发送到外部服务器。无论是想查看源代码中神秘Base64数据的实际内容,还是处理不希望上传的机密文件,都可以放心使用。
文件与Base64互转的使用方法
- 选择转换方向 根据需要选择“文件 → Base64”或“Base64 → 文件”模式。
- 提供文件或Base64文本 在“文件 → Base64”模式下拖放或选择文件;在“Base64 → 文件”模式下粘贴Base64字符串或data URI。
- 等待自动转换完成 选择或粘贴内容后,转换会立即在浏览器内完成。
- 确认检测到的MIME类型(Base64 → 文件时) 如果输入的不是完整data URI,会显示MIME类型选择栏,请选择与原文件匹配的类型。
- 复制结果或下载文件 复制编码后的字符串,或下载还原出的文件,完成整个流程。
用好本工具的小技巧
- 在“文件 → Base64”模式下可上传任意类型的文件(图片、PDF、音频等),并可分别复制data URI形式和普通Base64字符串。
- 在“Base64 → 文件”模式下,粘贴以
data:开头的完整data URI会自动识别MIME类型;如果只是普通的Base64字符串,请手动选择MIME类型。 - 所有转换处理都在浏览器内的JavaScript中完成,上传的文件或Base64字符串绝不会被发送到服务器,即使是机密文件也可放心使用。
- 如果想在CSS或HTML中嵌入小图标,可以直接将data URI形式的输出粘贴到
background-image: url(...)或<img>标签的src中。 - 由于Base64编码会使文件体积增大约33%,转换数十MB以上的大文件时浏览器可能会出现卡顿。
常见使用场景
在CSS中直接嵌入小图标
将图标转换为data URI,直接填入background-image属性,避免为小型资源额外发起HTTP请求。
在JSON格式的API请求中传输文件
将图片或附件编码为Base64字符串,作为普通字符串值放入JSON请求或响应正文中传输。
查看源代码中出现的Base64数据内容
将HTML或CSS源码中出现的陌生Base64字符串粘贴进来还原为文件,直接查看其真实内容。
在HTML邮件中内嵌图片
将徽标等图片进行Base64编码后直接嵌入HTML邮件正文,无需作为单独的附件发送。
术语表
- Base64
- 仅用A~Z、a~z、0~9、+、/这64种可打印ASCII字符表示二进制数据的编码方式。它不是加密,只是让任意字节能以文本形式安全传输的转换手段。
- data URI
- 将文件经Base64编码后的内容直接嵌入URL中的一种格式。由于同时携带MIME类型信息,可以直接作为图片来源或CSS背景使用。
- MIME类型
- 用于描述文件格式的标识符,以“大类/子类”形式表示,例如
image/png或application/pdf。浏览器据此判断如何处理该文件。 - 编码
- 将数据从一种表示形式转换为另一种表示形式的过程。Base64编码具体来说是把二进制数据转换为可打印的文本字符串。
- 客户端处理
- 完全在用户浏览器内处理数据,而不发送到服务器的方式。本工具的所有转换都在客户端完成,文件不会离开您的设备。
- 数据体积增加
- Base64编码导致数据体积比原文件增大约33%的现象。这是将8位二进制数据重新打包为6位字符所带来的、无法避免的特性。
常见问题
data:image/png;base64,iVBOR...。由于其中包含MIME类型信息,可以直接填入<img>标签的src属性或CSS的background-image中显示图片。data:开头的完整data URI格式,会显示MIME类型选择栏,请手动选择原始文件格式(图片、PDF、文本等)后再下载。
闲话 ― 为什么Base64会让文件体积增大33%
Base64编码诞生的背景,是电子邮件、JSON、URL等许多传输通道“只能安全处理可打印的ASCII字符”这一限制。如果将图片、可执行文件等任意二进制数据原样发送,可能会因混入控制字符而损坏,于是人们设计出仅用A~Z、a~z、0~9、+、/这64种可打印字符来表示二进制数据的Base64方式。
Base64会将3字节(24位)的二进制数据按每6位切分为4份,分别映射为4个Base64字符。由于要把以8位为单位的二进制数据重新塞进以6位为单位的字符中,编码后的数据量约为原来的4/3倍,也就是增大约33%。这是以文本形式安全传输所必须付出的代价。
这一特性的巧妙应用之一,就是在HTML、CSS中以data:image/png;base64,...的形式直接嵌入小图片的data URI。这样做可以避免为图标等小型资源额外发起HTTP请求,是加快页面加载速度的常用手段。不过由于体积增加约33%且无法利用浏览器缓存,并不适合用于嵌入较大的图片文件。