Cách tiền xử lý phong phú Hình ảnh và Siêu dữ liệu IPFS NFT của bạn

Bước đầu tiên bạn sẽ làm để xây dựng một Dapp đúc NFT là chuẩn bị tác phẩm nghệ thuật. Nếu không có tác phẩm nghệ thuật, bạn không thể thực hiện dự án NFT của mình.

Một lý do khác để xử lý trước các tác phẩm nghệ thuật của bạn là để tạo siêu dữ liệu cho từng hình ảnh. Nếu không có siêu dữ liệu này, NFT của bạn không thể được bán ở bất kỳ thị trường thứ cấp lớn nào, chẳng hạn như Opensea.

Ví dụ: hình ảnh bên dưới là một NFT trong thị trường Opensea mang một số siêu dữ liệu cũng có thể được nhìn thấy bên dưới.

Thông tin trên bao gồm tác phẩm nghệ thuật, chi tiết và đặc điểm của nó có thể được nhìn thấy trên hình ảnh IPFS bên dưới.

Thiết lập phụ thuộc dự án

Mở thiết bị đầu cuối của bạn và điều hướng đến thư mục dự án của bạn hoặc tạo một thư mục dự án tại một vị trí cụ thể. Ví dụ: chạy **mkdir preprocessor** trên thiết bị đầu cuối sẽ tạo một thư mục có tên là “ prerocessor” trên vị trí đã chỉ định của bạn.

Tiếp theo, chạy các lệnh sau trên thiết bị đầu cuối.

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

Các lệnh trên sẽ cài đặt cả thư viện sharp và faker vào dự án của bạn. Thư viện faker sẽ giúp chúng tôi tạo ra thông tin ngẫu nhiên. Trong khi đó, thư viện sắc nét sẽ giúp chúng ta xử lý hình ảnh theo một kích thước, chất lượng và định dạng nhất định.

Tiếp theo, tạo một thư mục trong dự án của bạn có tên là arts và một thư mục khác được gọi là outputs . Trong thư mục "Arts", đặt tất cả các hình ảnh để xử lý bên trong nó.

Với các bước trên đã hoàn thành, hãy mở dự án trên “VS code”. Cấu trúc dự án sẽ giống như bên dưới.

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

Tuyệt vời, chúng ta hãy chuyển sang mã hóa công cụ chịu trách nhiệm xử lý hình ảnh.

Điều kiện tiên quyết

Bạn sẽ cần cài đặt phần sau trên máy tính của mình để hoàn thành hướng dẫn này.

• NodeJs
• Ứng dụng máy tính để bàn IPFS
• Mã VS

Mã hóa công cụ xử lý

Tạo một tệp ở gốc của dự án của bạn có tên **imagify.js** và dán mã sau

 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 = 'https://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++ } })

Các bước sau đây sẽ giúp bạn hiểu cách hoạt động của công cụ xử lý siêu dữ liệu này.

Nhập các thư viện thiết yếu

 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 đại diện cho hệ thống tệp, nó là một mô-đun có sẵn đi kèm với NodeJs. Nó có trách nhiệm quản lý các hoạt động đọc và ghi tệp trên máy của bạn.

Đường path là một mô-đun nút khác giúp bạn điều hướng qua các cấu trúc thư mục trên máy của bạn. Điều này sẽ là công cụ để xác định nơi hình ảnh của chúng tôi được lưu giữ.

Sharp là mô-đun chúng tôi sử dụng để xử lý hình ảnh, chẳng hạn như thay đổi kích thước và chuyển đổi thành một loại tệp khác.

Chúng tôi sẽ sử dụng faker để tạo ra một số ngẫu nhiên.

Cuối cùng, biến input chứa vị trí đặt ảnh được xử lý và output trỏ đến vị trí lưu ảnh đã xử lý.

Xác định các biến cần thiết

 let img_counter = 1 const imgSize = { width: 500, height: 500 } const desired_ext = '.webp' const base_url = 'https://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()), }

Các mã trên chứa các biến quan trọng sẽ được sử dụng trong quá trình tạo siêu dữ liệu của chúng tôi.

• **Image_counter** giúp chúng tôi đánh số hình ảnh nhất quán với lần lặp hiện tại.
• **ImgSize** xác định kích thước chiều rộng và chiều cao của mỗi hình ảnh sẽ được xử lý.
• **Desired_ext** nói về định dạng tệp mà bạn muốn hình ảnh đã xử lý của mình có.
• **Base_url** chỉ định vị trí lưu trữ hình ảnh trên IPFS.
• **Attributes** cung cấp thêm thông tin về siêu dữ liệu của mỗi hình ảnh.

Thực thi tác vụ đệ quy

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

