make-image-square

Tiny helper that turns any image size into a 1:1 layout plan: square canvas size plus left/right/top/bottom padding so you can fit without cropping.

Useful when you need the math for letterboxing / pillarboxing before you draw to canvas, generate CSS object-fit-style boxes, or prep assets for Instagram and profile photos.

Install

npm install make-image-square

Usage

import { makeImageSquare, squarePadding } from "make-image-square";

// 1200×800 landscape → 1200×1200 with side pads
const layout = makeImageSquare(1200, 800);
// {
//   canvas: 1200,
//   contentWidth: 1200,
//   contentHeight: 800,
//   padLeft: 0, padRight: 0, padTop: 200, padBottom: 200,
//   ...
// }

// Force a specific square edge (e.g. 1080 for feed posts)
const ig = makeImageSquare(1200, 800, { canvasSize: 1080, mode: "fit" });

// Padding-only helper
const pads = squarePadding(800, 1200); // portrait → pad left/right

Modes

| Mode | Behavior | |------|----------| | fit (default) | Entire image visible; empty bands become padding | | fill | Image covers the square; caller is expected to crop overflow |

Notes

• This package only returns numbers. It does not decode or rewrite image files.
• For a browser UI that pads, blurs the frame, crops, or resizes to square in one pass, there is a free online tool at squareimage.run if you prefer not to wire up canvas yourself.

License

MIT