动态添加和转换多个图像叠加

mukti574

前端开发人员可能希望将多个图像组合成单个图像。例如，在创建水印并将其添加到库存照片时、添加形状或徽章、准备打印内容（例如，在 T 恤或杯子上放置徽标）添加标题等。

可以通过将多个图像叠加在另一个之上来组合多个图像。然而，由于底层图像和叠加图像并不一定相互匹配，更不用说您的图形设计，您可能需要执行进一步的图像转换（例如调整大小、裁剪、更改颜色、创建更好的配合）。这就是 Cloudinary 的用武之地。

Cloudinary 的图像叠加功能可以帮助用户轻松组合多个图像。它支持使用动态转换 URL 的图像和文本覆盖。在这篇博文中，我们将向您展示如何单独转换、处理和转换底层图像和覆盖图像，然后动态生成可嵌入到您的网站中的结果图像。

变换图像叠加复制此标题的链接
假设您有一个销售个性化礼物 西班牙消费者手机号码列表 的网站。用户可以上传自己的照片、添加文本，您的网站会自动裁剪和转换这些照片和文本以赠送他们选择的礼物。例如，一对夫妇可能想将他们的照片放在咖啡杯上。这需要您调整咖啡杯的底层图像和情侣的叠加图片的大小和变换，直到它们和谐地组合在一起。将图像放置到位后，您可以添加文本并根据需要执行进一步的转换。

下面是情侣和咖啡杯的原始图像的示例，这些图像已上传到云端以供进一步转换和交付。



overlay您可以使用 Cloudinary 的参数（或lURL）添加图像叠加层。回到我们的例子，下面是咖啡杯的最终版本与这对夫妇的叠加图片的样子：

转换指令用于使用动态 URL 执行图像转换。Cloudinary 的客户端库有助于构建这些 URL。/您可以应用多个链式转换，方法是在图像 URL 中用斜杠分隔它们。

为了更好地转换图像叠加，您可以将参数设置flags为layer_apply（或fl_layer_apply对于 URL），然后该参数告诉 Cloudinary 在该标志之前指定的所有链式转换将应用于叠加图像而不是包含图像。

使用我们的咖啡杯示例，您可以在下面看到我们如何在包含图像和叠加层上应用多种变换。包含的图像已被裁剪以填充 400×250 的矩形，并且情侣的叠加图像已使用人脸检测进行裁剪。色彩饱和度提高了 50%，并应用了晕影效果。最后，生成的图像已调整为 100 像素宽，转换为圆形，并定位为距包含图像的中心偏移 20 像素。

变换多个图像叠加复制此标题的链接
除了能够转换单个图像叠加层之外，Cloudinary 还允许您添加和转换多个叠加层。您可以通过链接另一个叠加层、将flags参数设置为layer_apply（或fl_layer_apply对于 URL）并应用多个图像转换来实现此目的。添加另一个叠加层就像转换图片以适应现有的底层图像和叠加图像一样简单。在我们的咖啡杯示例中，我们添加了一个气球作为附加叠加层，并执行了以下转换：将大小调整为 30 像素宽，将色调级别更改为粉红色，并将其旋转 5 度。