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.
Contents
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
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
https://img.imageboss.me /mywebsite-images /cover:face /320x320 /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 , and .and must be a float number between 0.0 and 1.0. For example, would be a point at the center of the image.
is how much you want to zoom-in into that and focal point.
Available Options
accepts any value between 0.0 and 1.0.
accepts any value between 0.0 and 1.0.
accepts any value between 1.0 and 10.0. (defaults to 1)
API Example
https://img.imageboss.me /mywebsite-images /cover /320x420 06.jpg
API Example
https://img.imageboss.me /mywebsite-images /cover /320x420 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
- 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 /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