先决条件
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 来源：
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。