如何轻松从云URL中提取公共ID-DEV365 开发者社区

在这篇文章中，我们将学习如何从云交付URL中提取公共ID并使用cloudinary-build-url软件包进行所需转换的新URL。

表中的内容

Table of Content
Pre-requisites
Understanding the Cloudinary delivery URL
Extracting the public ID and build the URL
Summary

先决条件

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

您需要让自己获得a FREE Cloudinary account并将图像上传到Cloudinary或您选择的任何数据存储。我们假设图像已经上传到此帖子的云。

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

了解云交付URL

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

其中：

cloud-name是您的云的云名称，您可以在仪表板或Cloudinary App的“设置”页面中找到。

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

为了使其更容易理解，我们查看以下示例：

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-指示图像存储在云中。如果图像来自外部源，则该值将为fetch。
w_100,h_100,c_thumb,r_max-尺寸为100x100像素的转换，作为缩略图，带有自动脸部检测，最大边框 - 拉迪乌斯以圆形形状。
v1-图像的版本
examples/avatar-图像的公共ID

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

但是，对于任何SDK和工具，我们仍然需要知道并传递图像的公共ID。不幸的是，Cloudinary并没有提供一种直接的方式来从控制台或其SDK中获取公共ID。

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

提取公共ID并构建URL

要从Cloudinary Delivery 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'
)

上面的代码将以字符串返回公共ID examples/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

就是这样！我们已经从云交付URL中成功提取了公共ID，并构建了带有所需转换的新URL。

概括

在这篇文章中，我们学会了如何从云交付URL中提取公共ID并使用cloudinary-build-url软件包进行所需转换的新URL。 Cloudinary是一个极好的工具，可以最少的努力来帮助我们在应用中处理图像需求。

下一步是什么？如何将其集成到您的应用程序中并查看其工作原理？

ð通过我的新书Learning Vue了解Vue。早期版本现在可以使用！

ð如果您想赶上我有时候，请在Twitter上关注我| Facebook | Threads。

喜欢这篇文章还是发现它有帮助？分享ðð¼ð