This tutorial shows you how to use the connector-based Trim effect and – optionally – the normal Pad effect. Trim is an import effect, i.e. it is defined in the connector setting and applied to each image in the connector while being imported. The images in a connector with Trim effect will be visible in the FSI Server webinterface with the effect already applied to them.
The Trim effect is helpful when: you have images with different percentage of transparency or white background area which you want to display uniformly.
How to define the Trim Effect in the Connector XML
In order to activate the Trim effect, it needs to be defined in the XML file of your connector. You can find the files in the \fsi\CONFIG\connectors folder of your FSI installation.
The effect is defined in the following way:
The Trim effect offers two parameters:
- Threshold: defines the trim threshold, must be >= 0 and <= 100
- Trim Pickup Position: defines which pixel is taken as the pick up position for the trim (TL, TR, BL, BR)
Per default, Top Left is set as Trim Pickup Position, i.e. the color (or level of transparency) of the top left pixel is taken as guideline for the trim.
How it works
Since trimming images is relatively performance intensive, the Trim effect cannot be applied after the import – unlike the other effects. Therefore, the effect is set in the connector settings and applies to all images which will be imported into the corresponding connector.
Source Image Dimensions: 2400 x 2400
Trim Area
Trim uses the upper left pixel (except you have defined Trim Pickup Position differently) as a reference and will crop out all areas which are similar to it, i.e. are for example fully transparent or fully white)
In our example on the right this applies to the orange highlighted area.
Trim Area
Dimension Differences
Due to this, the image dimensions change: the source image has a dimension of 2400×2400 pixel, the end result will have a server-side original dimension (due to the trim) of 2240×800 pixel.
Depending on how much transparent or fully white areas an image has, the dimensions of each image in the connector will be different.
Therefore the images need to be adapted in order to ensure an uniform dimension for the delivery.
Trim Result: 2240×800
How to use Padding
Padding is a real-time effect which is used after importing by changing the image query.
Padding is defined the following way: padding(Left,Top,Right,Bottom)
For this example, we assume the target dimensions of the resulting images are 300×200 pixel (in order to use the images for a product overview site)
Padding could be used in the following way: left and right we define a border of 10px each, while the top and bottom padding will be 50px each.
The (server-side) source image will then be scaled accordingly to fit into the target dimension with the padding.
Please note: The original aspect ratio of the trimmed image needs always be taken into consideration. If the padding values do not respect this aspect ratio, the borders will vary in order to retain the correct ratio. Therefore it is advised to always have the original aspect ratio in mind when using padding, otherwise the values given there will be treated as minimum values.
Padding can be used in the following way: if you use a value between 0-1, e.g. 0.25, it will be treated as a percentage, therefore a padding of 25% will be used. All values above 1 will be treated as a pixel input.
Padding Area
Target Dimension: 300×200
Final Image Request
The image request for this image would look like this:
https://myserver.com/fsi/server?type=image&source=images%2Ftrim-image.jpg&width=300&height=200&padding=10,50,10,50&effects=Matte(FFFFFF)
Image delivered by FSI Server in target dimension
with padding and Matte-Effect