工具箱 · MediaForge —— 把图片、音频和视频处理放进浏览器

MediaForge 是我最近做的一套浏览器媒体工具箱。

它解决的是一个很日常、但总让我觉得麻烦的问题：想把一张图片转成 AVIF，要打开一个网站；想抠图，又要换一个网站；剪一小段音频或视频，还要再找一个工具。文件在几个网站之间来回上传，步骤多，隐私也不太放心。

所以我把这些常用操作放到了一起。打开页面，拖入文件，处理完成后直接下载，不需要安装桌面软件，也不需要把文件交给第三方服务器。

它现在能做什么#

图片格式转换：JPEG、PNG、WebP、AVIF、JXL、GIF、TIFF、BMP 等；支持批量处理；
图片编辑：调整尺寸、裁剪、旋转、压缩、改透明度；
AI 抠图和去物体：适合头像、商品图和简单的背景清理；
OCR 文字识别：把图片里的文字提取出来；
音频和视频处理：转换、裁剪、提取音频、转 GIF 等；
本地优先：能在浏览器完成的工作尽量在本地完成，文件不会因为一次转换自动上传。

最简单的使用方式#

打开 MediaForge 媒体工作台；
在搜索框输入“AVIF”“抠图”“音频”等关键词，或者按分类进入工具；
拖入文件，调整需要的选项；
等待处理结束，点击下载。

我自己最常用的是「通用图片转换」和「AI 去背景」：前者用来整理博客图片，后者用来做头像、封面和临时素材。

几个容易误会的地方#

浏览器不预览，不代表转换失败#

BMP、TIFF、JXL 等格式不是每个浏览器都能直接显示。MediaForge 会保留转换后的文件，但结果区域可能只提示“请下载”，这时下载后用系统预览或图像软件打开即可。

AVIF 质量 100%#

部分浏览器 WASM 编码器在 AVIF 的 100% 无损模式下会报参数错误。现在工具会自动使用兼容的最高质量完成编码，避免因为一个滑块值导致整次转换失败，图片尺寸和正常显示效果不会被改变。

HEIC 输出#

当前部署使用的 ImageMagick WASM 构建没有 HEIC 写入编码器，所以输出列表暂时不提供 HEIC。HEIC 文件可以尝试作为输入读取，输出时建议选择 AVIF、WebP、PNG 或 JPEG。

我是怎么把它放进博客工具栏的#

Firefly 的顶部导航菜单由 src/config/navBarConfig.ts 管理。在“工具”菜单的 children 数组中加入一个外链即可：

1
{
2
  name: "MediaForge 媒体工具箱",
3
  url: "https://mediaforge-awb.pages.dev/media-studio",
4
  external: true,
5
  icon: "material-symbols:perm-media-rounded",
6
},

完整步骤如下：

打开博客仓库中的 src/config/navBarConfig.ts；
找到 name: "工具" 的导航项；
把上面的对象放进 children 数组；
如果你以后绑定了自己的域名，只需要把 url 换成自己的地址；
本地运行 pnpm dev 检查菜单，确认无误后提交并推送博客仓库。

这个配置只负责在博客顶部增加入口，不会把 MediaForge 的代码复制进博客。MediaForge 继续独立部署，博客只是提供一个更顺手的入口。

项目地址#

👉 访问：mediaforge-awb.pages.dev/media-studio
项目目前部署在 Cloudflare Pages，源码仓库暂时作为我的私有项目维护。

如果你也经常处理图片、音频或视频，欢迎把它当成一个随手打开的“浏览器工具抽屉”。它还在继续补功能，但我希望每个工具都足够简单：打开、拖进去、拿结果。

音乐

音乐