Overlays¶

WineEngine can generate an overlay image to compare the query and collection images. The overlay image aligns the query and collection images so they match up with each other, adjusting for scaling, translations and rotations. To generate an overlay image on the server, set the generate_overlay parameter to true for a search or comparison call. The response will then include an overlay URL. To view the overlay, load the overlay URL on the WineEngine server (e.g., https://wineengine.tineye.com/<company>/<overlay_path>). You can use this URL to link to the overlay image directly in the src attribute of an HTML img tag.

The left side is the original image from the collection that the query image was matched against. The right side is the query image that was searched against the collection.

By using JavaScript and CSS you can use the overlay image to “overlap” the collection image and the query image so you can easily see how the query image differs from the collection image (if at all).

Overlay code for change on mouseover:

<div class="overlay-container" style="margin: auto">
  <div class="overlay-example"
   onmouseover="this.style.backgroundPosition='-500px center'"
   onmouseout="this.style.backgroundPosition='0px center'"></div>
</div>

The code to do this shows the left half of the overlay image to start (i.e. the collection image), and then shows the right half (i.e. the query image) when you mouse over the image.

Viewing images¶

It is possible to view your collection images using the WineEngine server and the filepath that you specified when adding the image.

Note that this feature is not meant to be a substitute for storing or viewing your images, but is useful for debugging or for use in a sample application.

Example:

https://wineengine.tineye.com/<company>/collection/?filepath=path/folder/image.jpg

The method takes a size parameter if you wish to limit the size at which the image is displayed (the larger dimension will be bound); it has a default of 200 pixels.

Example:

https://wineengine.tineye.com/<company>/collection/?filepath=path/folder/image.jpg&size=75

Cached images¶

The API keeps overlay images for one day, so if you wish to make use of them later, download them to your server.

Now that you’ve learned about the API calls, learn how to create the best experience for your users in the next tutorial: User experience.