Custom shapes cropping

You can crop an image based on any custom shape. Do this by having your own custom image as a mask for cropping, setting the overlay parameter as your mask image's public ID and setting the flags parameter to cutter (in URLs: l_<mask_image>,fl_cutter).

Original

Original

Custom shaped

Custom shaped

Semi-transparency

Semi-transparency
Ruby:
cl_image_tag("pasta.png", :transformation=>[
  {:width=>173, :height=>200, :crop=>"fill"},
  {:overlay=>"hexagon_sample", :flags=>"cutter"}
  ])
PHP:
cl_image_tag("pasta.png", array("transformation"=>array(
  array("width"=>173, "height"=>200, "crop"=>"fill"),
  array("overlay"=>"hexagon_sample", "flags"=>"cutter")
  )))
Python:
CloudinaryImage("pasta.png").image(transformation=[
  {"width": 173, "height": 200, "crop": "fill"},
  {"overlay": "hexagon_sample", "flags": "cutter"}
  ])
Node.js:
cloudinary.image("pasta.png", {transformation: [
  {width: 173, height: 200, crop: "fill"},
  {overlay: "hexagon_sample", flags: "cutter"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(173).height(200).crop("fill").chain()
  .overlay("hexagon_sample").flags("cutter")).imageTag("pasta.png");
JS:
cloudinary.imageTag('pasta.png', {transformation: [
  {width: 173, height: 200, crop: "fill"},
  {overlay: "hexagon_sample", flags: "cutter"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("pasta.png", {transformation: [
  {width: 173, height: 200, crop: "fill"},
  {overlay: "hexagon_sample", flags: "cutter"}
  ]})
React:
<Image publicId="pasta.png" >
  <Transformation width="173" height="200" crop="fill" />
  <Transformation overlay="hexagon_sample" flags="cutter" />
</Image>
Angular:
<cl-image public-id="pasta.png" >
  <cl-transformation width="173" height="200" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="hexagon_sample" flags="cutter">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(173).Height(200).Crop("fill").Chain()
  .Overlay("hexagon_sample").Flags("cutter")).BuildImageTag("pasta.png")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(173).height(200).crop("fill").chain()
  .overlay("hexagon_sample").flags("cutter")).generate("pasta.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(173).setHeight(200).setCrop("fill").chain()
  .setOverlay("hexagon_sample").setFlags("cutter")).generate("pasta.png")!, cloudinary: cloudinary)
by Itay Taragano

Use images as text textures

Instead of coloring your text with a solid color, fill it with an image and give it an interesting texture. How? Choose an image as your text texture, dynamically add a text overlay as explained in the Dynamic text overlay blog post, and set the flags parameter to cutter (fl_cutter in URLs).

Original image

Original image

Text texture

Text texture

Fetch + texture

Fetch + texture
Ruby:
cl_image_tag("yellow_tulip.png", :overlay=>"text:Coustard_200_bold:Flowers", :flags=>"cutter")
PHP:
cl_image_tag("yellow_tulip.png", array("overlay"=>"text:Coustard_200_bold:Flowers", "flags"=>"cutter"))
Python:
CloudinaryImage("yellow_tulip.png").image(overlay="text:Coustard_200_bold:Flowers", flags="cutter")
Node.js:
cloudinary.image("yellow_tulip.png", {overlay: "text:Coustard_200_bold:Flowers", flags: "cutter"})
Java:
cloudinary.url().transformation(new Transformation().overlay("text:Coustard_200_bold:Flowers").flags("cutter")).imageTag("yellow_tulip.png");
JS:
cloudinary.imageTag('yellow_tulip.png', {overlay: "text:Coustard_200_bold:Flowers", flags: "cutter"}).toHtml();
jQuery:
$.cloudinary.image("yellow_tulip.png", {overlay: "text:Coustard_200_bold:Flowers", flags: "cutter"})
React:
<Image publicId="yellow_tulip.png" >
  <Transformation overlay="text:Coustard_200_bold:Flowers" flags="cutter" />
</Image>
Angular:
<cl-image public-id="yellow_tulip.png" >
  <cl-transformation overlay="text:Coustard_200_bold:Flowers" flags="cutter">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("text:Coustard_200_bold:Flowers").Flags("cutter")).BuildImageTag("yellow_tulip.png")
Android:
MediaManager.get().url().transformation(new Transformation().overlay("text:Coustard_200_bold:Flowers").flags("cutter")).generate("yellow_tulip.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Coustard_200_bold:Flowers").setFlags("cutter")).generate("yellow_tulip.png")!, cloudinary: cloudinary)
by Itay Taragano

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:
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>
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)
by Roee Ben Ari

Custom shapes cut out

Cut out any shape from an image. Do this by having your own custom image as the mask for the cutout by setting overlay parameter as your mask image's public ID and chaining a transformation with effect parameter as cut_out and flags parameter as layer_apply (l_<public_id>/e_cut_out,fl_layer_apply in URLs).

Original

Original

Custom cut out

Custom cut out

Semi-transparency

Semi-transparency
Ruby:
cl_image_tag("night_sky.jpg", :transformation=>[
  {:overlay=>"ring2", :radius=>"max", :width=>200, :height=>200},
  {:effect=>"cut_out", :flags=>"layer_apply"}
  ])
PHP:
cl_image_tag("night_sky.jpg", array("transformation"=>array(
  array("overlay"=>"ring2", "radius"=>"max", "width"=>200, "height"=>200),
  array("effect"=>"cut_out", "flags"=>"layer_apply")
  )))
Python:
CloudinaryImage("night_sky.jpg").image(transformation=[
  {"overlay": "ring2", "radius": "max", "width": 200, "height": 200},
  {"effect": "cut_out", "flags": "layer_apply"}
  ])
Node.js:
cloudinary.image("night_sky.jpg", {transformation: [
  {overlay: "ring2", radius: "max", width: 200, height: 200},
  {effect: "cut_out", flags: "layer_apply"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .overlay("ring2").radius("max").width(200).height(200).chain()
  .effect("cut_out").flags("layer_apply")).imageTag("night_sky.jpg");
JS:
cloudinary.imageTag('night_sky.jpg', {transformation: [
  {overlay: "ring2", radius: "max", width: 200, height: 200},
  {effect: "cut_out", flags: "layer_apply"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("night_sky.jpg", {transformation: [
  {overlay: "ring2", radius: "max", width: 200, height: 200},
  {effect: "cut_out", flags: "layer_apply"}
  ]})
React:
<Image publicId="night_sky.jpg" >
  <Transformation overlay="ring2" radius="max" width="200" height="200" />
  <Transformation effect="cut_out" flags="layer_apply" />
</Image>
Angular:
<cl-image public-id="night_sky.jpg" >
  <cl-transformation overlay="ring2" radius="max" width="200" height="200">
  </cl-transformation>
  <cl-transformation effect="cut_out" flags="layer_apply">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay("ring2").Radius("max").Width(200).Height(200).Chain()
  .Effect("cut_out").Flags("layer_apply")).BuildImageTag("night_sky.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .overlay("ring2").radius("max").width(200).height(200).chain()
  .effect("cut_out").flags("layer_apply")).generate("night_sky.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("ring2").setRadius("max").setWidth(200).setHeight(200).chain()
  .setEffect("cut_out").setFlags("layer_apply")).generate("night_sky.jpg")!, cloudinary: cloudinary)
by Daniel Mendoza