ImagePro：集成 Pinata Cloud 简化 Figma 导出 🚀

这是提交给Pinata挑战的内容。

嘿，我是Jackson Kasi，大家好 🙂👋

我们的小分队 💪 🚀:

• @aswin_j 阿斯文，
• @somekiwiplease 沙瓦莉·苏莱什

我开发了 ImagePro ，这是一个为设计师设计的Figma插件，旨在帮助设计师更便捷地导出资产。它允许用户轻松地将图像导出为 PNG, JPG, WEBP, SVG ，或 PDF 格式，并提供比如以下高级选项：

• PDF的密码保护
• 灰度、RGB和CMYK的导出
• 合并多个PDF文件

但这还不仅如此！🎉 作为 Pinata Challenge 的一部分，我们将 Pinata Cloud 集成到 ImagePro 中来处理文件上传，让插件变得更加强大🚀，允许用户直接将导出的资产上传到 Pinata Cloud，以便安全、快速且轻松地管理这些资产。🛡️⚡

你可以在这里试试 ImagePro，

👉 ImagePro on Figma 试试看。

这里来个快速演示，看看它是怎么工作的：

1. 在 Figma 中选择任何图像或图层，然后通过插件获取。
2. 选择导出格式并自定义选项（如压缩和颜色模式等）。
3. 使用 Pinata Cloud 集成，您可以直接一键上传导出的文件。
4. 在 历史 部查看您的上传记录，您可以在那里：

• 下载文件

• 复制文件链接

• 如果不再需要的话，可以删除文件

看看这段快速演示视频：

我特别喜欢 Pinata 中的 optimizeImage 函数。对于 ImagePro 而言，这个功能特别有用，因为用户上传文件后，我需要在 历史 页面显示该文件的小缩略图。因为整个文件可能很大，为了避免传输，optimizeImage 函数能帮助我生成一个专门用于预览的小而优化的版本。

这不仅减少了数据传输量，还让用户操作更快捷，体验更流畅。它是一种让用户轻松找到文件并避免不必要的等待和加载时间的绝佳方式。这项功能真的帮我们大大简化了流程！

这是为该功能编写的代码：

    // ** 导入第三方库
    import { PinataSDK } from "pinata" ;

    // ** 导入配置
    import { env } from "../config/env" ;

    /**

* 初始化Pinata SDK实例
     */
    const pinata = new PinataSDK({
      pinataJwt: env.PINATA_JWT,
      pinataGateway: env.PINATA_GATEWAY,
    });

    /**

* 从Pinata获取优化图像

* @param cid 表示图像文件的内容标识符

* @param optimizeOptions 图像优化选项

* @returns 优化后的图像数据及其内容类型
     */
    export const getOptimizedImageFromPinata = async (
      cid: string,
      optimizeOptions: {
        width?: number;
        height?: number;
        format?: "auto" | "webp";
        quality?: number;
        fit?: "scaleDown" | "contain" | "cover" | "crop" | "pad";
        gravity?: "auto" | "side" | string;
      },
    ) => {
      const response = await pinata.gateways
        .get(cid)
        .optimizeImage(optimizeOptions);

      // 将数据转换成Buffer
      let dataBuffer: Buffer;

      if (typeof response.data === "string") {
        dataBuffer = Buffer.from(response.data, "binary");
      } else if (response.data instanceof Blob) {
        dataBuffer = Buffer.from(await response.data.arrayBuffer());
      } else if (Buffer.isBuffer(response.data)) {
        dataBuffer = response.data;
      } else {
        throw new Error("不支持的优化图像数据格式");
      }

      return {
        data: dataBuffer,
        contentType: response.contentType,
      };
    };

切换到全屏模式/退出全屏

尽管IPFS（星际文件系统）， ，具有很多优势，但我出于以下原因决定不将其整合进ImagePro：

1. 用户更喜欢集中式存储

大多数ImagePro用户都是设计师，他们更看重快速且可靠的文件访问。由内容分发网络（CDN）支持的集中存储服务（如Pinata Cloud），与IPFS相比，可以提供更快的响应时间和更稳定的性能。设计师通常需要即时访问他们的文件，而IPFS在某些网络条件下或节点较少时可能会比较慢。

2. 与Web3无关的应用场景

IPFS 在需要去中心化、不可篡改性和抗审查性的 Web3 环境中表现出色的地方在于，然而，ImagePro 主要专注于为使用 Figma 的设计师提供快速方便的导出功能，在这种情况下，去中心化的文件存储并不是核心需求。大多数用户在存储设计资产时并不需要 IPFS 的去中心化和不可篡改性。

3. 易用和文件处理

Pinata Cloud 提供了一个易于使用的集中平台来管理文件，用户可以上传文件、管理文件历史并快速访问资产。虽然 IPFS 功能强大，但它的设置和维护比较复杂，可能不适合一般设计师的日常操作。对于 ImagePro 的用户来说，简单性和高效是关键，而 Pinata 则提供了开箱即用的解决方案。

4. 性能方面的考虑

IPFS节点以对等方式运行，这意味着文件检索的速度会有所不同。对于ImagePro，速度和性能非常重要，尤其是在导出资产和面对客户项目时，使用像Pinata Cloud这样的集中式CDN支持方案可以更快更可靠地访问文件。

5. 不需要关注不可变性和版本管理

虽然不可变性是IPFS的一个主要优点，但对于ImagePro用户来说，并不是核心要求。设计师常常需要修改和更新他们的资产，而一个便于管理和替换文件的集中式存储方案在这种情况下更合适。

查看 ImagePro 的 GitHub 仓库页面：

👉 ImagePro on GitHub

如果你喜欢我建立的东西，别忘了给仓库 ⭐ 星标 。🙂

我编写代码时特别重视灵活性和可扩展性，这为插件开发提供了很好的起点。此外，其中还包括一些有助于简化你未来项目变更处理的概念。

Pinata Cloud在ImagePro中起着关键作用，通过简化文件的上传和管理。接下来是如何做到这一点的：

• 高效上传：用户导出图像或PDF后，可以立即将文件上传到Pinata Cloud。这避免了手动保存和本地存储文件的麻烦。
• 文件历史管理：Pinata存储所有上传的文件，并在历史部分中，用户可以轻松搜索、跟踪和管理文件。他们可以复制链接、下载或根据需要删除文件。
• 快速、可靠的访问：Pinata的CDN确保文件的快速和安全传输，非常适合需要可靠文件托管和共享的设计朋友。

通过利用Pinata，ImagePro 不仅提升了导出流程，还为设计师提供了一种无缝地存储、管理及检索他们素材的方式。