使用 Cloudinary 将获取的图像覆盖在自身上(通过转换)

Overlay a fetched image over itself (with transformations) with Cloudinary

我想生成一个具有相同提取图像的多个版本的图像,比如这个:

这是两个版本:

背景:https://res.cloudinary.com/nho/image/fetch/w_1024,h_512,c_thumb,g_auto,q_auto,f_auto/e_brightness:80/e_blur:3000/https://nicolas-hoizey.com/2016/08/a-bridge-not-so-far.jpg

叠加层:https://res.cloudinary.com/nho/image/fetch/w_1024,h_512,c_fit,q_auto,f_auto/https://nicolas-hoizey.com/2016/08/a-bridge-not-so-far.jpg

我不明白如何使用 overlays and for chained transformations 的文档来做到这一点。

Cloudinary 目前不支持使用获取的图像进行叠加。 如果事先知道这些图像的来源(例如 https://nicolas-hoizey.com),那么 automatic-upload 可能更可取。

然后,通过以下转换顺序实现预期效果: http://res.cloudinary.com/demo/image/upload/w_500/u_upload:2016:08:a-bridge-not-so-far,ar_2:1,c_scale,e_blur:2000,o_70,w_0.7,c_crop/h_1.0,fl_relative.layer_apply/2016/08/a-bridge-not-so-far.jpg

更新: Cloudinary 刚刚宣布了对叠加动态获取图像的新支持。这是通过将远程 URL 编码为 Base64 来完成的,例如(rails):

Base64.urlsafe_encode64("https://nicolas-hoizey.com/2016/08/a-bridge-not-so-far.jpg")
 => "aHR0cHM6Ly9uaWNvbGFzLWhvaXpleS5jb20vMjAxNi8wOC9hLWJyaWRnZS1ub3Qtc28tZmFyLmpwZw=="

然后转换 URL 将类似于: https://res.cloudinary.com/demo/image/fetch/w_500/u_fetch:aHR0cHM6Ly9uaWNvbGFzLWhvaXpleS5jb20vMjAxNi8wOC9hLWJyaWRnZS1ub3Qtc28tZmFyLmpwZw==,ar_2:1,c_scale,e_blur:2000,o_70,w_0.7,c_crop/h_1.0,fl_relative.layer_apply/https://nicolas-hoizey.com/2016/08/a-bridge-not-so-far.jpg