Node.js Canvas 图片重叠问题/canvas 正在上一张图片之上创建图片

Question

我在尝试创建生成的 .png 图像集合时遇到 Canvas 问题。我可以很好地创建 .png 文件，但第一张图片或之前的图片没有被清除。

index.js

const fs = require("fs");
const { createCanvas, loadImage } = require("canvas");
const canvas = createCanvas(1000,1000);
const ctx = canvas.getContext("2d");
const edition = 10;
const {layers,width,height} = require("./input/config.js");

const saveLayer = (_canvas, _edition) => {
    fs.writeFileSync(`./output/${_edition}.png`, _canvas.toBuffer("image/png"));
};

const drawLayer = async (_layer, _edition) => {
    let element = _layer.elements[Math.floor(Math.random() * _layer.elements.length)];
    const image = await loadImage(`${_layer.location}${element.fileName}`);
    ctx.drawImage(
        image, 
        _layer.position.x,
         _layer.position.y, 
         _layer.size.width, 
         _layer.size.height
         );
    console.log(`I created the ${_layer.name} layer, and chose element ${element.name}`);
    saveLayer(canvas, _edition);
};


for(let i = 0; i <= edition; i++){
    
    layers.forEach(layer => {
        drawLayer(layer, i);    
    });
  console.log("Creating edition " + i);
};

config.js

const fs = require("fs");
const width  = 1000;
const height = 1000;

const dir = __dirname;

const rarity = [
    {key: "", val: "original" },
    {key: "_r", val: "rare" },
    {key: "_sr", val: "super rare" },
];

const addRarity = (_str) => {
    let itemRarity;
    rarity.forEach((r) => {
        if (_str.includes(r.key)){
            itemRarity = r.val;
        }
    });
    return itemRarity;
};

const cleanName = (_str) => {
    let name = _str.slice(0, -4);

    return name;
};
const getElements = (path) => {
    return fs
    .readdirSync(path)
    //.filter((item) => !/(^|\/)\.|^\/\.|/g.test(item))
    .map((i,index) => {
        return {
            id: index,
            name: cleanName(i),
            fileName: i,
            rarity: addRarity(i),
        };
    });
};

const layers = [
    {
    id: 1,
    name: "0",
    location: `${dir}/0/`,
    elements: getElements(`${dir}/0/`),
    position: {x:0, y:0},
    size: {width: width, height: height},
},
{
    id: 2,
    name: "1",
    location: `${dir}/1/`,
    elements: getElements(`${dir}/1/`),
    position: {x:0, y:0},
    size: {width: width, height: height},
},
{
    id: 3,
    name: "2",
    location: `${dir}/2/`,
    elements: getElements(`${dir}/2/`),
    position: {x:0, y:0},
    size: {width: width, height: height},
},
{
    id: 4,
    name: "3",
    location: `${dir}/3/`,
    elements: getElements(`${dir}/3/`),
    position: {x:0, y:0},
    size: {width: width, height: height},
},
{
    id: 5,
    name: "4",
    location: `${dir}/4/`,
    elements: getElements(`${dir}/4/`),
    position: {x:0, y:0},
    size: {width: width, height: height},
},
];

//console.log(layers);
module.exports = {layers,width,height};

代码运行良好，我可以创建 10 个 .png 文件。

从上面的图片中，您可以看到图片 1 中的蓝色帽子仍然出现在图片 2 中。

编辑：我试过的 -

   ctx.beginPath();
   context.clearRect(0, 0, canvas.width, canvas.height);


const createNFTs = async() =>{

    for(let i = 1; i <= edition; i++){

        for (const layer of layers) await drawLayer(layer, i);
        console.log("Creating edition " + i);
    
    };
};

最终代码：

 for(let i = 1; i <= edition; i++){
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (const layer of layers) await drawLayer(layer, i);
        console.log("Creating edition " + i);
    
    };

Answer 1

您有一个调用异步函数的 forEach。

forEach 和 async 不能一起使用：forEach 在上一张图像完成之前绘制下一张图像

替换

layers.forEach(layer => {
    drawLayer(layer, i);    
});

和

for (const layer of layers) {
    await drawLayer(layer, i);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

（添加清除）并将其放入异步函数

Node.js Canvas 图片重叠问题/canvas 正在上一张图片之上创建图片

Node.js Canvas image overlapping issue / canvas is creating image on top of previous image

javascript

canvas

generative-art

node.js