So iTerm2 has this neat imgcat
command that allows you to "cat" or view an image right in the terminal. It's pretty sweet, but I had an idea: what if we used that with Git for diffing changed images in agit diff
?
This seems like it should be possible, you can replace what git does when you do a diff of two different binary files. For example, the spaceman-diff package by Zach Holman does this to do a diff of two images as ASCII art.
We want to do the same, but instead of seeing an ASCII art version of an image, it'd be cool to see the two versions of the image itself right in the terminal.
Setting Git Attributes
The first thing is create a file in your home directory called ~/.config/git/attributes
. In here you can define a mapping between file types and what command Git will run when doing a diff of those filetypes. In my case I entered the following:
\*.png diff=image
\*.jpg diff=image
\*.gif diff=image
\*.jpeg diff=image
This tells git that when doing a diff of a file that ends with png
, jpg
,gif
, or jpeg
to use the image
config.
Set Up The Image Config
Now, in your ~/.gitconfig
file, add the following:
[diff "image"]
textconv = imgcat
This tells Git to use iTerm's imgcat
script for converting the binary image file to text. This seems weird, but this is actually how iTerm's imgcat command works: it converts the binary image into a textual stream that iTerm knows how to understand and then render as an actual image.
Put imgcat In Your Path
Next is put iTerm's imcat
script somewhere on your path. You can download it from here. Save that somewhere, make sure you chmod it to be executable (chmod +x imgcat
), and then throw it into some directory on your path. You can confirm it's there by typing imgcat
into an iTerm window:
$ imgcat
Usage: imgcat [-p] filename ...
or: cat filename | imgcat
Note that you have to put this script in your path, you can't just rely on the version that's inlined into your terminal with iTerm's shell integration.
Profit
Now when you change an image in a Git repo and do a git diff
while in iTerm you'll see a preview of the original image and the changed image. Example:
The above image is the original, the 2nd image is what I changed it to. Note that because imgcat is iTerm specific, it won't work in other terminals. If you do a git diff
in a different terminal (ex: the integrated terminal in VS Code) you'll see just the ordinary blank output:
Top comments (0)