Trong khối mã trên, chúng tôi đã sử dụng thư viện hệ thống tệp (fs) để lặp qua tất cả các hình ảnh trong vị trí **input** (các môn nghệ thuật). Và đối với mỗi hình ảnh, chúng tôi đảm bảo rằng công cụ của chúng tôi chỉ chọn hình ảnh từ danh sách các tiện ích mở rộng đã được phê duyệt.

Thực hiện nhiệm vụ siêu dữ liệu

 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, }, ], }

Trong khối mã ở trên, chúng tôi đã cung cấp các giá trị cho mỗi không gian siêu dữ liệu. Ví dụ: môi trường, vũ khí và tất cả các giá trị đặc điểm được cung cấp ngẫu nhiên và động.

Thực hiện Nhiệm vụ Chuyển đổi Hình ảnh

 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++

Trong đoạn mã ở trên, chúng tôi đã sử dụng lại mô-đun hệ thống tệp để định vị trước tiên từng tác phẩm nghệ thuật của chúng tôi và thay đổi kích thước nó thành kích thước được chỉ định của chúng tôi (500 x 500). Ngoài ra, chúng tôi đã cung cấp một tên mới phù hợp với lần lặp hiện tại và đặt cho nó phần mở rộng mong muốn của chúng tôi (webp).

Thay đổi kích thước và chuyển đổi hình ảnh thành webp đã tối ưu hóa đáng kể các tác phẩm nghệ thuật của chúng tôi lên một tầm cao đáng kinh ngạc.

Ví dụ: , nơi tôi đặt công cụ tiền xử lý hình ảnh này lên 99 hình ảnh với tổng kích thước là 111MB . Kích thước đã giảm xuống 62MB cho phần mở rộng .png và 4.5MB cho phần mở rộng .webp . Việc giảm kích thước khổng lồ đó tạo ra một bước nhảy vọt về thời gian tải của một trang web Minting được xây dựng bằng hình ảnh của tôi.

Cuối cùng từ khối mã ở trên, chúng tôi đã tạo siêu dữ liệu JSON cho mỗi hình ảnh được xử lý, mang cả tên giống hệt nhau và URL trỏ đến vị trí của hình ảnh. Siêu dữ liệu này là những gì chúng tôi sẽ triển khai cho IPFS sau khi xử lý hình ảnh.

Bây giờ, hãy chạy lệnh dưới đây để chuyển đổi hình ảnh của bạn. Hãy chắc chắn rằng bạn đang ở trong thư mục dự án của mình.

 node imagify.js

Tại thời điểm này, chúng ta đã hoàn tất với công cụ hình ảnh của mình, kết quả là thư mục đầu ra của chúng ta sẽ có cấu trúc tệp như sau.

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

Tải hình ảnh và siêu dữ liệu lên IPFS

IPFS là viết tắt của hệ thống tệp liên hành tinh, nó ngang hàng và phi tập trung. Không có cách nào dễ dàng để lấy ra dữ liệu được lưu trữ trên IPFS và do đó, nó là một ứng dụng ngang hàng gần như hoàn hảo để sử dụng cùng với các ứng dụng blockchain của bạn để lưu trữ nội dung phương tiện.

Để sử dụng theo cách dễ dàng và ít nhầm lẫn hơn, hãy truy cập trang cài đặt ứng dụng IPFS Desktop và làm theo hướng dẫn được chỉ định ở đó.

Sau khi cài đặt thành công, hãy mở ứng dụng IPFS và tải lên FIRST, và tôi lặp lại, ĐẦU TIÊN tải lên thư mục hình ảnh.

Một chuỗi CID (Nhận dạng nội dung) duy nhất sẽ được tạo như một phần của tên thư mục, hãy xem hình ảnh bên dưới.

Bây giờ, hãy sao chép CID của thư mục hình ảnh mà bạn có thể thấy từ hình trên và thay thế nó trong mã **imagify.js** của bạn. Xem mã bên dưới.

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

Bây giờ, hãy chạy lại **node imagify.js** để đưa vị trí chính xác của từng hình ảnh vào siêu dữ liệu JSON của bạn. Xem ví dụ về siêu dữ liệu JSON được tạo trước và sau khi thay thế CID.

Bạn có thể xem video này để hiểu cách tôi sử dụng những Hình ảnh và siêu dữ liệu này trong một Dự án đúc tiền NFT đầy đủ.

