我为《上古卷轴4：湮没 重制版》制作图形模组。我下载量最高的模组“Lumiere”（意为“光”）在夜间的世界中添加了数百个光源，而展示光照模组实际效果的唯一诚实方式，是一个供人们拖动的“前后对比”滑块。此前大家常用的工具 imgsli 不久前已下线，因此我构建了自己的工具：imgi.co。结果发现，它的用途远远超出了我的模组页面范围，所以这里介绍一下它的功能以及构建方式。
功能介绍
- 通过鼠标、触摸或键盘拖动滑块，以水平或垂直方向对比两张图片。
- 每次对比都会生成一个永久性的可分享链接，并提供用于嵌入您自己的网站或模组页面的 iframe 代码。
- 将对比结果导出为 GIF、MP4 或 WebP 格式，以便在不支持嵌入滑块的场所使用。
- 在一个链接中最多对比十张图片。
- 提供私密链接，以及完全在浏览器中运行的离线模式。
这是一个实时示例，请随意拖动：https://imgi.co/c/9xqK9sS
在不破产的前提下提供无限的图片浏览服务
前后对比工具主要面临的是带宽问题。每个分享链接都意味着用户反复加载两张图片，且没有任何收入来源，而大多数云服务提供商会对出站流量收费，因此链接被分享得越多，您的成本就越高。这几乎肯定是此前那些免费工具倒闭的原因。
让 imgi 得以生存的关键决策是采用了 Cloudflare R2，它没有出站流量费用。只需存储一次图片，即可向整个互联网提供服务，您只需支付存储费用。再结合视觉无损的 AVIF 和 WebP 格式以保持文件小巧，即使一个链接获得数千次浏览，成本也仅为几美分。这就是免费层级能够保持免费的根本原因。
技术栈
- 基于 OpenNext 适配器，在 Cloudflare Workers 上运行 Next.js 15（应用路由器），使得页面能够在边缘节点渲染，并在全球范围内快速加载。
- 使用 R2 进行图片存储（如上所述，无出站流量费用）。
- 使用 Cloudflare 的 SQLite 数据库 D1 存储对比元数据和短链接。
- 滑块本身采用轻量级的客户端代码，无需沉重的库。
仅使用一家供应商，运行成本低廉，这对于一个本意是免费且不应因高昂带宽账单而倒闭的工具来说至关重要。
嵌入功能与一个内容清理技巧
嵌入功能是一个可以粘贴到任何地方的 iframe。这给博客带来了一个小难题：为了安全起见，博客渲染 Markdown 时禁用了原始 HTML，因此您无法直接将 iframe 粘贴到帖子中。我没有放宽内容清理器的限制，而是添加了一个微小的白名单短代码 ::imgi{id=...}，渲染器会在服务器端将其展开为嵌入代码。该 ID 会经过严格模式的验证，只能生成 imgi.co 的嵌入 URL，因此只需一行代码即可将实时滑块插入帖子，同时保持“禁止原始 HTML”的规则完整无误。
值得了解的 Cloudflare Workers 注意事项
Workers 的免费计划为每个请求提供 10 毫秒的 CPU 时间。这对于服务器端渲染来说绰绰有余，但它影响了下游的所有设计：您不能在保持请求打开的同时执行多次数据库往返操作，繁重的图片编码也不能放在请求路径上。imgi 将昂贵的 AVIF 编码任务卸载到后台工作程序，从而确保边缘节点保持快速并符合该预算限制。如果您要在 Workers 免费计划上构建任何实际应用，请从第一天起就围绕这 10 毫秒的限制进行设计，而不是事后才发现这个问题。
尝试使用
imgi.co 现已上线且免费。它不仅方便模组作者展示图形作品，也适用于人工智能放大、照片编辑或任何前后对比场景。请试用一下，并告诉我哪里出了问题。我特别希望收到关于对比和分享流程的反馈。
免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。
