Comparing images with overlays

Often, when you’ve found a match, it can be useful to visually compare the image you search for with the image you found. This is a particularly good way to see where the two images are the same and where they are different. MatchEngine can help you make this comparison by generating an overlay for each match.

An overlay is a single image combining the collection image (on the left) and the image you searched for (on the right).

The two sides in the overlay are adjusted for crops, flips, translations and rotations so that they will align with each other.

You can use CSS and JavaScript to interactively swap between the two halves of the image. This makes small modifications between the two images really stand out. For example, the following code snippet will cause the images to swap when you mouse over them (be sure to replace the [OVERLAY URL], [IMAGE WIDTH] and [IMAGE HEIGHT] with the correct values):

<div 
  style="background-image: url('[OVERLAY URL]'); 
  width: [IMAGE WIDTH]px;
  height: [IMAGE HEIGHT]px; 
  background-position: 0px center;"
  onmouseover="this.style.backgroundPosition='-[IMAGE WIDTH]px center'"
  onmouseout="this.style.backgroundPosition='0px center'"
></div>

To generate an overlay set the generate_overlay parameter to true when performing a search or comparison. Matches will then include an overlay field containing a URL to the overlay image. Overlays will only be stored for 24 hours. After that you will need to perform another search to generate the overlay image. If you need the overlays for more than one day you should copy them to your own server. For more information about overlays, please see the documentation.