Untitled

const nodeHtmlToImage = require('node-html-to-image');
const fs = require('fs');

let colorIcon = "cup_c.png",
    bwIcon = "cup_bw.png";

let red = "redsquare.png",
    blue = "bluesquare.png";

// 1032x336

function generateHtml(numStamps, amtStamped, colorIcon, bwIcon) {
    let numBottom = 0, numTop = 0, stampedTop = 0, stampedBottom = 0;

    if (numStamps > 5) { // Split into two rows if more than 5 stamps
        numTop = Math.ceil(numStamps/2);
        numBottom = numStamps - numTop;
        stampedTop = amtStamped > numTop ? numTop : amtStamped;
        stampedBottom = amtStamped > numTop ? amtStamped - numTop : 0;
    } else {
        numTop = numStamps;
        stampedTop = amtStamped;
    }

    let size, margins, rowSpacing = 0;

    if (!numBottom) {
        size = numStamps < 4 ? 300 : numStamps < 5 ? 232 : 180;
        margins = numStamps < 4 ? 22 : 13;
    } else {
        size = 160;
        rowSpacing = 16;
        margins = 23;
    }

    let bodyStyle = "body {" +
        "width: 1032px;" +
        "height: 336px; }";
    let iconStyle = ".icon {" +
        "width: " + size + "px;" +
        "height: " + size + "px;" +
        "margin-right:" + margins + "px; " +
        "margin-left:" + margins + "px;" +
        "background-position:center;" +
        "background-repeat: no-repeat;" +
        "background-size: cover;" +
        "display:inline-block;}";
    let color = ".color {" +
        "background-image: url('data:image/png;base64, " + toBase64(colorIcon) + "');}";
    let bw = ".bw {" +
        "background-image: url('data:image/png;base64, " + toBase64(bwIcon) + "');";

    let html = "<html><head><style>" +
    "* {padding: 0;margin: 0;}" +
    "#cont {width: 100%; height: 100%;}" +
    ".row {width: fit-content;margin: 0 auto;}" +
    bodyStyle +
    iconStyle +
    color +
    bw +
    "</style><body><div id='cont'>";

    html += "<div class='row' style='margin-bottom:" + rowSpacing + "px;'>";
    for (let i = 0; i < stampedTop; i++) {
        html += "<div class='icon color'></div>";
    }
    for (let j = 0; j < numTop - stampedTop; j++) {
        html += "<div class='icon bw'></div>";
    }
    html += "</div>";

    if (numBottom) {
        html += "<div class='row'>";
        for (let x = 0; x < stampedBottom; x++) {
            html += "<div class='icon color'></div>";
        }
        for (let y = 0; y < numBottom - stampedBottom; y++) {
            html += "<div class='icon bw'></div>";
        }
    }

    html += "</div></div></body></html>";

    //fs.writeFile('./output.html', html, () => {});

    return html;
}

function toBase64(url) {
    let bitmap = fs.readFileSync(url);
    return new Buffer(bitmap).toString('base64');
}

nodeHtmlToImage({
    output: './strip1.png',
    html: generateHtml(9, 6, colorIcon, bwIcon)
}).then(() => {
    console.log("image created.");
});

//console.log(generateHtml(3,3,2,'cup_c.png', 'cup_bw.png'));