javascriptimage-processingcompositejimp

How to use Jimp composite in Javascript to layer images


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.


Solution

  • 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");
                })
            })
        }) 
    }