align images helper page

I had taken several screenshots and wanted to align them. They are hard to compare when they don’t match up:

I wrote this quick & dirty program to do that.

For each image:

1. Load the image
2. Copy it to a <canvas>
3. Read the pixels out of the canvas
4. Calculate the “center of mass” for all the black pixels
5. Also find the minimal rectangle for cropping black pixels, relative to the center of mass

Then for a set of images:

1. Calculate the center of mass and dimensions for all of the images
2. Calculate the maximal minimal rectangle, relative to the center of mass
3. Output crop rectangles relative to the top left

Here is the output, as graphicsmagick commands:

And here’s how it looks — much better!