index.js

const puppeteer = require('puppeteer');
const fs = require('fs');

const width = 4000;
const height = 4000;
const num = 1000;
const collectionName = "Hyperion";
const license = "CC BY-NC-ND 4.0"//or something else
const windowTraitsKey = '$traits' // in your application, 
const description = `<You NFT description here>`
const externalUrl = 'https://projectwebsite.com'

// project can be hosted here. for each token the token id is appended--
// http://localhost:8000?id= for query parameter based
// or http://localhost:8000/
const url = 'http://localhost:8000/'

const sleep = m => new Promise(r => setTimeout(r, m));


const saveFrame = async (data, filename) => {
    var mime = 'image/png';
    const ext = 'png';
    var encoding = 'base64';
    const prefix = 'data:' + mime + ';' + encoding + ','
    data.slice(prefix.length)
    var dataContent = data.slice(prefix.length)
    var buffer = Buffer.from(dataContent, 'base64');
    fs.writeFileSync('images/' + filename + '.' + ext, buffer);
    console.log("saved frame", filename);
}


const createMetadata = (traits, filename) => {
    const traitsArray = [];
    Object.keys(traits).forEach(key => {
        traitsArray.push({
            trait_type: key,
            value: traits[key]
        })
    });

    const metadata = {
        description,
        "name": collectionName + " #" + filename,
        "tokenID": filename.toString(),
        "image": `%IMAGE_URL%/${filename}.png`,
        "external_url": externalUrl,
        "collection_name": collectionName,
        "traits": traitsArray,
        "license": license
    }
    return JSON.stringify(metadata);
}

const saveMetadata = async (traits, filename) => {
    const data = createMetadata(traits, filename);
    const ext = 'json';

    var buffer = Buffer.from(data, "utf-8");

    fs.writeFileSync(`metadata/` + filename + '.' + ext, buffer);
}

const captureFrame = async (page, filename) => {

    let viewportOffset = 0;

    console.log("capturing frame", filename);
    const data = await page.evaluate(() => {
        return document.getElementsByTagName('canvas')[0].toDataURL();
    });

    console.log("got frame", filename);
    return data;
}
const captureTraits = async (page) => {
    return await page.evaluate(() => {
        return window[windowTraitsKey];
    });

}

const goto = async (browser, pageurl) => {
    const page = await browser.newPage();
    await page.setViewport({
        width: width,
        height: height,
        deviceScaleFactor: 1
    });
    await page.goto(pageurl, {
        waitUntil: ['domcontentloaded']
    });
    return page
}
const run = async () => {
    const browser = await puppeteer.launch({
        headless: false, slowMo: 0,
    });

    const localUrl = url

    for (let i = 1; i <= num; i++) {
        let fileid = i.toString();
        //http://localhost:8000/1/?d
        const pageurlQrCode = `${localUrl}${fileid}`

        console.log(pageurlQrCode);
        let page = await goto(browser, pageurlQrCode)
        await sleep(100)
        let filename = fileid
        let data = await captureFrame(page, filename)
        let traits = await captureTraits(page)
        await page.close()
        await saveFrame(data, filename)
        await saveMetadata(traits, filename)
    }

    await browser.close();
}

(async () => {
    try {
        await run()
    } catch (e) {
        console.error(e)
        process.exit(1);
    }
})();

package.json

{
  "name": "image-metadata-generator",
  "version": "1.0.0",
  "description": "",
  "main": "gen-images-generic.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "abigpotostew",
  "license": "MIT",
  "devDependencies": {
    "puppeteer": "^13.5.2"
  }
}