如何丰富地预处理您的 IPFS NFT 图像和元数据

建立 NFT 锻造加工 Dapp 的首要步是做好准备的美术品。没的美术品，您就是无法保持您的 NFT 新项目。

预净化处理音乐工艺美术品的另一个个的原因是为每次图相合成元参数资料。假如就没有此元参数资料，您的 NFT 将是无法在很多小型中级行业（比如 Opensea）上有售。

列举，右图是 Opensea 的市场中的 NFT，有点一系元统计数据，也也可能在下面看清楚。

分为艺品、细节点和表现在其中的出现的信息能否在下面的 IPFS 画面上看出 。

设置项目依赖项

打开您的终端并导航到您的项目目录或在特定位置创建一个项目文件夹。例如，在终端上运行**mkdir preprocessor**将在您指定的位置创建一个名为“ preprocessor”的文件夹。

反驳来，在终端机上操作下述运行命令。

 cd preprocessor npm init -y npm install sharp @faker.js/faker --save-dev

表面的ftp命令会在你的工程中配置和库。 faker 库将帮你们出现个数信息内容。而Sharp库将帮你们将图案进行处理连成一片定的长宽比、效果和版式。

接下来，在您的项目中创建一个名为arts的文件夹和另一个名为outputs的文件夹。在“艺术”文件夹中，将所有要处理的图像放入其中。

已完成综上所述部骤后，在“VS code”上开启产品。产品节构应以下几点图甲中。

 - preprocessor/ - arts/ - node_modules/ - outputs/ - package.json - package-lock.json

太下去，我能们马上程序编写全权负责治理图像文件的模块。

先决条件

您所需在换算飞机上的安装如下文章可以实现本技巧。

• 节点
• IPFS 桌面应用程序
• VS 代码

编码处理引擎

在项目的根目录下创建一个名为**imagify.js**的文件并粘贴以下代码

const fs = require('fs') const path = require('path') const sharp = require('sharp') const { faker } = require('@faker-js/faker') const input = './arts' const output = './outputs' let img_counter = 1 const imgSize = { width: 500, height: 500 } const desired_ext = '.webp' const base_url = '//ipfs.io/ipfs/REPLACE_WITH_IPFS_CID/' const attributes = { weapon: [ 'Stick', 'Knife', 'Blade', 'Clube', 'Ax', 'Sword', 'Spear', 'Gun', 'Craft', ], environment: [ 'Space', 'Sky', 'Desert', 'Forest', 'Grassland', 'Moiuntains', 'Oceans', 'Rainforest', ], rarity: Array.from(Array(10).keys()), } fs.readdirSync(input).forEach((file) => { const orginal_ext = path.extname(file) const orginal_file_name = path.basename(file).split('.')[0] if (['.jpg', '.jpeg', '.png', '.gif', '.webp'].includes(orginal_ext)) { const id = img_counter const metadata = { id, name: `Adulam NFT #${id}`, description: 'AI Arts NFTs Collection, Mint and collect the hottest NFTs around.', price: 1, image: base_url + id + desired_ext, demand: faker.random.numeric({ min: 10, max: 100 }), attributes: [ { trait_type: 'Environment', value: attributes.environment.sort(() => 0.5 - Math.random())[0], }, { trait_type: 'Weapon', value: attributes.weapon.sort(() => 0.5 - Math.random())[0], }, { trait_type: 'Rarity', value: attributes.rarity.sort(() => 0.5 - Math.random())[0], max_value: 10, }, { display_type: 'date', trait_type: 'Created', value: Date.now(), }, { display_type: 'number', trait_type: 'generation', value: 1, }, ], } if (fs.existsSync(`${input}/${orginal_file_name + orginal_ext}`)) { sharp(`${input}/${orginal_file_name + orginal_ext}`) .resize(imgSize.height, imgSize.width) .toFile(`${output}/images/${id + desired_ext}`, (err, info) => console.log(err), ) fs.writeFileSync(`${output}/metadata/${id}.json`, JSON.stringify(metadata), { encoding: 'utf-8', flag: 'w', }) } console.log(metadata) img_counter++ } })

下方法将让您了解到此元资料补救座舱的作业方式。

导入基本库

const fs = require('fs') const path = require('path') const sharp = require('sharp') const { faker } = require('@faker-js/faker') const input = './arts' const output = './outputs'

fs代表文件系统，它是 NodeJs 附带的内置模块。它负责管理您机器上的文件读写活动。

path是另一个节点模块，可帮助您浏览机器上的目录结构。这将有助于定位我们的图像保存位置。

Sharp 我们使用正确处理图相的模组，假如调低强弱和变换为不同的的压缩文件型。

他们将用 faker 来生产个个数数。

最后， input变量包含要处理的图像所在的位置， output指向将保存处理后的图像的位置。

定义基本变量

