简体中文

图像和照片 · 社交图像调整器

长宽比数学:如何将任何照片裁剪为 1:1、4:5、9:16 或 16:9

· 工作原理

图像调整大小 纵横比 画布

一张宽源照片,包含四个不同形状的裁剪矩形
原始 ToolAcre 矢量图

裁剪为比例是算术:将照片的比例与目标比例进行比较,计算出必须缩小的尺寸,然后选择裁剪的位置。这篇文章给出了公式、一个可行的例子和舍入陷阱。

永远不合适的照片——为什么 3:2 的相机镜头不能变成正方形或 9:16 的故事而不丢失一些东西

6000×4000相机照片的比例为3:2:宽度是高度的一倍半。方形产品卡、4:5 的动态肖像和 9:16 的故事不具有这种形状。在不裁剪的情况下调整大小会扭曲主题或添加边框。裁剪对保留哪一部分做出编辑选择。保留原件并谨慎选择该部分,尤其是当标签、面孔或徽标靠近边缘时。

作为单个数字的比率 - 将宽度除以高度,因此 4:5 变为 0.8,16:9 变为约 1.78,并将源与目标进行比较

将宽高比表示为宽度除以高度。对于源,6000/4000 = 1.5;对于 4:5,则为 4/5 = 0.8; 16:9 约为 1.7778。比较这些数字可以立即告诉您相对于目标是否有多余的宽度或高度。该比率与请求的导出像素无关:800×1000 和 1600×2000 都是 4:5,但后者的像素数量是后者的四倍。

切割哪一侧 - 如果源比目标宽,则裁剪宽度;如果较高,则作物高度;新维度的公式

如果源宽度/源高度超过目标比例 r,则保留完整高度并设置裁剪宽度 = height × r;切割水平边。如果源较窄,则保留宽度并设置裁剪高度 = width/r;切割顶部和底部。这些公式选择适合现有图像而不拉伸的最大裁剪。 ToolAcre 计算一个覆盖框架,固定偏移量并调用drawImage将该图像映射到目标画布中;需要时,裁剪和调整大小会同时发生。

选择偏移量 — 居中裁剪与向主体移动,以切距距离的一部分表示

对于居中裁剪,将每侧移除的距离除以二。裁剪为 3200px 的 6000px 宽照片具有 2800px 多余宽度,因此 x=1400 将其居中。要保护左侧附近的主体,请使用较小的 x; x 必须保持在零和完整切除距离之间。将偏移量视为从 0(左/上)到 1(右/下)的分数有助于在多个导出尺寸中重复使用相同的框架理念。

工作示例:将一张 6000×4000 照片分为四种比例 — 1:1、4:5、9:16 和 16:9 的裁剪矩形,一步一步

从 6000×4000 开始,中心 1:1 裁剪在 x=1000 处为 4000×4000。 4:5 裁剪在 x=1400 处为 3200×4000。在 x=1875 处,9:16 裁剪大约为 2250×4000。 16:9 裁剪则使用整个 6000px 宽度并采用 3375px 高度,数学中心位于源 y=312.5。然后导出大小可以缩放每个裁剪的矩形。这些操作都不会导致内容丢失:新图像中不存在被排除的边。

舍入、小数偏移和整数大小的导出画布

导出画布具有整数像素尺寸,但drawImage可以将缩放的源定位在分数坐标处。在 16:9 示例中,排除了 625 个源行,理论上的中心起始位置为 y=312.5。仅剪切整个源行的工具必须选择 312 或 313; ToolAcre 而是将缩放的覆盖框架居中,并让画布对其部分边缘进行采样。导出画布具有选定的宽高比,但可能会插值边框像素。重复编辑已导出的图像会导致重采样或有损编码;从大师处开始每个放置。

这不包括什么——平台当前的像素尺寸会发生变化;检查平台自己的数字指导

该算术不会告诉您平台当前的像素尺寸、重叠控件的安全区域或首选压缩设置。这些要求的变化与比率无关。裁剪也无法恢复相机拍照时被剪掉的主体或增加低分辨率原件的细节。在生成数百个资源之前检查目的地的当前指导,然后检查每个导出的预览,而不是假设数学上正确的框架是一个好的构图。

要点:即使规格发生变化,算法也是固定的 - Social Image Resizer 会为您应用它,在浏览器中裁剪为所选的比例

即使社交媒体规范发生变化,比率也是固定的算术。 Social Image Resizer 在浏览器中执行裁剪和画布缩放,将源图像保留在本地。选择 1:1、4:5、9:16 或 16:9,将剪裁移向重要部分,并并排比较导出的内容:正确的计算会告诉您什么适合,而您则决定观众应该看到什么。