General

Tutorials

API documentation

Working with images

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 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

Overlays

WineEngine can generate an overlay image to compare the query and result images. The overlay image aligns the query and result 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.

_images/sample_overlay.jpg

The left side of the overlay shows the query image that you searched for. On the right is the original image from the collection that was matched.

By using JavaScript and CSS you can use the overlay image to “overlap” the collection image and the search 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 searched image) when you mouse over the image.

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.