裁剪是改善图像的关键技术。删除不必要的背景信息或更改图像的宽高比可以大大提高观看者对图像的关注度。 imgix提供了许多裁剪方法,包括人脸检测。本教程将重点介绍自动兴趣点裁剪 ( crop=entropy
) 以及如何使用它来裁剪图像最突出或重要的方面。特别是,高对比度区域被认为是最显着的。
假设我们要裁剪以下图像以从图像中移除大量静态黑色背景。
umbrella.jpg?w=640
第一步是设置w
和h
参数,以及fit=crop
模式。这将调整图像大小以填充选定的宽度和高度边界,然后裁剪任何多余的图像数据。
fit=crop
宽度:w=200
高度:h=200
适合:适合=作物
umbrella.jpg?w=200&h=200&fit=crop
imgix 的默认裁剪从图像的中心开始,删除给定参数之外的数据。然而,除了裁剪图像之外,我们还希望雨伞位于中心。为此,我们将crop=entropy
添加到查询字符串中,以便“中间”成为图像最突出的方面。雨伞与图像的其余部分形成强烈对比,因此成为焦点。
fit=crop&crop=entropy
作物:作物=熵
umbrella.jpg?w=200&h=200&fit=crop&crop=entropy
目标是去除大量静态黑色背景以集中在主题上。在这个例子中,图像的主题是红伞,添加crop=entropy
允许裁剪功能以它为中心。然而,图像的主体并不总是无生命的物体。
假设我们要调整大小并裁剪以下图像以模型为中心。
womanlandscape.jpg?w=640
该图像是使用三分法则拍摄的,可以在保持模型偏离中心的同时获得具有视觉吸引力的图像。但是,我们还想创建更小的图像片段,以便在网站的多个位置使用。
fit=crop
womanlandscape.jpg?w=200&h=200&fit=crop
由于裁剪功能侧重于图像的中心,而模型偏离了中心,因此她没有完全出现在片段中。我们可以使用面部检测裁剪功能将图像以她的脸为中心。
fit=crop&crop=faces
womanlandscape.jpg?w=200&h=200&fit=crop&crop=faces
人脸检测裁剪模式成功检测到她的脸,并将图像围绕着它居中。然而,我们也对她的服装感兴趣,而且它并不完全在画面中。模型的膝盖被部分隐藏,因此我们改为添加crop=entropy
,以便整个服装都包含在场景中。
fit=crop&crop=entropy
womanlandscape.jpg?w=200&h=200&fit=crop&crop=entropy
面部裁剪模式寻找面部并以它们为中心进行裁剪,而熵裁剪模式寻找高对比度区域并专注于这些区域。
fit=crop
fit=crop
在上图中,我们修改了图像以突出显示图像中的高对比度区域。修改后的版本展示了图像中的兴趣点——在本例中是火蜥蜴的头部。熵裁剪模式忽略了图像的静态颜色,而是专注于黑白相交的区域——蝾螈的鲜艳颜色与其背景形成了高对比度。
在下面的例子中,熵裁剪模式聚焦高对比度区域的能力使蝾螈作为图像的主体居中,无论纵向还是横向。假设您的图像以类似的方式具有高对比度区域,这使您能够通过使用crop=entropy
自动对图像进行艺术指导,以适应不同设计的许多不同尺寸和纵横比。
fit=crop&crop=entropy
也发布在这里。
要了解更多信息,请查看imgix 文档页面。