Implement final canvas sizing

Author: thinknathan

README.md

@@ -19,10 +19,12 @@ Command-line utility that slices input images into segments according to specifi
 `node slice.cjs`
 
 ```
--f, --filename    Input image filename                                [string]
--i, --folderPath  Input folder                                        [string]
--w, --width       Output image width                       [number] [required]
--h, --height      Output image height                                 [number]
+-f, --filename      Input image filename                              [string]
+-i, --folderPath    Input folder                                      [string]
+-w, --width         Width of each slice                    [number] [required]
+-h, --height        Height of each slice                              [number]
+-d, --canvasWidth   Width of canvas for final output                  [number]
+-g, --canvasHeight  Height of canvas for final output                 [number]
 ```
 
 - If `filename` does not include an extension, `.png`, `.gif`, `.jpg` and `.jpeg` will be guessed

slice.cjs

@@ -42,12 +42,12 @@ const options = yargs
 	})
 	.option('d', {
 		alias: 'canvasWidth',
-		describe: 'Width of the canvas',
+		describe: 'Width of canvas for final output',
 		type: 'number',
 	})
 	.option('g', {
 		alias: 'canvasHeight',
-		describe: 'Height of the canvas',
+		describe: 'Height of canvas for final output',
 		type: 'number',
 	}).argv;
 if (options.filename) {

src/utils/processImage.ts

@@ -108,7 +108,27 @@ function continueSlicing(
 			);
 			const outputFilename = `${outputFolder}/${baseFilename}_${x}_${y}.png`;
 
-			slice.write(outputFilename);
+			if (canvasWidth || canvasHeight) {
+				// Calculate canvas dimensions
+				const finalCanvasWidth = canvasWidth || width;
+				const finalCanvasHeight = (canvasHeight || canvasWidth) ?? height;
+
+				// Create a new canvas with transparent background
+				const canvas = new Jimp(
+					finalCanvasWidth,
+					finalCanvasHeight,
+					0x00000000,
+				);
+
+				// Composite the image in the middle of the canvas
+				const startX2 = Math.floor((finalCanvasWidth - sliceWidth) / 2);
+				const startY2 = Math.floor((finalCanvasHeight - sliceHeight) / 2);
+				canvas.composite(slice, startX2, startY2);
+				canvas.write(outputFilename);
+			} else {
+				slice.write(outputFilename);
+			}
+
 			console.log(`Slice saved: ${outputFilename}`);
 		}
 	}

utils/processImage.js

@@ -68,7 +68,21 @@ function continueSlicing(image, width, height, canvasWidth, canvasHeight, inputF
             // Incorporate the input filename into the output filename
             const baseFilename = path.basename(inputFilename, path.extname(inputFilename));
             const outputFilename = `${outputFolder}/${baseFilename}_${x}_${y}.png`;
-            slice.write(outputFilename);
+            if (canvasWidth || canvasHeight) {
+                // Calculate canvas dimensions
+                const finalCanvasWidth = canvasWidth || width;
+                const finalCanvasHeight = (canvasHeight || canvasWidth) ?? height;
+                // Create a new canvas with transparent background
+                const canvas = new Jimp(finalCanvasWidth, finalCanvasHeight, 0x00000000);
+                // Composite the image in the middle of the canvas
+                const startX2 = Math.floor((finalCanvasWidth - sliceWidth) / 2);
+                const startY2 = Math.floor((finalCanvasHeight - sliceHeight) / 2);
+                canvas.composite(slice, startX2, startY2);
+                canvas.write(outputFilename);
+            }
+            else {
+                slice.write(outputFilename);
+            }
             console.log(`Slice saved: ${outputFilename}`);
         }
     }