图片优化器由Pinata驱动：安全的文件存储结合实时定制-原创手记-慕课网

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

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

我建造的

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

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

德摩

示範連結：点击这里

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

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

（使用Pinata和React （Vite）的）图片优化工具

这是一个图像优化器，使用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.

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

查看 GitHub 页面

更多细节

我是怎么用Pinata的

固定文件到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}`,
         },
       });

进入全屏退出全屏

从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

预览原图和优化后的图

选择图像后，会立即使用本地的 URL.createObjectURL() 方法预览原始图像。一旦图像上传到 IPFS 并完成优化，将从 Pinata 网关预览带有选定变换的优化后版本。
1. 自定义 IPFS 网关
该应用允许开发人员通过环境变量（VITE_GATEWAY_URL）指定自定义的IPFS网关，这样可以使得应用程序根据需要使用私网网关或更快的网关。

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

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