使用一行代码构建节日卡片拼贴

Source: Dev.to

在本文中，我将展示如何使用 Cloudinary 的转换魔法，仅用 一行代码 构建带有丝带页脚、背景以及五张经过样式处理（圆角、彩色边框）的照片的节日卡片拼贴。

你可以尝试实时演示 — 它会生成如下所示的卡片：

构建一个应用，任何应用

我一直在玩转 Astro 应用，而使用 Cursor 可以让脚手架搭建变得轻而易举。你可以让 AI（例如 ChatGPT）生成详细的提示词，然后让 Cursor 生成一个稳固的起始项目。我使用的完整提示词可在这里查看： 。

生成的应用可以让你：

• 将五张照片上传到 Cloudinary
• 按所需顺序重新排列它们
• 生成一个渲染完整节日卡片的单一 URL

添加一些额外功能并准备上传

我为应用调了颜色，使其更具冬季氛围，加入了飘雪、弹出精灵以及不断变化的节日信息、发光灯饰和糖果棒边框（取自一个实验）。

设置 Cloudinary 凭证

1. 创建 Cloudinary 账户（提供免费套餐） – 。

2. 从 Cloudinary 控制台获取 API 密钥（齿轮图标 → API Keys）。

   

3. 将密钥添加到本地 .env 文件（以及你的托管服务的环境变量中，例如 Netlify）：

   PUBLIC_CLOUDINARY_CLOUD_NAME=
   PUBLIC_CLOUDINARY_UPLOAD_PRESET=christmas-collage

4. 在 Cloudinary 仪表盘的 Uploads 区域创建一个名为 christmas-collage（或任意你喜欢的名称）的 未签名上传预设。

   

5. 在 Cloudinary 中设置文件夹：

   • collages – 用于存放生成的卡片
   • holiday-assets – 包含拼贴背景和丝带背景图像

   示例使用的背景图像：

   

   摄影作者：JESHOOTS.COM（来源于 Unsplash）。

观看 URL 构建器的工作过程

在上传五张家庭照片并进行排列后，应用会生成一个包含所有转换的单一 Cloudinary URL。该 URL 大致如下：

https://res.cloudinary.com/jen-demos/image/upload/w_1600,h_900,c_fill,q_auto,f_auto
/l_holiday-assets:jhi9cpio4ahxomhagwvs/c_fill,w_473,h_680,r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_50,y_50
/l_holiday-assets:d9njoekpa1zzzepy2y5d/c_fill,w_473,h_426,r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_563,y_50
/l_holiday-assets:nm9i3sjh6c3mkfj0ari1/c_fill,w_473,h_214,r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_563,y_516
/l_holiday-assets:rg0c1ul...

该 URL 编码了：

• 基础画布尺寸（w_1600,h_900）
• 背景图像（holiday-assets:jhi9cpio4ahxomhagwvs）
• 每张上传的照片的定位与样式（圆角、金色边框以及精确的偏移量）

最终得到的是一张可直接打印、照片质量的节日卡片，你可以数字化分享或送至打印店——相较于传统的照片卡服务，可能为你省下不少费用。

祝你仅用一行 Cloudinary 转换代码就能打造出自己的节日拼贴作品！