图片优化器由Pinata驱动：安全的文件存储结合实时定制

这是提交给【Pinata 挑战】的作品

注：此处注释已被删除，以确保直接反映原文内容。

我开发了一个图像优化器的web应用，它使用Pinata进行基于IPFS的去中心化文件存储。此应用程序允许用户上传图片，自定义优化设置，例如宽度、高度、格式（WebP、JPEG、PNG）以及质量，然后用户可以通过Pinata的网关直接从IPFS获取优化后的版本。

该应用程序提供了一个直观的用户界面，用于上传图像，预览上传的原图和优化后的版本，并获取优化后图像在分布式网络上存储的可分享的链接。它利用Pinata提供的强大IPFS文件固定服务，确保上传的图像安全保存，并可以从任何IPFS节点全球访问，无论从何处。

示範連結：点击这里

GitHub上的项目链接：chintanonweb / pinata-image-optimizer 这是一个chintanonweb项目中的pinata-image-optimizer工具。

请注意，源文本和初始翻译为空，因此没有具体的翻译部分需要处理。请提供源文本和初始翻译以供分析。

这是一个图像优化器，使用React构建（采用Vite作为构建工具），并集成了Pinata，通过IPFS实现去中心化的图像上传和检索。应用程序允许用户上传图片，自定义尺寸、质量和格式，然后通过Pinata的IPFS网关优化并获取图片。

• 用Pinata把图片上传到IPFS。
• 调整图片的尺寸、质量和格式（比如WebP、JPEG、PNG）。
• 预览原图和优化后的版本。
• 从Pinata的IPFS网关获取优化后的图片链接。

• 前端框架：React 结合 TypeScript
• 构建工具：Vite
• 存储方案：Pinata（基于 IPFS）

按照以下步骤本地运行项目：

前提条件:

请确保你已经安装了以下项目：

• Node.js
• Pinata账号（获取API密钥）

1. 复制代码库

克隆GitHub仓库并进入目录

    git clone https://github.com/chintanonweb/pinata-image-optimizer.git
    cd image-optimizer-pinata

进入全屏模式 退出全屏模式

2. 安装依赖项

运行这个命令来安装npm包：npm install

全屏，退出

3.

<TRANSLATION>
en: ...
zh: ...
</TRANSLATION>

Please provide the actual source text, initial translation, and expert suggestions for me to edit the translation accordingly.

查看 GitHub 页面

我是怎么用Pinata的

1. 固定文件到IPFS

• 应用使用Pinata的文件上传API (pinFileToIPFS) 将图片固定到IPFS网络。用户可以从本地系统选择任何图片，应用会无缝上传图片到Pinata，生成一个指向固定图片的IPFS哈希。这确保了图片的去中心化存储，可以从全球任何IPFS节点访问。

• 文件上传过程利用Pinata的JWT基础的身份验证，确保只有经过授权的用户才能使用自己的Pinata凭证上传文件。

       const response = await fetch('https://api.pinata.cloud/pinning/pinFileToIPFS', {
         method: 'POST',
         body: formData,
         headers: {
           'Authorization': `Bearer ${import.meta.env.VITE_PINATA_JWT}`,
         },
       });

进入全屏 退出全屏

1. 从IPFS检索图片

• 一旦图片上传后，应用会使用Pinata的IPFS网关（https://gateway.pinata.cloud）构建一个可以检索的URL。用户可以自定义图片优化参数（宽度、高度、质量和格式），并将这些参数添加到Pinata网关URL中，以动态获取优化后的图片版本。

  例如，该应用生成一个带有通过查询参数应用的图片变换的自定义链接。

https://gateway.pinata.cloud/ipfs/<IPFS_HASH>?img-width=400&img-height=400&img-quality=80&img-format=webp

1. 预览原图和优化后的图

• 选择图像后，会立即使用本地的 URL.createObjectURL() 方法预览原始图像。一旦图像上传到 IPFS 并完成优化，将从 Pinata 网关预览带有选定变换的优化后版本。

  1. 自定义 IPFS 网关
• 该应用允许开发人员通过环境变量（VITE_GATEWAY_URL）指定自定义的IPFS网关，这样可以使得应用程序根据需要使用私网网关或更快的网关。

zh: * （此处省略了部分内容）

此项目展示了Pinata的IPFS的集成在去中心化的文件管理和处理中的其强大和灵活性，包括文件上传、存储以及优化的检索。