Using the Canvas API to Generate an NFT Collection With NodeJS | by Grace Lungu | May, 2022

A sneak peek on the NFTooze mission

An NFT assortment normally refers to a gaggle of NFTs generated from the identical set of particular person composable traits, reminiscent of an eye fixed, a nostril, and a mouth to make a face.

The easy logic to generate these photos is to make use of the Canvas API to attract every picture as a layer from again to entrance, export the canvas to a picture, clear, and repeat the identical course of with a special set of traits.

This implementation is taken from a small platform I constructed to generate NFT collections with corresponding metadata with no code known as NFTooze

Putting in and importing the packages

npm i canvas file-saver jszip

To have the ability to save the generated photos we have to set up two extra packages, file-saver to save lots of a single file and jszip to create a zipper folder for your entire assortment.

After putting in and importing the packages, we’ll create an Engine class that may maintain the completely different strategies essential for the gathering era.

The measurement variable represents the width and top of our Canvas, which must be the identical for every picture for use for composition.

Our class variables include sorts that we have to declare.

Every layer represents a single NFT which is made from a number of photos as you possibly can see within the definition above.

We want a constructor and different few strategies to instantiate or set our class variables.

After an NFT is drawn we have to clear the canvas utilizing the context’s technique clearRect:

Drawing the picture is likely one of the most vital steps, that’s achieved by loading a picture from its path, and drawing it to the canvas utilizing ctx.drawImage:

As soon as the picture is drawn to the canvas, it is able to be exported as a png. For this step, we’d like two strategies, generateNFT to attract all photos one after the other from the pictures array, and saveFileToZip so as to add every generated NFT to the gathering.

To avoid wasting the picture drawn on the canvas we are going to use the canvas.toBlob technique to get the blob to be handed to jszip , then name this.clearCanvas to free the canvas for a brand new drawing.

Lastly to export and obtain our zip file, to which now we have been including the pictures now we have to name the generateAsync technique from jszip

Producing layers

The above course of doesn’t present generate layers from a set of traits, as this may be achieved with a particular algorithm in thoughts. A primary strategy may very well be a cartesian product of all traits, which is able to lead to an array of arrays, every array being a novel set of traits making a single NFT.

Let’s add a technique to our class, that takes a set of layers and returns an array of layers with completely different distinctive combos.

Try the GitHub repository of the NFTooze mission to take a look at different parts of the code which are essential for producing an NFT assortment with a frontend utility.

More Posts