Node.js 批量绘制 NFT 的尝试

前言

目前 NFT 火热，如果要制作一千、一万个 NFT ，靠手绘估计不太可能，目前想的是可以用 Node.js 来代替批量绘制的工作。

实现思路

网上有很多脚本，是通过将分层的图片随机合并来实现的，但是如果要实现一些蒙版，或者程序随机的效果就比较局限了，因此想通过 Canvas 的形式来实现灵活绘制。

先来一个 Canvas

我这里选用 canvas 在 Node.js 环境使用画布：

const { createCanvas } = require('canvas')

const canvas = createCanvas();
const ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 500;

ctx.fillRect(0, 0, canvas.width, canvas.height);

这样就可以在初始化 Canvas 之后，使用 Canvas API 完成一些简单绘制了。

下载图片

绘制完成之后，需要把图片下载到本地：

const fs = require('fs')

const buffer = canvas.toBuffer('image/png');
const fileName = `./out/picture.png`;
fs.writeFileSync(fileName, buffer);

运行脚本

将文件命名为 index.js ，运行命令，就能看到图片下载好了：

$ node index.js

批量绘制

上述方法可以完成一张图片的绘制了，批量绘制只需要将上述方法封装，借助 for 循环就可以了：

const canvas = createCanvas();
const ctx = canvas.getContext('2d');

for(let index = 0; index < 1000; index++){
    draw(canvas, ctx, index);
}

function draw(canvas, ctx, index){
    canvas.width = 500;
    canvas.height = 500;

    ctx.fillStyle = `rgba(${randomNum()},${randomNum()},${randomNum()}, 1)`;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    const buffer = canvas.toBuffer('image/png');
    const fileName = `./out/picture_${index}.png`;
    fs.writeFileSync(fileName, buffer);
}

function randomNum(num=256){
    return Math.random() * num | 0;
}

自定义绘制

以上通过 Canvas ，就可以完成灵活绘制了，以下举几个例子：

图片绘制

const { loadImage } = require('canvas')

loadImage('./assets/bg.jpg').then((image) => {
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
})

蒙版

使用 Canvas API 中的 globalCompositeOperation 实现：

ctx.globalCompositeOperation = "source-over";

绘制动图

使用 gifencoder 绘制即可。

总结

灵活绘制的核心是 Canvas 的应用，结合 Canvas API 就可以实现程序随机绘图的优势了。