Is there a way to do a diff (compare) images in visual studio?

Question

I am in need to be able to determine what changes have been done for some images in an application I'm involved in using visual studio's integrated source control.

I've looked around and there is no programme that does this out of the box. How can it be done?

Answer 1

This can be done using ImageMagick to do the processing for you. Once you install it, add this batch file somewhere in your system:

@echo off
REM Have to change to ImageMagick directory so that correct EXEs are selected and DLLs are found.
cd /d "D:\Program Files\ImageMagick-7.0.8-Q16"

set cmp1="%temp%\comp1.png"
set cmp2="%temp%\comp2.png"
set img1=%1
set img2=%2
set batTmp="%temp%\comp.bat"

magick identify -format "set img1width=%%w\nset img1height=%%h\n" %1> %batTmp%
magick identify -format "set img2width=%%w\nset img2height=%%h\n" %2>>%batTmp%
call %batTmp%

if %img1width% == %img2width% (
  set width=%img1width%
) else (
  if %img1width% lss %img2width% (
    set resize1=1
    set width=%img2width%
  ) else (
    set resize2=1
    set width=%img1width%
  )
)

if %img1height% == %img2height% (
  set height=%img1height%
) else (
  if %img1height% lss %img2height% (
    set resize1=1
    set height=%img2height%
  ) else (
    set resize2=1
    set height=%img1height%
  )
)


REM Have to use separate ifs otherwise var assignment will not be seen.
if %resize1%. == 1. (
  set img1="%temp%\img1.png"
  set /a "dwidth=%width%-%img1width%"
  set /a "dheight=%height%-%img1height%"
)
if %resize1%. == 1. (
  magick convert %1 -gravity southeast -background red -splice %dwidth%x%dheight% %img1%
)

REM Have to use separate ifs otherwise var assignment will not be seen.
if %resize2%. == 1. (
  set img2="%temp%\img2.png"
  set /a "dwidth=%width%-%img2width%"
  set /a "dheight=%height%-%img2height%"
)
if %resize2%. == 1. (
  magick convert %2 -gravity southeast -background red -splice %dwidth%x%dheight% %img2%
)

REM Sets if images are put one on top of the other or side by side.
if %width% leq %height% (
  set spacer=2x0
  set append=+append
) else (
  set spacer=0x2
  set append=-append
)

REM Comparing image %img1% and %img2% and outputing to %cmp1%.
magick compare %img1% %img2% %cmp1%

REM Splicing original image 1, original image 2 and compared image next to each
REM other with a YELLOW spacer in between.
REM -splice is applied to each image, placing it at top left.  -chop is applied to the entire image.
magick convert %img1% %img2% %cmp1% -background yellow -splice %spacer% %append% -chop %spacer% %cmp2%

REM View image
REM Using start on the image file doesn't wait for the executed programme to terminate
start "" /wait imdisplay %cmp2%
:start "" imdisplay %cmp2%

REM Pause for a second to allow imdisplay time to load the file.
:ping -w 1 -n 2 -S 1.1.1.1 1.1.1.1 > NUL

REM Clean up temp files
del  %batTmp%
if not %1 == %img1% del %img1%
if not %2 == %img2% del %img2%
del %cmp1%
del %cmp2%

On the 2nd line, change the directory to where you have installed the application.

1. In Visual Studio, go to Tools->Options->Source Control->Visual Studio Team Foundation Server and press the Configure User Tools....
2. Press Add.
3. For extensions, add the extensions for all your image file types, i.e. .png .jpg .bmp etc
4. Leave Operation at Compare.
5. For Command, type the full path to the batch file and the name of the batch file or press the ... button and navigate to your batch file.
6. Arguments can be left as %1 %2

You can now do a comparison between image files. The output is shown from top to bottom or left to right (depending on the aspect ratio) showing the original 1st image, original 2nd image and image comparison, with differences in red and each image separated by a yellow line. If one image is larger than the other, then they are resized, with red as the padding colour.