定位如何在 cloudinary 中的叠加图像上工作?

用户1865027

以下面的 url(image) 为例https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140 c_fill,x_220,y_140/yellow_tulip.jpg

据我了解,第一张图片yellow_tulip是在(0, 0)左上角绘制的第二个图像brown_sheep(220, 140),这是yellow_tulip因为(0, 0)从画布的左上角开始的右下角在此处输入图片说明

根据我的理解,一切都是有道理的,直到第三张图片出现。horses也从(220, 140)第二张图片的中心开始,但它怎么会从第二张图片的中心开始brown_sheep呢?我真的很困惑。

雷斯特劳斯

当您应用叠加更改时,图像的尺寸会发生变化,因此在应用 x 和 y 坐标时应考虑到这一点。

坐标是从图像的中心计算的,但由于第一张图像中画布的大小为 220 x 140,将棕色绵羊叠加层的坐标设置为 220 x 140 将使画布的大小翻倍至 440 x 280。

这意味着以下 URL 现在是 440 x 280 https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_1420,c /yellow_tulip.jpg

现在将马覆盖在棕色羊上,您需要重新计算以下尺寸 - https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill, x_220,y_140/l_horses,w_220,h_140,c_fill,x_110,y_70/yellow_tulip.jpg

https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill,x_ellow_30y/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在 cloudinary 中搜索图像?

上传 Cloudinary 后如何裁剪图像?

如何在React中实现Cloudinary Upload Widget?

如何在种子文件中的Cloudinary中使用Carrierwave

如何删除 Cloudinary Url 中的版本标签?

在cloudinary中获取两个图像,然后彼此叠加

从cloudinary网址下载图像

如何销毁图像Cloudinary Swift 3版本

如何在一个请求中从cloudinary接收带有标签的资源

如何在 Angular 中动态嵌入来自 Cloudinary 的第三方 javascript 小部件?

如何在Trumboyg中添加cloudinary参数来上传插件

如何使用Django解析图像URL并将其保存在Cloudinary中?

如何直接在cloudinary上上传图像而不将其存储到本地目录中?

我如何更新 cloudinary 图像 url 并保存到 nodejs 和 reactjs 的数据库中

如何遍历 cloudinary 查询的结果

从Rails中的Cloudinary捕获错误

如何无限制地从 Cloudinary API 获取所有图像或如何使用 next_cursor?

如何在图像叠加层中换行

如何在 CSS 中添加图像叠加

如何使用 Cloudinary/Angular(5) 和 Ionic(3) 作为签名请求上传图像?

如何使用Cloudinary将图像保存到特定文件夹?

如何将图像缓冲区转换为照片以上传到Cloudinary?

[]如何在Ruby中的类上工作

在 Outlook 中相互叠加图像(绝对定位)

如何从reactjs中的变量在cloudinary url中插入q_auto

如何在Angular中定位MatSnackBar模块?

如何在RAP中定位光标指针

如何在 jQuery 中定位 DOM 目标?

如何在jQuery中定位$(this)外