Extend an image
Extends/pads the edges of the image with the provided background colour. This operation will always occur after resizing and extraction, if any.
Params
Top (t), Left (l), Bottom (b), Right (r)
The range for top, right, bottom and left parameters is from 0 to 500, with 10 as default. Default background color applied is black.
- Original
- Default extend
- top=60, bottom=60
- top=20, right=40, bottom=20, left=40
- URL
- React
<PixelBinImage url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic_chair.jpeg" />
- URL
- React
<PixelBinImage url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend()/images/transformation/basic_chair.jpeg" />
- URL
- React
<PixelBinImage url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:60,b:60)/images/transformation/basic_chair.jpeg" />
- URL
- React
<PixelBinImage url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:20,r:40,b:20,l:40)/images/transformation/basic_chair.jpeg" />
Background (bc)
The background colour for the padded area. bc is an alias for this parameter.
Uses hex value to determine background color. Default background color is black.
- Original
- Default extend with background=black
- background=daa520
- URL
- React
<PixelBinImage url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic_chair.jpeg" />
- URL
- React
<PixelBinImage url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend()/images/transformation/basic_chair.jpeg" />
- URL
- React
<PixelBinImage url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(bc:daa520)/images/transformation/basic_chair.jpeg" />
Border Type (bt)
This parameter decides how to fill extra space created by the pad parameters. bt is an alias of this parameter.
constant (default) - Fills extra space with solid color specified by parameter
background. Ifbackgroundis not specified then access space will be filled with defaultblackcolor.replicate - Fills extra space by replicating the nearest pixels at the border of the original image.
reflect - Fills extra space by reflecting the image from the sides.
wrap - Fills extra space by wrapping the image at the opposite end of the side.
- Original
- border-type=constant
- border-type=replicate
- border-type=reflect
- border-type=wrap
- URL
- React
<PixelBinImage url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic-default.jpeg" />
- URL
- React
<PixelBinImage url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:30,b:30,r:30,l:30,bt:constant)/images/transformation/basic-default.jpeg" />
- URL
- React
<PixelBinImage url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:30,b:30,r:30,l:30,bt:replicate)/images/transformation/basic-default.jpeg" />
- URL
- React
<PixelBinImage url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:30,b:30,r:30,l:30,bt:reflect)/images/transformation/basic-default.jpeg" />
- URL
- React
<PixelBinImage url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/t.resize(h:300,w:200)~t.extend(t:30,b:30,r:30,l:30,bt:wrap)/images/transformation/basic-default.jpeg" />
DPR (dpr)
Specifies device pixel ratio. dpr is an alias for this parameter.
Valid values are between 0.1 and 5, with the default value being 1 and floating point numbers are valid parameters. This acts as a multiplier for both width and height. width=200&height=300&dpr=2 is equivalent to width=400&height=600.
This makes it easy to specify an image with the correct resolution when using srcset attribute of the img tag.