Horizontal sprite strip
Combine three pngsuite samples into a single row. Useful for spritesheets and UI icon strips.
import { concatPngs } from "image-stitch";
const names = ["basi0g08.png", "basi2c08.png", "basi4a16.png"];
const buffers = await Promise.all(
names.map((name) => fetch(`images/${name}`).then((res) => res.arrayBuffer()))
);
const output = await concatPngs({
inputs: buffers,
layout: { columns: 3 }
});
Result
Vertical film strip
Let image-stitch handle varying heights automatically. Smaller inputs are padded with transparent pixels.
import { concatPngs } from "image-stitch";
const names = ["basi2c08.png", "basi0g08.png"];
const buffers = await Promise.all(
names.map((name) => fetch(`images/${name}`).then((res) => res.arrayBuffer()))
);
const output = await concatPngs({
inputs: buffers,
layout: { rows: 2 }
});
Result
Auto-wrapping grid
Limit the maximum width to let image-stitch wrap rows automatically. Perfect for responsive contact sheets.
import { concatPngs } from "image-stitch";
const names = ["basi0g08.png", "basi2c08.png", "basi4a16.png", "basi0g08.png"];
const buffers = await Promise.all(
names.map((name) => fetch(`images/${name}`).then((res) => res.arrayBuffer()))
);
const output = await concatPngs({
inputs: buffers,
layout: { width: 256 }
});
Result
Bring your own PNGs
Drop in up to eight PNG files (16-bit color is supported!) and stitch them in your browser. No uploads—everything runs locally.
import { concatPngs } from "image-stitch";
const files = Array.from(fileInput.files ?? []);
const buffers = await Promise.all(files.map(file => file.arrayBuffer()));
const output = await concatPngs({
inputs: buffers,
layout: { columns: 4, wrapBehavior: "wrap" }
});