← View popular recipes

Find recipes by tags:

Center objects using trim

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:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/bo_4px_solid_green/nice_bird.jpg

Ruby:

cl_image_tag("nice_bird.jpg", :border=>"4px_solid_green")

PHP:

cl_image_tag("nice_bird.jpg", array("border"=>"4px_solid_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)

Original

And here it is after trimming, padding, and resizing:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/e_trim/c_lpad,w_iw,h_ih/bo_4px_solid_green/nice_bird.jpg

Ruby:

cl_image_tag("nice_bird.jpg", :transformation=>[
  {:effect=>"trim"},
  {:width=>"iw", :height=>"ih", :crop=>"lpad"},
  {:border=>"4px_solid_green"}
  ])

PHP:

cl_image_tag("nice_bird.jpg", array("transformation"=>array(
  array("effect"=>"trim"),
  array("width"=>"iw", "height"=>"ih", "crop"=>"lpad"),
  array("border"=>"4px_solid_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)

Trimmed and Padded

by Roee Ben Ari May 21, 2018

Tags: