Generate NFT Collections With Node.js Using the Canvas API
A sneak peek at the NFTooze project
An NFT collection usually refers to a group of NFTs generated from the same set of individual composable traits, such as an eye, a nose, and a mouth to make a face.
The simple logic to generate these images is to use the Canvas API to draw each image as a layer from back to front, export the canvas to an image, clear, and repeat the same process with a different set of traits.
This implementation is taken from a small platform I built to generate NFT collections with corresponding metadata with no code called NFTooze
Installing and importing the packages
npm i canvas file-saver jszipTo be able to save the generated images we need to install two more packages, file-saver to save a single file and jszip to create a zip folder for the entire collection.
After installing and importing the packages, we’ll create an Engine class that will hold the different methods necessary for the collection generation.
The size variable represents the width and height of our Canvas, which should be the same for each image to be used for composition.
Our class variables contain types that we need to declare.
Each layer represents a single NFT which is made of multiple images as you can see in the definition above.
We need a constructor and other few methods to instantiate or set our class variables.
After an NFT is drawn we need to clear the canvas using the context’s method clearRect:
Drawing the image is one of the most important steps, that is achieved by loading an image from its path, and drawing it to the canvas using ctx.drawImage:
Once the image is drawn to the canvas, it is ready to be exported as a png. For this step, we need two methods, generateNFT to draw all images one by one from the images array, and saveFileToZip to add each generated NFT to the collection.
To save the image drawn on the canvas we will use the canvas.toBlob method to get the blob to be passed to jszip , then call this.clearCanvas to free the canvas for a new drawing.
Finally to export and download our zip file, to which we have been adding the images we have to call the generateAsync method from jszip
Generating layers
The above process does not show how to generate layers from a set of traits, as this can be done with a specific algorithm in mind. A basic approach could be a cartesian product of all traits, which will result in an array of arrays, each array being a unique set of traits making a single NFT.
Let’s add a method to our class, that takes a set of layers and returns an array of layers with different unique combinations.
What’s next?
Check out the GitHub repository of the NFTooze project to have a look at other portions of the code that are necessary for generating an NFT collection with a frontend application.
