在 Cloudinary 中将两个图像链接在一起的方法

Posted 2023-03-25

【中文标题】在 Cloudinary 中将两个图像链接在一起的方法

【英文标题】：Way to link two images together in Cloudinary

【发布时间】：2016-09-11 20:26:06

【问题描述】：

我正在尝试找出一种将两张图片链接在一起的理想方式。我有数百张带有标签 images 的图片，但有一些图片有 before 和 after 图片我想并排显示。

我只是不确定如何在 Cloudinary 上的 JSON 列表中或使用 Angularjs 控制器将具有 before 和 after 的图像链接在一起。

示例

  "public_id": "Images 2/A/LUND",
  "version":1463185535,
  "format":"jpg",
  "width":1299,
  "height":1732,
  "type":"upload",
  "created_at":"2016-05-14T00:25:35Z",
  "context":
    "custom":
      "alt":"Remodeling Stairs",
      "name":"Lund Before",
      "title":"Full Staircase Remodel"
    
  
,

  "public_id": "Images 2/A/LUND",
  "version":1463185535,
  "format":"jpg",
  "width":1299,
  "height":1732,
  "type":"upload",
  "created_at":"2016-05-14T00:25:35Z",
  "context":
    "custom":
      "alt":"Remodeling Stairs",
      "name":"Lund After",
      "title":"Full Staircase Remodel"
    
  
,

我正在使用 Angularjs ng-repeat 来显示 after 图片，但我有一个 ng-click() 来显示模式。在模态中，我想显示 before 和 after 图片。

如何尝试将前图与后图链接或绑定？这可以通过 Cloudinary 标记来完成吗？或者在角度控制器中执行此操作的方法？

【参考方案1】：

您可以叠加“之后”图像并在“之前”图像结束时将其偏移以开始。例如：

http://res.cloudinary.com/<your_cloud_name>/image/upload/l_Images 2:A:LUND,x_1299/Images 2/A/LUND.jpg

我相信以下应该可行：

<link rel="shortcut icon" cl-href="Images 2/A/LUND" overlay="Images 2/A/LUND" x="1299" />

以下是将多张图片合并为一张的更多示例： http://cloudinary.com/cookbook/generate_your_photo_collage_online

【讨论】：

问题是我有几百张照片。这可能只适用于几张照片，但就我而言，这不是一个可行的选择。

我不确定我是否理解。您是否有数百张图片希望全部合并为一张巨型图片，或者您是否有数百张图片希望每对（之前和之后）合并为一张图片？

我有数百张耦合图像（之前和之后），我想通过在元数据中添加 before 标记和其他图像 URL 来解决问题。这样它就在 json 中的同一个图像中。但打开一个更好的选择