Canvas stacking images issue in Node.js

Question

I have an issue with the code which generates pictures out of layers putting them on each other, but I have an issue, that every step starts with copying the previous made picture, and then putting a new layer on it. Describing: even if on the half of the programm I delete created pictures it has the previous picture in buffer and put it firstly and then a new layer. 2 files code included:

//index.js
const fs = require("fs");
const myArgs = process.argv.slice(2);
const { layers, width, height } = require("./input/config.js");
const { createCanvas, loadImage } = require("canvas");
const console = require("console");
const canvas = createCanvas(2048, 2048);
const ctx = canvas.getContext("2d");
const editionSize = myArgs.length > 0 ? Number(myArgs[0]) : 1;

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
      );
    saveLayer(canvas, _edition);
};

const startCreating = () => {
    let editionCount = 1;

    while(editionCount <= editionSize){
        editionCount++;
    }
    for (let i = 1; i <= editionSize; i++) {
    layers.forEach((layer) => {
        drawLayer(layer, i);
     });
    }
};

startCreating();

//config.js 
const fs = require("fs");
const width = 2048;
const height = 2048;
const dir = __dirname;
const rarity = [
        { key: "", val: "original" },
        { key: "_r", val: "rare" },
        { key: "_sr", val: "super rare" },
        { key: "_ssr", val: "super 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);
    rarity.forEach((r) => {
        name = name.replace(r.key, "");
    });
    return name;
  };

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

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

module.exports = { layers, width, height };

БЛОГ НА HUSL

Canvas stacking images issue in Node.js

Ответы (0 шт):