如何在Javascript中使用Jimp復合來分層影像

我正在嘗試在影像生成器中創建，我可以在給定 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 is not一個函式”。

希望有人可以提供幫助。詹姆士。

uj5u.com熱心網友回復：

事實證明，復合函式實際上并沒有達到我的預期。我需要做的是成對地做這些層。

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

標籤：javascript 图像处理 合成的 吉普

上一篇：以x,y,w,h格式調整影像大小及其邊界框

下一篇：PixelInterleavedSampleModel與像素步幅、掃描線步幅和波段偏移等術語混淆