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).

Original

Original
Ruby:
Copy to clipboard
cl_image_tag("nice_bird.jpg", :transformation=>[
  {:effect=>"trim"},
  {:width=>"iw", :height=>"ih", :crop=>"lpad"},
  {:border=>"4px_solid_green"}
  ])
PHP:
Copy to clipboard
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:
Copy to clipboard
CloudinaryImage("nice_bird.jpg").image(transformation=[
  {'effect': "trim"},
  {'width': "iw", 'height': "ih", 'crop': "lpad"},
  {'border': "4px_solid_green"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("nice_bird.jpg", {transformation: [
  {effect: "trim"},
  {width: "iw", height: "ih", crop: "lpad"},
  {border: "4px_solid_green"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("trim").chain()
  .width("iw").height("ih").crop("lpad").chain()
  .border("4px_solid_green")).imageTag("nice_bird.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('nice_bird.jpg', {transformation: [
  {effect: "trim"},
  {width: "iw", height: "ih", crop: "lpad"},
  {border: "4px_solid_green"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("nice_bird.jpg", {transformation: [
  {effect: "trim"},
  {width: "iw", height: "ih", crop: "lpad"},
  {border: "4px_solid_green"}
  ]})
React:
Copy to clipboard
<Image publicId="nice_bird.jpg" >
  <Transformation effect="trim" />
  <Transformation width="iw" height="ih" crop="lpad" />
  <Transformation border="4px_solid_green" />
</Image>
Vue.js:
Copy to clipboard
<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:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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)
by Roee Ben Ari

Trim photo background

Apply the trim filter to remove the edges around the image. Do this by setting the effect parameter to trim (e_trim in URLs). You can customize the color similarity tolerance between 0 and 100. The default level is10`.

Original

Original

Trimmed

Trimmed

Custom level

Custom level
Ruby:
Copy to clipboard
cl_image_tag("business_man_padded.jpg", :effect=>"trim")
PHP:
Copy to clipboard
cl_image_tag("business_man_padded.jpg", array("effect"=>"trim"))
Python:
Copy to clipboard
CloudinaryImage("business_man_padded.jpg").image(effect="trim")
Node.js:
Copy to clipboard
cloudinary.image("business_man_padded.jpg", {effect: "trim"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("trim")).imageTag("business_man_padded.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('business_man_padded.jpg', {effect: "trim"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("business_man_padded.jpg", {effect: "trim"})
React:
Copy to clipboard
<Image publicId="business_man_padded.jpg" >
  <Transformation effect="trim" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="business_man_padded.jpg" >
  <cld-transformation effect="trim" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="business_man_padded.jpg" >
  <cl-transformation effect="trim">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("trim")).BuildImageTag("business_man_padded.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("trim")).generate("business_man_padded.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("trim")).generate("business_man_padded.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Streamlining the Process of Product Image Creation

Whether you've just launched a Shopify site for your latest product, or you're a multibillion dollar retailer with expansive design teams, you probably have significant room to improve and make more efficient the process of how raw photographs are transformed into compelling images on your website’s product pages.

Photo with Background Removed

Photo with Background Removed

Photo with Background Removed

Photo with Background Removed

Processed Product Photo

Processed Product Photo
Ruby:
Copy to clipboard
cl_image_tag("wood_chair_orig.jpg")
PHP:
Copy to clipboard
cl_image_tag("wood_chair_orig.jpg")
Python:
Copy to clipboard
CloudinaryImage("wood_chair_orig.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("wood_chair_orig.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("wood_chair_orig.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('wood_chair_orig.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("wood_chair_orig.jpg")
React:
Copy to clipboard
<Image publicId="wood_chair_orig.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="wood_chair_orig.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="wood_chair_orig.jpg" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("wood_chair_orig.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("wood_chair_orig.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("wood_chair_orig.jpg")!, cloudinary: cloudinary)
by Josh Slivken