bandsaw

Prototype feature request for Timelord, a simple spellbook for auto-cropping PNGs.

Installation

npm install bandsaw

Use

import bandsaw from "bandsaw";

let result = await bandsaw.trim(input, padding);

trim(input[, padding?])

The main function of bandsaw: to autotrim png images, rewrite original files, and return verbose data about our crop for accurate positioning from PS to AE.

| Param | Type | Default | Description | | :------ | :---------------- | :------ | -----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | input | [Array, String] | null | An Array of absolute filepaths or a single String to either a file or folder. When a folder is provided, trim() will act on all it's contents (but only for PNGs). | | padding | Number | 0 | A Number to extend the cropbox on every side (e.g., 5 will extend 5px in each direction, resulting in +10px width and height total). |

Examples

Input examples

• Sending a single file:

let result = await bandsaw.trim("C:/Users/TRSch/OneDrive/testImage.png");
console.log(result); // Returns Array with length of 1

• Sending multiple files:

let files = [
  "C:/Users/TRSch/OneDrive/test1.png",
  "C:/Users/TRSch/OneDrive/test2.png",
];
let result = await bandsaw.trim(files);
console.log(result); // Returns Array with length of 2

• Running on entire folder contents:

let result = await bandsaw.trim("C:/Users/TRSch/OneDrive/testFolder");
console.log(result); // Returns Array with length equal to amount of PNG files inside folder

• Files and folders:

let files = [
  "C:/Users/TRSch/OneDrive/test1.png",
  "C:/Users/TRSch/OneDrive/testFolder",
];
let result = await bandsaw.trim(files);
console.log(result); // Returns Array with length of 5 (1 + 4 inside folder)

Output examples

When using a folder as input:

let result = await bandsaw.trim("C:/Users/TRSch/Downloads/test");

Output result becomes:

[
  {
    name: "fileA",
    fullName: "fileA.png",
    path: "C:/Users/TRSch/Downloads/test/fileA.png",
    left: 132, // distances from original edges to corresponding crop edges
    top: 172,
    right: 133,
    bottom: 109,
    width: 735, // dimensions of the crop and new file, not the original
    height: 719,
    naturalWidth: 1000, // dimensions of the original
    naturalHeight: 1000,
    geometricBounds: [132, 172, 867, 891], // [x1, y1, x2, y2] coordinates of cropbox from original file
  },
  {
    name: "fileB",
    fullName: "fileB.png",
    path: "C:/Users/TRSch/Downloads/test/fileB.png",
    left: 5,
    top: 63,
    right: 4,
    bottom: 69,
    width: 555,
    height: 432,
    naturalWidth: 564,
    naturalHeight: 564,
    geometricBounds: [5, 63, 560, 495],
  },
];

When padding is defined, the cropbox will be expanded and all values within output will be expanded to reflect:

let noPadding = await bandsaw.trim(
  "C:/Users/TRSch/Downloads/test/NoPadding.png"
);

// Here we include 10 for padding
let includePadding = await bandsaw.trim(
  "C:/Users/TRSch/Downloads/test/IncludePadding.png",
  10
);

// Merge results to see them side by side
let result = [].concat(noPadding, includePadding);

console.log(result);

We see the difference between their values here, where IncludePadding.png has compensated bounds to prevent any accidental loss discrepancies:

[
  {
    name: "NoPadding",
    fullName: "NoPadding.png",
    path: "C:/Users/TRSch/Downloads/test/NoPadding.png",
    left: 142,
    top: 182,
    right: 143,
    bottom: 119,
    width: 715,
    height: 699,
    naturalWidth: 1000,
    naturalHeight: 1000,
    geometricBounds: [142, 182, 857, 881],
  },
  {
    name: "IncludePadding",
    fullName: "IncludePadding.png",
    path: "C:/Users/TRSch/Downloads/test/IncludePadding.png",
    left: 132,
    top: 172,
    right: 133,
    bottom: 109,
    width: 735,
    height: 719,
    naturalWidth: 1000,
    naturalHeight: 1000,
    geometricBounds: [132, 172, 867, 891],
  },
];

Notes

• Pixel detection is close but not perfect. I notice with exporting parametric shapes, I often get the top/left params exactly correct, but often lose a pixel on right/bottom during crop, where a 100x100 rectangle @{x: 50, y: 50} will return left: 50 and top: 50 correctly but crop as 99x99. We may want to add 1 as padding to prevent this single pixel loss inside Timelord