JavaScript中如何正确使用Jimp composite实现多层图像合成

• jimp.read()是异步接口，返回Promise对象，原代码未等待图片加载完成就执行后续逻辑，根本拿不到可操作的图片实例。
• Jimp的composite是挂载在图片实例上的方法，不是npm包顶层导出的独立函数，原代码直接解构导入composite的写法本身拿不到对应方法，触发composite is not a function报错。
• 原代码调用image.composite前从未定义过image变量，触发未定义错误；手动创建的普通对象没有绑定Jimp的实例方法，同样会报方法不存在。
• 三层循环的终止条件写为length-1，会漏掉每个文件夹下的最后一张PNG素材。
• composite单次调用仅支持叠加一张图片，不能一次性传入多个图片对象，需要从最底层素材开始逐层向上叠加。

const jimp = require('jimp');
const fs = require('fs');
const path = require('path');

// 提前创建输出文件夹，不存在则自动新建
const outputDir = "Combined/";
if (!fs.existsSync(outputDir)) {
    fs.mkdirSync(outputDir, { recursive: true });
}

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

async function CombineImagesFrom3Folders(folder1, folder2, folder3) {
    const pngFiles1 = CreatePNGArrayFromFolder(folder1);
    const pngFiles2 = CreatePNGArrayFromFolder(folder2);
    const pngFiles3 = CreatePNGArrayFromFolder(folder3);
    await DrawImagesOnTopOfEachOther(pngFiles1, pngFiles2, pngFiles3, outputDir);
    console.log("所有图片合成完成");
}

function CreatePNGArrayFromFolder(folder) {
    const pngFiles = [];
    const files = fs.readdirSync(folder);
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        if (file.split(".").pop().toLowerCase() === "png") {
            pngFiles.push(path.join(folder, file));
        }
    }
    return pngFiles;
}

async function DrawImagesOnTopOfEachOther(pngs1, pngs2, pngs3, folder) {
    // 修正循环条件，去掉多余的-1，避免漏掉最后一张素材
    for (let i = 0; i < pngs1.length; i++) {
        for (let j = 0; j < pngs2.length; j++) {
            for(let k = 0; k < pngs3.length; k++){
                try {
                    // 等待所有素材读取完成，拿到可操作的Jimp实例
                    const baseImg = await jimp.read(pngs1[i]); // 最底层场景图
                    const faceImg = await jimp.read(pngs2[j]); // 中间层脸部素材
                    const featureImg = await jimp.read(pngs3[k]); // 最上层特征素材

                    // 逐层叠加，composite参数为(待叠加图片实例, x轴偏移, y轴偏移)
                    baseImg.composite(faceImg, 0, 0);
                    baseImg.composite(featureImg, 0, 0);

                    // 保存合成图，文件名加下划线避免索引拼接重名
                    await baseImg.writeAsync(path.join(folder, `${i}_${j}_${k}.png`));
                    console.log(`已生成合成图：${i}_${j}_${k}.png`);
                } catch (err) {
                    console.error(`生成第${i}_${j}_${k}张图时出错：`, err);
                }
            }
        }
    }
}

• 图片读取、写入都是异步操作，必须加await等待执行完成，拿到Jimp图片实例后再调用后续方法。
• composite标准调用语法：底图实例.composite(待叠加图片实例, 水平偏移x, 垂直偏移y)，每叠一层调用一次，偏移量根据素材对齐需求调整，全对齐左上角就传0,0。
• 如果使用的是Jimp旧版本不支持Promise，也可以用回调写法：在jimp.read(文件路径, (err, img) => {})的回调里拿到img实例再操作，多层嵌套会形成回调地狱，更推荐用async/await写法。
• 路径拼接用path.join处理，避免Windows、macOS、Linux系统路径斜杠规则不兼容的问题。

内容的提问来源于stack exchange，提问作者James Stephen Brown