Step 2 Canvas Size Error?

[joshuahamsa]

I've been trying to generate some 1080x1080 gifs and have been running into issues on Step 2. Initially I thought this might be because the number of frames in some of the gifs was different than the numberOfFrames (150).

Some of the gifs have over 300 frames, for example, while one has a few as 5. I removed all of the gifs that had more or less than 150 frames, but I'm still running into the same error.

nft-animated-generator@3.1.3 generate node index.js

(node:27376) [DEP0147] DeprecationWarning: In future versions of Node.js, fs.rmdir(path, { recursive: true }) will be removed. Use fs.rm(path, { recursive: true }) instead (Use node --trace-deprecation ... to show where the warning was created) /Users/gasmasq/Downloads/animated-art-engine-main 3/step2_spritesheet_to_generative_sheet/node_modules/canvas/index.js:15 return new Canvas(width, height, type) ^

Error: invalid value (typically too big) for the size of the input (surface, pattern, etc.) at createCanvas (/Users/gasmasq/Downloads/animated-art-engine-main 3/step2_spritesheet_to_generative_sheet/node_modules/canvas/index.js:15:10) at startCreating (/Users/gasmasq/Downloads/animated-art-engine-main 3/step2_spritesheet_to_generative_sheet/src/main.js:785:18) at Command. (/Users/gasmasq/Downloads/animated-art-engine-main 3/step2_spritesheet_to_generative_sheet/index.js:39:7) at Command.listener [as _actionHandler] (/Users/gasmasq/Downloads/animated-art-engine-main 3/step2_spritesheet_to_generative_sheet/node_modules/commander/lib/command.js:488:17) at /Users/gasmasq/Downloads/animated-art-engine-main 3/step2_spritesheet_to_generative_sheet/node_modules/commander/lib/command.js:1227:65 at Command._chainOrCall (/Users/gasmasq/Downloads/animated-art-engine-main 3/step2_spritesheet_to_generative_sheet/node_modules/commander/lib/command.js:1144:12) at Command._parseCommand (/Users/gasmasq/Downloads/animated-art-engine-main 3/step2_spritesheet_to_generative_sheet/node_modules/commander/lib/command.js:1227:27) at Command.parse (/Users/gasmasq/Downloads/animated-art-engine-main 3/step2_spritesheet_to_generative_sheet/node_modules/commander/lib/command.js:897:10) at Object. (/Users/gasmasq/Downloads/animated-art-engine-main 3/step2_spritesheet_to_generative_sheet/index.js:44:9) at Module._compile (node:internal/modules/cjs/loader:1254:14)

Node.js v18.16.0 make: *** [step2] Error 1

I added a couple lines of debug code to print the canvas and image sizes to console at the various steps, and have found what might be the issue, but I'm not sure how to resolve it. Adding a couple lines before and after the errors for context:

Parsing layer folder Eyes Parsing attributes in folder: None#10

nft-animated-generator@3.1.3 generate node index.js 1 1

Canvas size: 1 1 (node:27442) [DEP0147] DeprecationWarning: In future versions of Node.js, fs.rmdir(path, { recursive: true }) will be removed. Use fs.rm(path, { recursive: true }) instead (Use node --trace-deprecation ... to show where the warning was created) Image size: 150 1 Image size: 150 1 Image size: 150 1 Image size: 150 1 /Users/gasmasq/Downloads/animated-art-engine-main 3/step2_spritesheet_to_generative_sheet/node_modules/canvas/index.js:15 return new Canvas(width, height, type) ^

Error: invalid value (typically too big) for the size of the input (surface, pattern, etc.) at createCanvas (/Users/gasmasq/Downloads/animated-art-engine-main 3/step2_spritesheet_to_generative_sheet/node_modules/canvas/index.js:15:10) at drawElement (/Users/gasmasq/Downloads/animated-art-engine-main 3/step2_spritesheet_to_generative_sheet/src/main.js:352:23) at /Users/gasmasq/Downloads/animated-art-engine-main 3/step2_spritesheet_to_generative_sheet/src/main.js:723:7 at Array.forEach () at paintLayers (/Users/gasmasq/Downloads/animated-art-engine-main 3/step2_spritesheet_to_generative_sheet/src/main.js:716:21) at /Users/gasmasq/Downloads/animated-art-engine-main 3/step2_spritesheet_to_generative_sheet/src/main.js:846:11 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async startCreating (/Users/gasmasq/Downloads/animated-art-engine-main 3/step2_spritesheet_to_generative_sheet/src/main.js:839:9)

Node.js v18.16.0 ****STARTING REGENERATION PROCESS*** ****Starting step 1: Converting pngs to spritesheets****

I'm probably just doing this wrong somehow, but would be grateful any input or assistance you can provide!

[joshuahamsa]

I figured it out.

Node Canvas (Cairo) has had maximum dimensions (height or width) capped at 32,767 px since version 1.10.

When the generator creates the sprite sheets, it essentially puts each of the 1080 px images side by side, which exceeds this limit after the 30th frame.

Closing this issue, with the hope that an alternative to Canvas might be out there.

https://github.com/Automattic/node-canvas/issues/1374#issuecomment-467918480

[jalagar]

Hi @joshuahamsa thank you for writing in and trying out the tool! Have you tried batching? That should help with the canvas issue.

[joshuahamsa]

I came across the batching option way too late tbh! Wish I’d found it earlier. הנני שלחני Here I am. Send me.

On Sun, Sep 3, 2023 at 2:41 PM James Uejio (Jalagar) < @.***> wrote:

Hi @joshuahamsa https://github.com/joshuahamsa thank you for writing in and trying out the tool! Have you tried batching? That should help with the canvas issue.

— Reply to this email directly, view it on GitHub https://github.com/jalagar/animated-art-engine/issues/189#issuecomment-1704411885, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZ2FQDPCCRPHSIYPBFTUAUTXYT2OXANCNFSM6AAAAAA4B6XB5Y . You are receiving this because you were mentioned.Message ID: @.***>

[jalagar]

haha sorry man! hope at least this comment thread helps some folks and appreciate you!