找回密码
 注册
搜索
热搜: 活动 交友
查看: 255|回复: 0

如何使用条件动态变换图像

[复制链接]

1

主题

0

回帖

5

积分

新手上路

积分
5
发表于 2023-9-18 12:53:43 | 显示全部楼层 |阅读模式
能够使用动态 URL 来自定义图像以适应您的网站或移动应用程序的图形设计,从而动态转换图像,这真是太棒了。但是,如果您想根据特定图像特征(例如其宽度或长宽比)或其内容它是否包含脸部来转换图像,该怎么办?您需要的是一种仅在满足特定条件时才对图像应用变换的方法。举例来说,您在页面上为用户上传的宽度和高度均为 200 像素的图像分配了空间。此外,如果图像包含脸部,您希望放大并聚焦于脸部本身,否则您希望将整个图像放入可用空间:


右箭头
包含脸部的图像以放大缩略图的形式提供

未检测到人脸的图像会尽可能大地传送

从上面的示例图像中可以看出,根据原始图像是否包含面部,对图像应用不同的变换。

如果您事先不知道用户(或编辑)上传的图像类型,那么确保您的网站看起来不错可能会很困难。图像的长宽比、尺寸和其他特征可能会有所不同,并且您网站的图形设计可能需要不同类型的图像具有不同的图像尺寸和效果。例如:

如果您需要将图像放置在 西班牙消费者手机号码列表 可用宽度大于高度的空间中,则如果您只是调整所有图像的大小以适合可用空间,则某些肖像图像可能看起来太小。您可能希望根据图像的长宽比应用不同的调整大小和裁剪。
如果原始图像非常小,您可能希望以不同于处理大于可用显示空间的图像的方式来处理它们。
如果图像中出现面部,您可能需要以不同的方式将图像转换为不存在面部的图像(例如,使用不同的艺术效果、不同的裁剪尺寸、添加叠加等)。



借助 Cloudinary,可以使用任何上传图像的动态交付 URL 即时转换图像。使用参数将条件及其关联的转换添加到 URL,if该参数接受详细说明要评估的条件的字符串值。您可以根据图像的宽度、高度、纵横比、图像中的面数(如果有)或存在的帧数(对于动画图像)或页面数(对于 PDF)应用转换。例如,判断图像的宽度是否大于500像素:if_w_gt_500. and可以通过用or运算符连接条件来评估多个条件or,并且在使用参数将条件评估为负的情况下可以应用不同的转换if_else。

以下示例重点介绍了条件转换的一些用例。有关可用选项的更全面的信息和详细信息,请参阅有关条件转换的文档。

示例 1:条件文本叠加复制此标题的链接
您已在页面上为用户上传的宽度和高度均为 300 像素的图像分配空间。如果需要裁剪原始图像以填充所需的空间(即宽度或高度大于 300 像素),您还需要添加一个带有免责声明的文本叠加层“此图像已被裁剪以适合”:
示例 2:有条件模糊背景复制此标题的链接
如果您在页面上为宽度为 500px 的图像分配空间,则可以有条件地为宽度小于 500px 的图像添加模糊背景:

如果原始小于 500 像素,则添加模糊底衬

示例 3:根据检测到的人脸进行条件叠加放置复制此标题的链接
golden_star如果您想在图像中所有检测到的面孔上添加图像叠加层。如果没有检测到人脸,那么您需要将覆盖层放置在右下角:

检测到的脸部 - 覆盖层放置在检测到的脸部上:

未检测到面部 - 覆盖层放置在右下角:

示例 4:基于纵横比的条件裁剪复制此标题的链接
如果您想要包含尽可能多的图像,则如何裁剪和交付图像可能取决于原始图像是横向还是纵向格式。

您需要登录后才可以回帖 登录 | 注册

本版积分规则

手机版|小黒屋|Quetzal Audio

GMT+9, 2025-2-22 05:29 , Processed in 0.364810 second(s), 19 queries .

Powered by Discuz! X3.5

Copyright © 2001-2025 Tencent Cloud.

快速回复 返回顶部 返回列表