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