Operations

If you have any doubts on how to use this, make sure you read our Getting Started guide.

• :operation is the main manipulation you want to do with your image.

Cover

Use cover when you want an image with an exact width and height (crop). By default we'll run our Smart Cropping algorithm to identify the main subject of the image, so in case we need to remove part of the image to deliver on the requested size, we will always try our best to keep the most important element in the frame.

Using ImageBoss Web Library

<img
    src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
    data-imageboss-src="/examples/02.jpg"
    data-imageboss-operation="cover"
    width="300"
    height="300"
/>

API Example

https://img.imageboss.me /mywebsite-images /cover /300x300 /examples/02.jpg

Cover Modes

The cover operation accepts an extra parameter called :mode. It must be used if you think the default behaviour isn't what you're looking for.

Using ImageBoss Web Library

<img
    src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
    data-imageboss-src="/examples/02.jpg"
    data-imageboss-operation="cover"
    data-imageboss-cover-mode="center"
    width="320"
    height="320"
/>

API Example

https://img.imageboss.me /mywebsite-images /cover:center /320x320 /examples/02.jpg

Algorithm Based Modes

/cover:smart

Content Aware Cropping (default)

https://img.imageboss.me /mywebsite-images /cover:smart /320x320 /examples/02.jpg

/cover:attention

Focuses on the region with the highest luminance frequency, colour saturation and presence of skin tones.

https://img.imageboss.me /mywebsite-images /cover:attention /320x320 /examples/02.jpg

/cover:entropy

Shannon Entropy Algorithm.

https://img.imageboss.me /mywebsite-images /cover:entropy /320x320 /examples/02.jpg

/cover:face

Face Detection Algorithm.

Available Options

fp-z focalpoint zoom. Accepts any value between 1.0 and 10.0. (defaults to 1)

API Example

https://img.imageboss.me /mywebsite-images /cover:face /320x320 /examples/07.jpg

API Example fp-z:2

https://img.imageboss.me /mywebsite-images /cover:face /320x320 /fp-z:2 /examples/07.jpg

Using ImageBoss Web Library

<img
    src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
    data-imageboss-src="/examples/02.jpg"
    data-imageboss-operation="cover"
    data-imageboss-cover-mode="face"
    data-imageboss-options="fp-z:2"
    width="320"
    height="320"
/>

Directional Modes

If you don't want to use any of the algorithms above you can always tell us the region of the image you want us to focus on.

Available modes are
north, northeast, east, southeast, south, southwest, west, northwest and center.

Example

https://img.imageboss.me /mywebsite-images /cover:northeast /320x320 /examples/01.jpg

Focal Point

The focal point allows you to choose the exact point of interest of the image. So can allow your users to choose exactly the spot we shouldn't miss. Currently you can pass along three options fp-x, fp-z and fp-z.

fp-x and fp-y must be a float number between 0.0 and 1.0. For example, fp-x:0.5,fp-y:0.5 would be a point at the center of the image.

fp-z is how much you want to zoom-in into that fp-z and fp-z focal point.


Available Options

fp-x accepts any value between 0.0 and 1.0.
fp-y accepts any value between 0.0 and 1.0.
fp-z accepts any value between 1.0 and 10.0. (defaults to 1)

API Example fp-z:2

https://img.imageboss.me /mywebsite-images /cover /320x420 /fp-x:0.3,fp-y:0.4,fp-z:2 06.jpg

API Example fp-z:3

https://img.imageboss.me /mywebsite-images /cover /320x420 /fp-x:0.3,fp-y:0.4,fp-z:3 06.jpg

Using ImageBoss Web Library

<img
    src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
    data-imageboss-src="/examples/02.jpg"
    data-imageboss-operation="cover"
    data-imageboss-options="fp-x:0.3,fp-y:0.4,fp-z:2"
    width="320"
    height="420"
/>

Contain

Use contain if you want to resize your image until it fits both provided dimentions. A transparent background will be created in case the resulting image exceeds the size of your original image. If your image does not allow transparency, a default, white background will be used.

Options Available

• fill-color Use this option to set the background color of the resulting image. (default: ffffff)

Example

https://img.imageboss.me /mywebsite-images /cover:contain /300x300 /examples/01.jpg

Customizing background

https://img.imageboss.me /mywebsite-images /cover:contain /300x300 /fill-color:130f1e /examples/03.jpg

Inside

Use inside if you want to resize your image until it fits both provided dimentions but without creating a background.

Example

https://img.imageboss.me /mywebsite-images /cover:inside /300x300 /examples/05.jpg