图片转 Base64 说明
使用教程
把图片拖进虚线区域，或用文件框选择。常见位图都可以，例如 PNG、JPEG、WebP、GIF、BMP，系统能识别的 SVG 也可以。选中之后，页面用浏览器自带的 FileReader 把整个文件读成 Data URL，字节留在当前标签页，不会发到服务器。读完后出现缩略图，高度和宽度都被限制，避免一张大图把整页撑满。文本框里默认是带前缀的 Data URL，形如 data:image/png;base64, 后面接编码。这种字符串可以直接当作 img 标签的 src，也可以写进 CSS 的 url()。
如果接口、配置或数据库字段只要编码本体，点「纯 Base64」。前缀和逗号会被去掉，只留下字母、数字、加号、斜杠，以及末尾可能出现的等号。两种结果随时切换，不必重新选文件，也不会重新压缩图片。点复制，把当前文本放进剪贴板。点下载，保存一个扩展名为 txt 的文件，文件名是随机 UUID，避免覆盖电脑里已有的同名文件。刷新或关闭标签页后，预览和文本都会消失，需要保留请先复制或下载。特别大的图会生成很长的字符串，若浏览器变卡，请先在别处缩小再来。
原理简述
Base64 把二进制按每 3 个字节一组切开。每组 24 位再拆成 4 个 6 位的索引，用 64 个可打印字符表示。原文件长度不是 3 的倍数时，用等号补齐，所以结果长度大约是原字节数的三分之四，再加上 Data URL 自己的前缀。Data URL 在编码前面写上 data:、媒体类型和 ;base64,。浏览器看到这个前缀，就知道后面是哪种图片，以及正文是 Base64 而不是普通文本。
本页不经过画布重绘，因此 GIF 的后续帧仍留在原始字节里。把 Data URL 当作 img 的地址时，多数浏览器仍会播放动画。若先画到画布再导出，动画通常只剩第一帧，那是格式转换那一页的路径，这里没有走。读取用的是 FileReader.readAsDataURL，在当前标签页的内存里完成。本站没有接收图片的接口。媒体类型来自文件本身，例如 image/jpeg 或 image/png。纯 Base64 模式只取第一个逗号之后的部分，方便贴到不接受 Data URL 的字段。
相关知识
很小的图标嵌进网页或邮件，可以少发一次请求，写法也简单。照片不适合这样做：编码后大约比原文件大三分之一，而且不能被浏览器单独缓存。样式或脚本里嵌一段很长的字符串，改一个像素就要重新下载整段。公开仓库、工单和聊天记录里不要粘贴含账号、证件或内部界面的截图编码，任何人都能把字符串解回原图。
本页处理的是文件字节，和文本 Base64 工具不是一回事。那边按 UTF-8 编解码文字。拿图片的 Data URL 去当中文解码，只会得到乱码。需要换格式或压质量时，先用图片格式转换，再回到本页编码。结果只存在于这一次打开的页面里，我们不提供历史记录。
常见问题
- 为什么结果比原文件还大？
- Base64 用 4 个字符表示 3 个字节，再加上 Data URL 前缀，体积一定变大。它换的是能放进文本这件事，不是压缩。要省空间请传原文件，或先转成更小的格式再编码。
- Data URL 和纯 Base64 该用哪一个？
- 要直接显示图片，用 Data URL。要交给只要编码字符串的接口、数据库字段或配置，用纯 Base64。两者来自同一次读取，切换不会重新压缩，也不会改像素。
- 图片会上传吗？动图还在吗？
- 不会上传。选择、拖入、读取、切换和下载都在当前浏览器里。GIF 按原始字节编码，帧没有被画布丢掉。离开页面后，我们这里不保留副本。