let img_counter = 1 const imgSize = { width: 500, height: 500 } const desired_ext = '.webp' const base_url = '//ipfs.io/ipfs/REPLACE_WITH_IPFS_CID/' const attributes = { weapon: [ 'Stick', 'Knife', 'Blade', 'Clube', 'Ax', 'Sword', 'Spear', 'Gun', 'Craft', ], environment: [ 'Space', 'Sky', 'Desert', 'Forest', 'Grassland', 'Moiuntains', 'Oceans', 'Rainforest', ], rarity: Array.from(Array(10).keys()), }

下列编码一般包括在导出元数据库环节中用到的关键性变量名。

• **Image_counter**帮助我们按照当前迭代对图像进行编号。
• **ImgSize**定义要处理的每个图像的宽度和高度的尺寸。
• **Desired_ext**表示您希望处理后的图像采用的文件格式。
• **Base_url**指定要在 IPFS 上存储图像的位置。
• **Attributes**包含有关每个图像元数据的更多信息。

执行递归任务

fs.readdirSync(input).forEach((file) => { if(['.jpg', '.jpeg', '.png', '.gif', '.webp'].includes(orginal_ext)) { // Images and metadata tasks are recursively performed here... } })

在上面的代码块中，我们使用文件系统库 (fs) 循环遍历**input**位置 (arts) 中的所有图像。对于每个图像，我们确保我们的引擎仅从已批准的扩展列表中选择图像。

执行元数据任务

const id = img_counter const metadata = { id, name: `Adulam NFT #${id}`, description: 'AI Arts NFTs Collection, Mint and collect the hottest NFTs around.', price: 1, image: base_url + id + desired_ext, demand: faker.random.numeric({ min: 10, max: 100 }), attributes: [ { trait_type: 'Environment', value: attributes.environment.sort(() => 0.5 - Math.random())[0], }, { trait_type: 'Weapon', value: attributes.weapon.sort(() => 0.5 - Math.random())[0], }, { trait_type: 'Rarity', value: attributes.rarity.sort(() => 0.5 - Math.random())[0], max_value: 10, }, { display_type: 'date', trait_type: 'Created', value: Date.now(), }, { display_type: 'number', trait_type: 'generation', value: 1, }, ], }

在上文的代碼块中，自己为所以元数据信息空间区域出具了值。如，环镜、巨剑和所以特征英文值有的是随机的动态数据出具的。

执行图像转换任务

if (fs.existsSync(`${input}/${orginal_file_name + orginal_ext}`)) { sharp(`${input}/${orginal_file_name + orginal_ext}`) .resize(imgSize.height, imgSize.width) .toFile(`${output}/images/${id + desired_ext}`, (err, info) => console.log(err), ) fs.writeFileSync(`${output}/metadata/${id}.json`, JSON.stringify(metadata), { encoding: 'utf-8', flag: 'w', }) } console.log(metadata) img_counter++

在里面的代碼精彩片段中，我国重新操作资料系统的模组来首选市场定位我国的每条幅的作品并将其改变为我国肯定的寸尺（500 x 500）。凡此种种，我国出示好几个个与现在迭代的同样的新明称，并成其出示了我国要想的扩容名 (webp)。

调整图像大小并将图像转换为webp极大地优化了我们的艺术作品，达到了惊人的高度。

例如，中，我让这个图像预处理引擎处理了99张图像，总大小为111MB 。 .png扩展名的大小下降到62MB ， .webp扩展名的大小下降到惊人的4.5MB 。如此巨大的尺寸缩减使得使用我的图像构建的 Minting 网站的加载时间有了很大的飞跃。

最后，从上面的代码块中，我们为每个处理的图像创建了JSON元数据，包含相同的名称和指向图像位置的 URL。此元数据是我们在处理图像后将部署到 IPFS 的内容。

现下，操作那么的运行命令来变为你的图片。事关您为于业务档案夹中。

 node imagify.js

方始，你们都都完整了你们都都的影像座舱，你们都都的工作输出系统根目录会享有以內系统相关文件构造用作成果。

 - output/ - images - 1.webp - 2.webp - ...... - metadata - 1.json - 2.json - ......

将图像和元数据上传到 IPFS

IPFS 代表英文大行星际文书整体，它是一对一和去中心的化的。未另一种方便的办法能否转化成存贮在 IPFS 上的数据分析，所以说，它是与区域链操作编译程序一同用作存贮电视媒体东西的近于精致的对等点。

要在使用单纯且不能相混淆的策略，请前，往 IPFS win7桌面进行操作步骤装配对话框并按这里同一个的讲解进行进行操作。

进行安装完成后，打开网页IPFS技术应用，先弄传，我另外一下，先弄传所有图片文件下载夹。

将提取一款一个的 CID（东西标志）空c语言字符串做文档文件目录种类的1部份，请参看下面。

现在，复制上图中可以看到的图像文件夹 CID，并将其替换到您的**imagify.js**代码中。请参阅下面的代码。

 const base_url = "//ipfs.io/ipfs/REPLACE_WITH_IPFS_CID/" //old string const base_url = "//ipfs.io/ipfs/QmY1zrFibpdHQ7qcqZqq7THsqTremZYepXNWR5Au3MF1ST/" //new string

现在，再次运行**node imagify.js**以将每个图像的准确位置包含到您的JSON元数据中。请参阅替换 CID 前后生成的 JSON 元数据的示例。

您能能查看此短视频以了解我如何才能在完整性的 NFT 锻造加工工作中用到以下图片和元数据统计。

更换 CID 之前

{ id: 97, name: 'Adulam NFT #97', description: 'AI Arts NFTs Collection, Mint and collect the hottest NFTs around.', price: 1, image: '//ipfs.io/ipfs/REPLACE_WITH_IPFS_CID/97.webp', demand: '4', attributes: [ { trait_type: 'Environment', value: 'Forest' }, { trait_type: 'Weapon', value: 'Craft' }, { trait_type: 'Rarity', value: 4, max_value: 10 }, { display_type: 'date', trait_type: 'Created', value: 24 }, { display_type: 'number', trait_type: 'generation', value: 1 } ] }

更换 CID 后

{ id: 97, name: 'Adulam NFT #97', description: 'AI Arts NFTs Collection, Mint and collect the hottest NFTs around.', price: 1, image: '//ipfs.io/ipfs/QmY1zrFibpdHQ7qcqZqq7THsqTremZYepXNWR5Au3MF1ST/97.webp', demand: '7', attributes: [ { trait_type: 'Environment', value: 'Moiuntains' }, { trait_type: 'Weapon', value: 'Clube' }, { trait_type: 'Rarity', value: 2, max_value: 10 }, { display_type: 'date', trait_type: 'Created', value: 87 }, { display_type: 'number', trait_type: 'generation', value: 1 } ] }

最后一步，有以下图下图，将元信息文档文件资料与画面文档文件资料一块儿发布到 IPFS。

太棒了，到现在令当我们将它调整在系统上，让各地上都能播到。当前，这一个文件名称夹都最靠近您的当地 IPFS 网络节点（您的计算机专业）上，要在欧洲比率内访问权限它，您都要采用 Pinning 服務，比如 。

将文件夹固定到 IPFS

首先，如果您以前没有这样做过，请前往并注册。然后单击帐户图标并选择 API 密钥。见下图。

在密匙創建手机网页上，单击創建新密匙并輸入密匙的命名。查看如图所示。

如今复制粘贴剪贴板上的 JWT 产品密钥。这即使小编大家将平常将小编大家的 IPFS 系统桌面与小编大家的 Pinata 账户微信链接下来的工艺。见图一为。

接下面来，点开您的 IPFS 电脑桌面采用程序流程，千万装置选项卡卡并修改新服务培训，挑选 Pinata 并将您的 JWT 令牌填充到提高的空间区域。请参考价值右图。

末尾要做的是适用下列这说明将您的根目录夹实计固定住到 Pinata。

造访文书页面制定卡，单击3点虚线，然而选用制定加固。这将在下图示跳出来。

考虑 Pinata 并软件应用，完成这么做，您的图面文件资料夹将可能优化点击。

确认全局图像可访问性

千万该网址，将您的 CID 复制剪切并剪切到 IPFS 导入字符中，但是单击缓存能力按键。这会扫码正个政府信息适用的 IPFS 网关集以关注您的图案。见如图。

上图的最终结果信息显示，虽然您删了了本地化子域上的原本主线任务，大部分 IPFS 子域如今的都具备可以且可当前造访的图案材料夹主线任务。

为您清除地给出此类布骤后，还是可以加固元的数据相关文件目录以使其迅雷在线发表可。

现在，您可以使用上图中的任何链接作为ERC721令牌的基本 URL。见下图。

想有它，这就算怎么样才能在 IPFS 上準備和上传视频你的的作品。

结论

您将始终保持所需理解怎么才能在 IPFS 上自定义预整理和发布艺术类品。

一经你明白了怎么样运作和进行处理形象到 IPFS，你就可不可以逐渐在你的特出 web3 楼盘中安全使用它。

等到下一回，持续破碎它！

在查看我在 Goerli 测试网上的 NFT 项目的现场演示使用情况。请查看 Opensea 的位置。您可以在我的 YouTube 频道上观看视频版本。

关于作者

我是一名全栈区块链开发人员，在软件开发行业拥有6+年以上的经验。

确认综合軟件建设、雅思写作和教育教学，我操作方法了要怎样在与 EVM 兼容的虚拟货币链网咯上创设去平台化应运步骤。

我的堆栈包括JavaScript 、 React 、 Vue 、 Angular 、 Node 、 React Native 、 NextJs 、 Solidity等等。

---

，了解如何从头开始构建 Web3 应用程序。我还为想要从导师那里一对一学习的认真的人提供私人和专业课程。

。

下面，我就向您显示应该怎么才能编号中表达所述图形和元参数。