Trước khi thay thế CID

 { id: 97, name: 'Adulam NFT #97', description: 'AI Arts NFTs Collection, Mint and collect the hottest NFTs around.', price: 1, image: 'https://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: 1664478034024 }, { display_type: 'number', trait_type: 'generation', value: 1 } ] }

Sau khi thay thế CID

 { id: 97, name: 'Adulam NFT #97', description: 'AI Arts NFTs Collection, Mint and collect the hottest NFTs around.', price: 1, image: 'https://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: 1664478110287 }, { display_type: 'number', trait_type: 'generation', value: 1 } ] }

Cuối cùng, như thể hiện trong hình dưới đây, tải thư mục siêu dữ liệu lên IPFS cùng với thư mục hình ảnh.

Tuyệt vời, bây giờ hãy ghim nó trên web để cả thế giới cùng xem. Hiện tại, cả hai thư mục đều nằm trên nút IPFS cục bộ của bạn (Máy tính của bạn), để có thể truy cập được trên toàn thế giới, bạn cần sử dụng dịch vụ Ghim chẳng hạn như Pinata .

Ghim các thư mục của bạn vào IPFS

Đầu tiên, hãy truy cập trình quản lý pin Pinata và đăng ký nếu bạn chưa làm điều đó trước đây. Sau đó nhấp vào biểu tượng tài khoản và chọn Khóa API. Xem hình ảnh bên dưới.

Trên trang tạo khóa, nhấp vào tạo khóa mới và nhập tên cho khóa. Quan sát hình ảnh bên dưới.

Bây giờ sao chép khóa JWT trên khay nhớ tạm của bạn. Đây là những gì chúng tôi sẽ sử dụng để liên kết Máy tính để bàn IPFS với tài khoản Pinata của chúng tôi. Xem hình ảnh bên dưới.

Tiếp theo, mở ứng dụng máy tính để bàn IPFS của bạn, đi đến tab cài đặt và thêm dịch vụ mới, chọn Pinata và dán mã thông báo JWT của bạn vào không gian được cung cấp. Tham khảo hình ảnh bên dưới.

Điều cuối cùng cần làm là thực sự ghim các thư mục của bạn vào Pinata bằng cách sử dụng hướng dẫn bên dưới.

Đi tới tab tệp, nhấp vào đường ba chấm và chọn đặt ghim. Điều này sẽ bật lên trong hình ảnh bên dưới.

Chọn Pinata và áp dụng, bằng cách đó, thư mục hình ảnh của bạn sẽ có thể truy cập được trên toàn cầu.

Xác nhận khả năng tiếp cận hình ảnh toàn cầu

Truy cập trang web này, sao chép và dán CID của bạn vào trường đầu vào IPFS và nhấp vào nút bộ nhớ cache. Thao tác này sẽ quét toàn bộ tập hợp các cổng IPFS có sẵn công khai để tìm kiếm hình ảnh của bạn. Xem hình ảnh bên dưới.

Kết quả từ hình ảnh trên cho thấy rằng nhiều nút IPFS hiện có sẵn các bản sao của thư mục hình ảnh và có thể truy cập được trên toàn cầu ngay cả khi bạn đã xóa bản sao gốc trên nút cục bộ của mình.

Với các bước được vạch ra rõ ràng cho bạn, cũng Ghim thư mục siêu dữ liệu để hiển thị công khai chúng trực tuyến.

Bây giờ bạn có thể sử dụng bất kỳ liên kết nào trong hình ảnh ở trên làm URL cơ sở của bạn cho các mã thông báo ERC721 . Xem hình ảnh bên dưới.

Và bạn đã có nó, đó là cách chuẩn bị và tải lên các tác phẩm nghệ thuật của bạn trên IPFS.

Sự kết luận

Bạn sẽ luôn gặp phải nhu cầu hiểu cách xử lý trước và tải lên các tác phẩm nghệ thuật trên IPFS ở quy mô hàng loạt.

Khi bạn hiểu cách làm việc và xử lý hình ảnh sang IPFS, bạn có thể bắt đầu sử dụng nó trên các dự án web3 đặc biệt của mình.

Cho đến lần sau, hãy tiếp tục nghiền nát nó!

Xem cách sử dụng demo trực tiếp trên dự án NFT của tôi trên mạng thử nghiệm Goerli tại đây . Xem vị trí của Opensea tại đây . Bạn có thể xem phiên bản video trên Kênh YouTube của tôi.

Thông tin về các Tác giả

Tôi là một nhà phát triển blockchain toàn diện với hơn 6+ năm kinh nghiệm trong ngành phát triển phần mềm.

Bằng cách kết hợp Phát triển phần mềm, viết và giảng dạy, tôi trình bày cách xây dựng các ứng dụng phi tập trung trên các mạng blockchain tương thích với EVM.

Các ngăn xếp của tôi bao gồm JavaScript , React , Vue , Angular , Node , React Native , NextJs , Solidity , v.v.

Đăng ký kênh YouTube của tôi để tìm hiểu cách tạo ứng dụng Web3 từ đầu. Tôi cũng cung cấp các lớp học riêng và chuyên biệt cho những người nghiêm túc muốn học trực tiếp từ một người cố vấn.

Đặt các lớp học Web3 của bạn tại đây .

Bây giờ, hãy để tôi chỉ cho bạn cách thể hiện hình ảnh và siêu dữ liệu ở trên trong mã của bạn.