问题：小小的方图，往往需要好几个步骤
准备一张方形图片，通常不只是裁成正方形：主体需要放在合适的位置，空白处需要补白，导出后还可能超过体积限制。如果这些步骤分散在不同工具里，一次简单处理就会变得繁琐。
方形图片工坊把构图、合成与压缩放在一个 HTML 页面中。下载文件后直接打开，就可以在浏览器里完成处理，无需安装应用或启动后端服务。
先把画面放对，再交给工具导出
图中是构图关系示意，不是额外的产品截图。页面首图展示真实编辑界面，使用个人头像作为输入示例。
选择图片
支持 PNG、JPG、WebP 和 GIF 输入。导出格式固定为 JPG，因此透明区域会合成到白色背景上，GIF 也不会保留为动画输出。
调整位置和大小
在画布中拖动图片可以调整位置；拖动四角控制点或滚动鼠标滚轮可以缩放。图片保持原有比例，避免为了填满方框而被拉伸变形。画布之外的内容不会出现在最终的方形构图中。
处理并下载
确认构图后点击“处理并下载”。工具根据当前画布状态生成输出，再压缩 JPG。编辑阶段关注画面，导出阶段负责尺寸和编码，两者职责分开。
压缩不是只改一个 quality 参数
源码以 950000 字节作为体积预算，并结合编码质量和输出尺寸寻找结果：
- 从目标输出尺寸开始生成 JPG，先检查较高质量是否已经满足预算。
- 如果低质量结果可以满足预算，就在质量区间内搜索，尽量保留更高质量。
- 如果低质量仍然过大，就缩小输出尺寸，重新尝试。
- 到达最小尺寸时使用兜底结果结束处理，而不是无限重试。
这是一种“体积优先、尽量保留画质”的策略。复杂纹理与简单图形的压缩效果不同，因此不能承诺所有输入都有相同清晰度；最小尺寸兜底也不应被理解成绝对的体积保证。
为什么保留为离线单页工具
| 选择 | 适用价值 | 代价或边界 |
|---|---|---|
| 单个 HTML 文件 | 下载后直接使用，分发简单 | 更新时需要获取新文件 |
| Canvas 本地处理 | 不需要上传图片或等待服务器 | 受浏览器与设备资源限制 |
| 保持比例缩放 | 避免主体变形 | 构图需要手动调整 |
| 白底 JPG 输出 | 统一背景和交付格式 | 不保留透明度或动画 |
| 自动搜索压缩结果 | 减少手动反复试参数 | 可能降低画质或分辨率 |
一个合适的使用方式
先选择图片并确定主体位置，观察边缘是否被裁掉，再导出检查最终文件。如果原图包含细小文字、透明标识或需要保留动画，应先判断白底静态 JPG 是否适合这次交付。
图片处理在本地浏览器内完成，不上传服务器。源码与使用方式见 image-tool 仓库。