如何轻松地从Cloudinary URL中提取公共ID

先决条件

Cloudinary是一项端到端服务，提供图像和视频管理，例如存储、运行时操作和作为具有优化的CDN的快速交付。

您需要为自己获得一个免费的Cloudinary帐户，并将图像上传到Cloudinary或您选择的任何数据存储。我们假设此帖子的图像已经上传到Cloudinary。

我们准备进入下一节-了解Cloudinary URL的工作原理。

了解Cloudinary交付URL

在创建图像变体之前，让我们看看Cloudinary交付URL格式。

其中：

• cloud-name是您的Cloudinary的云名称，您可以在Cloudinary应用程序的仪表板或设置页面中找到。

• transformations-一串操作选项（无空间），用于基于Cloudinary标准生成所需的版本。
• version-来自Cloudinary的用于缓存目的的自动生成版本，
• path-to-image-或公共ID，存储在Cloudinary中的图像的唯一路径，或存储在外部来源（例如S3）中的图像的URL。

为了更容易理解，我们看看下面的示例：

https://res.cloudinary.com/example_cloud/image/upload/w_100,h_100,c_thumb,r_max/v1/examples/avatar.png

在上述URL中，我们有：

• example_cloud- 云名称
• image- 资源类型
• upload-表示图像存储在Cloudinary中。如果图像来自外部来源，则该值将被fetch。
• w_100,h_100,c_thumb,r_max-大小为100x100像素的转换，裁剪为带有自动人脸检测的缩略图，圆形的最大边框半径。
• v1-图像的版本
• examples/avatar-图像的公共ID

从这里，您可以直接修改URL，以使用可用的官方SDK和工具手动或编程方式获取所需的转换参数。

然而，对于任何SDK和工具，我们仍然需要知道并传递图像的公共ID。不幸的是，Cloudinary没有提供从控制台或其SDK获取公共ID的简单方法。

这就是我们接下来要做的事情。

提取公共ID并构建URL

要从Cloudinary交付URL中提取公共ID，我们将首先使用以下命令安装cloudinary-build-url包：

yarn add cloudinary-build-url

然后在我们的JavaScript文件useCloudinary.js中，我们可以从包中导入extractPublicId方法，并使用它来从URL中提取公共ID：

import { extractPublicId } from 'cloudinary-build-url'

const publicId = extractPublicId(
  'https://res.cloudinary.com/example_cloud/image/upload/w_100,h_100,c_thumb,r_max/v1/examples/avatar.png'
)

上述代码将以字符串形式返回公共IDexamples/avatar。然后，您可以将此公共ID从同一软件包传递给buildUrl方法，以构建具有所需转换的URL，例如500x500像素大小和灰度效果。

import { extractPublicId, buildUrl } from 'cloudinary-build-url'

const publicId = extractPublicId(
  'https://res.cloudinary.com/example_cloud/image/upload/w_100,h_100,c_thumb,r_max/v1/examples/avatar.png'
)

const url = buildUrl(publicId, {
  cloud: {
    cloudName: 'example_cloud',
  },  
  transformations: {
    resize: {
      type: 'scale',
      width: 500,
      height: 500,
    },
    effect: {
      name: 'grayscale',
    },
  },
})

上述函数将返回以下格式的URL，可供我们在应用程序中使用。

https://res.cloudinary.com/example_cloud/image/upload/w_500,h_500,c_scale,e_grayscale/examples/avatar

就是这样！我们已经成功地从Cloudinary交付URL中提取了公共ID，并使用所需的转换构建了一个新的URL。

标签：Cloudinary,JavaScript
来源：