Center an object within an image with a solid background. Do this by first trimming the background around the object (e_trim) and then pad (c_lpad) and resize the canvas to the image's initial width (w_iw) and height (h_ih).
* A green border was added (bo_4px_solid_green) to better demonstrate the object position within the image.
Here is the original image:
Ruby:
cl_image_tag("nice_bird.jpg", :border=>"4px_solid_green")
PHP v1:
cl_image_tag("nice_bird.jpg", array("border"=>"4px_solid_green"))
PHP v2:
(new ImageTag('nice_bird.jpg'))
->border(Border::solid(4, Color::GREEN));
Python:
CloudinaryImage("nice_bird.jpg").image(border="4px_solid_green")
Node.js:
cloudinary.image("nice_bird.jpg", {border: "4px_solid_green"})
Java:
cloudinary.url().transformation(new Transformation().border("4px_solid_green")).imageTag("nice_bird.jpg");
JS:
cloudinary.imageTag('nice_bird.jpg', {border: "4px_solid_green"}).toHtml();
jQuery:
$.cloudinary.image("nice_bird.jpg", {border: "4px_solid_green"})
React:
<Image publicId="nice_bird.jpg" >
<Transformation border="4px_solid_green" />
</Image>
Vue.js:
<cld-image publicId="nice_bird.jpg" >
<cld-transformation border="4px_solid_green" />
</cld-image>
Angular:
<cl-image public-id="nice_bird.jpg" >
<cl-transformation border="4px_solid_green">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Border("4px_solid_green")).BuildImageTag("nice_bird.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().border("4px_solid_green")).generate("nice_bird.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBorder("4px_solid_green")).generate("nice_bird.jpg")!, cloudinary: cloudinary)
And here it is after trimming, padding, and resizing:
Ruby:
cl_image_tag("nice_bird.jpg", :transformation=>[
{:effect=>"trim"},
{:width=>"iw", :height=>"ih", :crop=>"lpad"},
{:border=>"4px_solid_green"}
])
PHP v1:
cl_image_tag("nice_bird.jpg", array("transformation"=>array(
array("effect"=>"trim"),
array("width"=>"iw", "height"=>"ih", "crop"=>"lpad"),
array("border"=>"4px_solid_green")
)))
PHP v2:
(new ImageTag('nice_bird.jpg'))
->reshape(Reshape::trim())
->resize(Resize::limitPad()
->width(Expression::expression('initial_width'))
->height(Expression::expression('initial_height')))
->border(Border::solid(4, Color::GREEN));
Python:
CloudinaryImage("nice_bird.jpg").image(transformation=[
{'effect': "trim"},
{'width': "iw", 'height': "ih", 'crop': "lpad"},
{'border': "4px_solid_green"}
])
Node.js:
cloudinary.image("nice_bird.jpg", {transformation: [
{effect: "trim"},
{width: "iw", height: "ih", crop: "lpad"},
{border: "4px_solid_green"}
]})
Java:
cloudinary.url().transformation(new Transformation()
.effect("trim").chain()
.width("iw").height("ih").crop("lpad").chain()
.border("4px_solid_green")).imageTag("nice_bird.jpg");
JS:
cloudinary.imageTag('nice_bird.jpg', {transformation: [
{effect: "trim"},
{width: "iw", height: "ih", crop: "lpad"},
{border: "4px_solid_green"}
]}).toHtml();
jQuery:
$.cloudinary.image("nice_bird.jpg", {transformation: [
{effect: "trim"},
{width: "iw", height: "ih", crop: "lpad"},
{border: "4px_solid_green"}
]})
React:
<Image publicId="nice_bird.jpg" >
<Transformation effect="trim" />
<Transformation width="iw" height="ih" crop="lpad" />
<Transformation border="4px_solid_green" />
</Image>
Vue.js:
<cld-image publicId="nice_bird.jpg" >
<cld-transformation effect="trim" />
<cld-transformation width="iw" height="ih" crop="lpad" />
<cld-transformation border="4px_solid_green" />
</cld-image>
Angular:
<cl-image public-id="nice_bird.jpg" >
<cl-transformation effect="trim">
</cl-transformation>
<cl-transformation width="iw" height="ih" crop="lpad">
</cl-transformation>
<cl-transformation border="4px_solid_green">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Effect("trim").Chain()
.Width("iw").Height("ih").Crop("lpad").Chain()
.Border("4px_solid_green")).BuildImageTag("nice_bird.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
.effect("trim").chain()
.width("iw").height("ih").crop("lpad").chain()
.border("4px_solid_green")).generate("nice_bird.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setEffect("trim").chain()
.setWidth("iw").setHeight("ih").setCrop("lpad").chain()
.setBorder("4px_solid_green")).generate("nice_bird.jpg")!, cloudinary: cloudinary)
