Overview
Introduction
This tool finds exactly where a PNG's visible content sits within its canvas — useful before cropping a logo, icon, or stamp that has extra transparent margin around it.
It scans the alpha channel locally in your browser; nothing is uploaded anywhere.
What Is PNG Outline Finder?
A bounding-box finder that scans an image's alpha channel to locate the smallest rectangle containing every non-transparent pixel, then counts how many of those pixels form the outer boundary of the visible shape.
It's built for transparent-background assets like icons, logos, and stamps, where the actual artwork often occupies far less space than the full canvas.
How PNG Outline Finder Works
A pure lib function scans every pixel once to track the minimum and maximum x and y coordinates of any pixel with a nonzero alpha value, which together define the bounding box.
It then scans only the pixels inside that box a second time, counting any non-transparent pixel that touches a fully transparent neighbor or the canvas edge as a boundary pixel.
When To Use PNG Outline Finder
Use it before cropping a logo or icon PNG to see exactly how much transparent margin surrounds the actual artwork.
It's also useful for verifying an asset's visible content is centered, or for measuring how tightly a stamp/signature graphic is cropped.
Often used alongside PNG Transparency Checker and PNG Analyzer.
Features
Advantages
- Measures the real alpha channel directly, rather than requiring you to eyeball margins in an image editor.
- Reports both the bounding box and a boundary pixel count, giving a sense of the shape's outline complexity.
- Runs entirely client-side, so the image never leaves your device.
Limitations
- Treats any pixel with alpha greater than 0 as 'content' — a very faint, nearly-transparent edge pixel still counts, which can make the box slightly larger than what looks visible at a glance.
- Doesn't actually crop or export a new image; it only reports the coordinates so you know what to crop.
Examples
Best Practices & Notes
Best Practices
- Use the reported bounding box coordinates to manually crop an asset down to its actual content before further processing.
- If boundaryPixels is unexpectedly high relative to the box's size, the shape may have a complex, jagged, or noisy silhouette worth inspecting.
Developer Notes
Both the bounding-box scan and the boundary-pixel count are pure functions over a plain Uint8ClampedArray pixel buffer, fully unit-tested without any canvas dependency; only decoding the upload into that buffer happens in the browser-only component.
PNG Outline Finder Use Cases
- Measuring exact transparent margin before manually cropping a logo or icon asset
- Verifying an exported graphic's content is centered within its canvas
- Estimating a silhouette's outline complexity via the boundary pixel count
Common Mistakes
- Assuming visually 'empty-looking' pixels are fully transparent — a pixel with alpha 1 out of 255 is still counted as content and can expand the bounding box unexpectedly.
- Expecting this tool to output a cropped image file; it reports coordinates only, for use with a separate crop step.
Tips
- If the bounding box is larger than expected, check for a very faint semi-transparent halo left over from a background-removal tool.
- Compare outlineWidth/outlineHeight against the full canvas size to quickly gauge how much margin an asset has before cropping.