如何在Javascript中使用Jimp composite来图层图像

Question

我试图在图像生成器中创建，我可以在3层上创建给定不同元素的图像的所有排列。我已经设法将三个文件夹放入数组中，并试图使用Jimp将它们相互叠加以创建合成图像。但是我没有找到在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");
}
);
}
}
}
}

我要么得到一个错误，"复合不是一个函数";或者如果我使用image。composite"然后我得到"image is not defined"的错误，如果我将图像定义为某物，我得到"image.composite is not a function"。

希望有人能帮忙。詹姆斯。

Answer 1

结果证明复合函数实际上并没有完成我所期望的工作。我需要做的是成对地做这些图层。

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