DEV Community

Christian Heilmann
Christian Heilmann

Posted on • Originally published at christianheilmann.com on

Batch cropping of screenshots on MacOS

I'm currently upgrading the Console documentation for Microsoft Edge and I needed to create a lot of screenshots for it. I wanted to make sure that they all are the same size, so I fixed a browser window to a certain size and instead of trying to screenshot a part of the screen, I thought it wiser to take full window screenshots. You do this by pressing CMD + Shift + 4, move your mouse on the window you want to take a screenshot of and press Space to save it to your Desktop.

MacOS by default ads a gorgeous drop shadow on any windows and puts some padding around it.

Screenshot of browser with chrome, dropshadow and padding around it

I wanted to get rid of that and the browser Chrome. The final result should be something like this:

cropped screenshot

So I tried to find a way to crop all the screenshots I have taken in a batch process using Automator. Turns out it can crop, but only from the centre. What I needed was a way to say "crop a rectangle of sx by sy from the image starting at x and y". The solution was the Swiss army knife of images, ImageMagick. After installing it (via Homebrew), I was able to crop part of an image and create a new one on Terminal using the following syntax (with the bits in {} being the values):

convert sourceimage.png -crop {width}x{height}+{left}+{top} resultimage.png
Enter fullscreen mode Exit fullscreen mode

I created a folder called nochrome on my Desktop and wrote this small shell script to batch convert all of them:

for filename in *.png; do\
  convert $filename -crop 1842x918+123+234 "nochrome/$filename"
  echo "$filename done"
done
Enter fullscreen mode Exit fullscreen mode

There are probably easier ways, but that did the trick for me.

Top comments (2)

Collapse
 
lakatos88 profile image
Alex Lakatos πŸ₯‘

Nice trick! If you're looking for an easier way, I use CMD + Shift + 5 to "Capture Selected Portion". I can select the portion of the screen I want and use that. The selection remains between screenshots. Added bonus, it also remains for screen recordings as well, it's what I usually use for the #DevToolsAdvent

Collapse
 
cescquintero profile image
Francisco Quintero πŸ‡¨πŸ‡΄

Nice thing. I've always limited my use of ImageMagick to only wrappers but it can be used as a shell command.