How to use Jimp composite in Javascript to layer images

Question

I'm trying to create in image generator where I can create all permutations of an image given different elements on 3 layers. I have managed to get the three folders into arrays and am trying to use Jimp to layer them on top of each other to create composite images. But I am failing to find the correct syntax to call the composite command in jimp.

const { jimpEvChange } = require('@jimp/core');
const { composite } = require('jimp');

CombineImagesFrom3Folders("Scenes/","Faces/","Features/");

function CombineImagesFrom3Folders(folder1, folder2, folder3) {
    var pngFiles1 = CreatePNGArrayFromFolder(folder1);
    var pngFiles2 = CreatePNGArrayFromFolder(folder2);
    var pngFiles3 = CreatePNGArrayFromFolder(folder3);
    DrawImagesOnTopOfEachOther(pngFiles1, pngFiles2,pngFiles3, "Combined/");
    
}

function CreatePNGArrayFromFolder(folder) {
    var pngFiles = [];
    var fs = require('fs');
    const newLocal = fs.readdirSync(folder);
    var files = newLocal;
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if (file.split(".").pop() == "png") {
            pngFiles.push(folder + "/" + file);
        }
    }
    return pngFiles;
}

function DrawImagesOnTopOfEachOther(pngs1, pngs2, pngs3, folder) {
    const jimp = require('jimp');
    var fs = require('fs');
    for (var i = 0; i < pngs1.length-1; i++) {
        for (var j = 0; j < pngs2.length-1; j++) {
            for(var k = 0; k < pngs3.length-1; k++){
                // compositing the images
                var image1 = jimp.read(pngs1[i]);
                var image2 = jimp.read(pngs2[j]);
                var image3 = jimp.read(pngs3[k]);
                image.composite(image1, image2, image3, (err, image) => {
                    if (err) throw err;
                    image.write(folder + "/" + i + j + k + ".png");
                }
                );
            }
        }
    }
}

I either get an error that "composite is not a function" or if I use "image.composite" then I get the error that "image is not defined", if I define the image as something I get "image.composite is not a function".

Hope someone can help. James.

score 0 · Accepted Answer · answered Jun 14 '22 at 09:36

It turns out the composite function didn't actually do what I had expected. What I needed to do was do the layers in pairs.

function DrawImagesOnTopOfEachOther(pngs1, pngs2, pngs3, folder) {
    var name = "";
    for (var i = 0; i < pngs1.length; i++) {
        for (var j = 0; j < pngs2.length; j++) {
            for(var k = 0; k < pngs3.length; k++){
                // loop through colors and colorize the images
                for (var l = 0; l < colors.length; l++) {
                    var color = colors[l];
                    var image1 = new jimp(pngs1[i]);
                    var image2 = new jimp(pngs2[j]);
                    var image3 = new jimp(pngs3[k]);
                    // compositing the images
                    name = (folder + i + j + k + l + ".png");
                    Draw (pngs1, pngs2, pngs3,i,j,k, name);
                    console.log("Image " + name + " created");
                }
            
            }
        }
    }
}

function Draw (pngs1, pngs2, pngs3,i,j,k, name) {
    jimp.read(pngs1[i])
    .then(image1 => {
        jimp.read(pngs2[j])
        .then(image2 => {
            jimp.read(pngs3[k])
            .then(image3 => {
                image1.composite(image2, 0, 0, {
                    mode: jimp.BLEND_SOURCE_OVER,
                    opacityDest: 1,
                    opacitySource: 1
                })
                image1.composite(image3, 0, 0, {
                    mode: jimp.BLEND_SOURCE_OVER,
                    opacityDest: 1,
                    opacitySource: 1
                })
                image1.write(name);
                console.log("Image " + name + " created");
            })
        })
    }) 
}

How to use Jimp composite in Javascript to layer images

1 Answers1