Mini Assets 生成器更新:增加居中剪裁机制

大家好,随着 Policr Mini 最近的更新,我们的验证资源制作工具 mini-assets-gen 也有了新的进展。现在用它制作的验证资源更具识别可靠性和一致性,为网格验证提供了更好的效果。

此前的设计

之前的版本中(实际只发布过一个版本),mini-assets-gen 通过指定统一的宽度(width 字段),让输出图片的宽度和指定的值一致,高度按原始比例保持自由。在网格验证诞生前,这个设计是没有问题的,因为 Telegram 的图片预览也有一定程度的尺寸自适应,用户几乎不需要看点击图片(看完整大图)就能完成验证。

新的问题

自网格验证诞生后,这种简单的设计造成了一些弊端。网格验证需要每个单元格(单个图片)保持一样的宽度和高度,合成的完整图片才具有最好的视觉效果。若图片的宽高都截然不同,网格验证也兼容了这种情况,它会缩放图片到指定的统一尺寸。

弊端很明显,部分尺寸差异太大的图片在横向或纵向上会被拉伸变形,影响视觉效果(不美观,识别困难)。有的图变形得甚至有些滑稽:)

居中剪裁机制

为了解决上面提到的问题,我们给 mini-assets-gen 增加了「居中剪裁」这一图像处理步骤。

首先图片会按照指定的宽高比例计算出保持该比例下最大的居中剪裁区域(新的宽高和居中坐标)。在进入第下一个步骤前,图片尺寸仍然是各式各样的,但是它们都具有相同的比例。例如 240x160180x120,宽高比都是 1.5。在后续图片缩放时,几乎不会被拉伸,因为在缩放前图片已经是指定的宽高比例了。我们只是在上一个步骤中将比例之外的部分“裁剪”掉了,保留的是可居中的最大区域。

一些例子

我们准备了一张图片,用于清晰的展示包含居中剪裁机制的优势。这并不是一个好的图片,可以看到它的主体内容太偏左了。

偏左足球图片

危险
更致命的是,此主体内容是一个圆形的物体,一颗足球。

我们将其用旧版本缩放,设定宽高是 240x160

240x160 宽度旧版本缩放足球

警告
足球已有轻度的如从左右方向挤压过一般的变形。

我们再次将其用旧版本缩放,设定宽高是 140x160

140x160 旧版本缩放足球

危险
此时变形十分夸张。若是“风景”可能还能看,但足球这种圆形物体被拉伸一点就很明显了。
信息
注意:旧版本在缩放图片时高度是按照比例决定的,输出图片并不存在拉伸。变形只发生于网格图片合成。

我们用添加居中剪裁机制的新版本,设定同样的严重失实的夸张宽高,看效果:

140x160 新版本缩放足球

可以看到足球被剪裁掉了左边的一部分,因为足球本就靠左。但是它的形状是真实的,没有变形。这就是居中剪裁后再缩放的效果。

提示
只要图片的主体内容没有太偏离中心,生成的图片就基本完美。

我们用一张更标准的图片举例,它是一张长明显大于宽的图片,且内容主体几乎在正中间:

自由女神像原图

本文不存在任何整治立场和表达,此处的「自由女神像」图片只是恰好符合我们的筛选特征。

我们仍然用夸张的失真的尺寸来缩放它:

正方形的自由女神像

有趣的是,我们将一张典型的长方形图片缩放成了正方形,但是图片内容并没有变形。图片主体人物的面部基本位于中心,图片类型(即雕像)特征仍然极为明显。这就是我们想要达到的效果,居中剪裁也确实做到了。

使用

居中剪裁机制在 0.2.0 版本发布。它有一个破坏性修改,清单文件 Manifest.yml 必须指定高度(height)字段。你只需要在清单文件中像这样加入即可:

---
version: 0.2.0
datetime: "2024-01-11T09:27:25Z"
width: 240
height: 160 # <- 加在这里
# 其余内容省略……

具体的宽高根据你收集的图片的实际情况来决定,最好是更为通用的比例。Policr Mini 官方公布的验证资源的宽高比是 1.5,也就是上述例子中的 240x160。在 Policr Mini 的部署中,配置的网格验证宽高值的比例也要与此处保持对应。

结语

mini-assets-genReleases 页面下载预编译的版本,或自行编译。需要注意的是当前版本不支持以 ImageMagick 作为后端,但会在后续版本中修复,不作另行通知。