用途
image-ops 用于对已有图片做确定性的像素处理,它以 sharp 为基础,把 Photoshop 图像菜单中的常见操作改写成代码。它不生成新图,也不负责 HTML 排版;新增图片、带文案与真实 Logo 的品牌版式、动图 GIF、去背景等任务,各有其他工具或技能承接。
主要能力
它通过单一 CLI 执行操作,多个操作按命令行中从左到右的顺序依次应用。支持的操作包括:
- 缩放:
--resize 1200x630:cover,可指定宽、高或单维,fit 支持 cover、contain、fill、inside、outside。 - 裁剪区域:
--crop L,T,W,H。 - 旋转与翻转:
--rotate 90、--flip、--flop;--rotate 0可依据 EXIF 自动定向。 - 转换与压缩:
--to webp --quality 80,也可由输出扩展名决定格式。 - 调整:
--modulate 1.1,1.3,20(亮度、饱和度、色相)、--greyscale、--negate、--gamma 2.2。 - 锐化与模糊:
--sharpen [sigma]、--blur 6。 - 裁掉平坦边框:
--trim。 - 着色与双色调:
--tint --brand-color-sky。 - 丢弃透明度:
--flatten --brand-color-paper。 - 留白:
--extend 20,20,20,20:--brand-color-paper(上、右、下、左)。 - 叠加与水印:
--composite mark.png@40,40:over,可重复,混合模式含 over、multiply、screen、overlay 等。 - 其他 sharp 方法:
--pipe '[["clahe",{"width":3,"height":3}],["linear",1.2,-10]]',仅限允许列表中的方法。
颜色可用 #rrggbb,也可引用当前品牌包中的品牌色令牌(如 --brand-color-paper),从而在不复制十六进制值的情况下让着色或留白保持品牌一致。
使用方式
命令形式为:
IMG="node /workspace/skills/image-ops/scripts/img.mjs"
$IMG <input> <output> [ops...] # 输出 {"ok","output","format","width","height","bytes"}
$IMG <input> --info # 输出 {"format","width","height","channels","hasAlpha","space","pages","bytes"}
示例:
$IMG attachments/hero.png projects/<slug>/renders/hero.webp --resize 1200x627:cover --to webp --quality 82
$IMG projects/<slug>/photo.jpg projects/<slug>/renders/photo-marked.jpg \
--composite /workspace/brand/logos/mark.svg@1792,952
退出码含义:0 表示已写出;1 表示 sharp 用这些操作无法处理该输入,需读提示并修正操作;2 表示参数错误、文件或令牌缺失、或没有渲染工具链,应报告而不要盲目重试。
使用判断与限制
- 放大不增加细节,插值不会创造频率内容;需要“高清”或“更锐利”时,应改为用 HTML 或 SVG 重建作品,而不是放大尺寸。
- 不要为适配版式而重采样带细线连接的图;细线在任何重采样下都会发糊,应保持原始比例并用
--extend调整画布。 - 新比例应重新构图(stills 从 HTML 渲染各尺寸),而不是加黑边、留白或拉伸。留白只用于把原样作品放到更大画布上,并以墨迹包围盒居中,而非以画框居中;需先确认源图边缘列为单一平坦底色,渐变底色需逐行填充而非平坦留白。
- Logo 应取自品牌包(/workspace/brand/logos/,用法见 brand.toml),遵守最小宽度、清空区和底色配色;不得拉伸、改色或重建标识。
- 查看结果:
node /workspace/tools/review-thumb.mjs <output>看缩略图;像素级修正可对比放大裁剪图(visual-verify)。 - 合成顺序、透明度证明、亮度键控、品牌标识改色、整组照片调色及 sharp 的注意事项,见 references/alpha-and-compositing.md。
- 不适用:生成新图用 generate_image 工具(image-generation);带文案与真实 Logo 的品牌版式用 HTML still(stills);动图 GIF 用 gif-edit;照片或视频去背景用 hyperframes remove-background(见 media-use);仅 Photoshop 有的滤镜和 PSD 编辑不可用,应明确说明。