图像转Base64转换器 - 将图像编码为Data URI
将图像编码为Base64 data URI,并复制为HTML img标签、CSS url()、Markdown或原始字符串。
将图片拖放到此处或点击上传
支持 JPG、PNG、GIF、WEBP、SVG
图像转Base64的作用
此工具将每个图像加载到浏览器画布上,然后使用FileReader的readAsDataURL方法读取原始文件。它返回一个以data:image/png;base64,为前缀的字符串,后跟二进制文件的Base64表示。该字符串可以直接放入HTML img标签或CSS url()中使用。
为什么需要将图像编码为Base64
Data URI将图像转换为文本,消除了单独文件和单独HTTP请求的需要。
直接在HTML或CSS中内联小图标
在单个自包含文件中传输图像
在JSON、YAML或数据库列中嵌入图像数据
报告错误或编写测试用例而不提交二进制文件
如何将图像转换为Base64
四个步骤,全部在本地——文件在浏览器中读取。
1
放入一个或多个图像
2
检查编码后的大小和额外开销
3
选择输出格式
4
复制到剪贴板或下载为.txt文件
常见问题
因为Base64是一种编码,而不是压缩器。它使用4个可打印ASCII字符表示3字节的二进制数据,因此输出总是比输入长约33%,加上数据URI前缀的几个字节。
当资源很小且始终需要时内联:图标、1x1间隔符、微小的背景纹理,大约10KB以下。低于此阈值,节省一个HTTP请求通常胜过33%的大小惩罚。对于大于10KB的资源或更改频率高于其所在页面的图像,不要内联。
通常不行。Gmail会直接从img标签中剥离data URI,Outlook的桌面客户端从未可靠地支持它们。Apple Mail和一些webmail客户端确实会渲染它们。可靠的方法是附上实际的图像文件。
可以,而且是无损的——解码后的字节与原始文件完全相同,包括EXIF和色彩配置文件数据。将完整的data URI粘贴到浏览器地址栏中,图像就会渲染。在代码中,标准的Base64解码函数将其转换回二进制。
不是。SVG已经是文本,因此Base64无缘无故增加了33%。直接将标记粘贴到HTML中,CSS可以样式化形状,JavaScript可以访问它们。对于CSS背景,使用不进行编码的url(data:image/svg+xml,...)。
HTML或CSS规范中没有限制,现代浏览器可以处理src属性中数兆字节的data URI。实际限制在别处:URL栏通常在2MB左右截断。浏览器有内存限制。
不需要。文件使用浏览器的FileReader API读取,该API在本地文件句柄上操作,结果字符串保留在页面内存中。没有任何内容通过网络发送,也没有服务器端存储。
所有浏览器都支持图像——img src和CSS url()中的data URI从IE8开始就已存在,今天普遍支持。剪贴板是较新的部分:navigator.clipboard需要安全上下文(HTTPS或localhost),这就是为什么此页面在新选项卡中打开结果。
更多图片工具
探索其他强大的图片编辑工具
压缩图片
减小文件大小
调整大小
更改尺寸
裁剪图片
裁剪区域
格式转换
转换格式
照片编辑器
编辑照片
旋转图片
旋转图片
镜像翻转
水平/垂直翻转
添加水印
添加水印
添加边框
为图片加边框
圆角裁剪
添加圆角效果
滤镜调整
亮度对比度等
模糊面部
隐藏面部
马赛克
局部打码
去除背景
去除背景
提升质量
AI 提升
添加文字
在图片上加字
图片拼接
拼接多张图片
HTML 转图片
网页转图片
GIF 转图片
提取序列帧
裁剪空白
移除空白边缘
批量重命名图片
安全地批量修改文件名
圆形裁剪
将图像裁剪为圆形
黑白
将图像转换为灰度
分割图像
将图像切割为网格
合并图像
将多张图像合并为一张
更改DPI
设置图像DPI元数据
图片转PDF
将多张图片合并成一个PDF
HEIC 转 JPG
将 iPhone 的 HEIC 照片转换为 JPG
EXIF 元数据移除器
查看并清除照片中隐藏的元数据,包括 GPS 位置信息
Favicon 生成器
全套图标加 HTML
色板
从图片中提取颜色
Base64转图片
把Base64解码还原成图片
HEIC转PNG
把iPhone的HEIC照片转成无损PNG
文字穿插图片
把文字放到照片主体背后,全程在浏览器中完成
取色器
获取任意像素的HEX、RGB和HSL值
签名制作
手写签名并下载为透明PNG
签名去背景
把纸上的墨迹变成透明背景
透明背景制作
把背景变成透明