返回工具

使用说明

完整介绍工具的所有功能,帮助你快速上手。

1输入方式

工具支持两种输入模式,通过顶部 Tab 切换:

  • 上传图片:点击上传区选择文件,或将图片直接拖拽到页面任意位置,支持同时选择多张(最多 10 张)。
  • 粘贴截图:在「上传图片」Tab 下,按 Ctrl+V(Mac 为 Cmd+V)可直接粘贴剪贴板中的截图,无需先保存为文件。
  • 粘贴代码:切换到「粘贴代码」Tab,将 SVG 源码或已有的 SVG Data URL 粘贴到文本框,工具会自动识别并处理。
提示:上传图片与粘贴代码是互斥模式,切换 Tab 时会自动清空另一侧的内容。

2参数设置

上传图片后,参数区会根据文件类型自动显示对应的可调项:

最大宽度

适用于 JPG / BMP / PNG。图片宽度超过此值时等比缩小,不超过则保持原尺寸。默认 1200px。

压缩质量

适用于 JPG / BMP(BMP 会压缩为 JPEG 输出)。范围 10%–100%,值越低体积越小但画质下降。默认 85%。

双引号模式

仅适用于 SVG。将输出结果中的单引号替换为双引号,适配对引号格式有要求的框架或模板场景。

注意:PNG 是无损格式,压缩质量参数对 PNG 无效,因此上传纯 PNG 文件时不会显示质量滑块,只有最大宽度可调。GIF / WebP / AVIF / ICO 不经 Canvas 处理,直接读取原始文件,无参数可调。

3输出格式

转换完成后可选择三种输出格式,点击对应格式标签切换,再点击「复制」:

纯 Base64

完整的 Data URL,格式为 data:image/png;base64,...,可直接用于 src、url() 等属性。

CSS

输出 background-image: url("..."); 格式,复制后可直接粘贴到 CSS / WXSS 样式文件使用。

HTML

输出 <img src="..." /> 格式,复制后可直接粘贴到 HTML 模板或邮件代码中。

SVG 文件转换后仅显示一种输出格式(SVG Data URL),因为 SVG 有独立的处理逻辑,不经 Canvas 压缩。

4批量转换

一次上传多张图片后,点击「转换」会处理所有文件,结果以折叠列表展示,每条记录可单独展开查看和复制。

  • 每张图片的结果区域顶部显示文件名、格式 badge 和转换后的大小。
  • 默认展开第一张结果,其余折叠,点击标题行可展开/收起。
  • 参数(最大宽度、压缩质量)对本次上传的所有图片统一生效。
  • 批量转换时,GIF / WebP / AVIF / ICO 等不可压缩格式直接读取,不受最大宽度参数影响。

5转换历史

每次成功转换后,工具会自动将文件和配置保存到浏览器本地的 IndexedDB,关闭页面后仍可查看。

  • 同一个文件(按文件名 + 大小去重)最多记录 3 条最近的转换配置,相同配置不重复记录。
  • 每条历史卡片显示原始文件的缩略图、文件名、格式、大小以及转换时的参数标签。
  • 点击参数标签(如「85% · 1200px」)可一键还原当时的参数并立即重新转换,无需重新上传文件。
  • 历史记录存储在当前浏览器,不跨设备,不同浏览器之间的历史相互独立。
提示:历史记录直接存储原始 File 对象,不受文件大小限制,大图和手机拍摄的照片均可正常保存。

6支持格式

格式 处理方式 可调参数
JPG Canvas 压缩后输出 最大宽度、压缩质量
PNG Canvas 缩放后输出(无损) 最大宽度
SVG 直接读取,不经 Canvas 双引号模式
GIF 直接读取原始文件 无
WebP 直接读取原始文件 无
AVIF 直接读取原始文件 无
BMP Canvas 压缩,输出为 JPEG 最大宽度、压缩质量
ICO 直接读取原始文件 无