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:
cl.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 overlay="hexagon_sample" flags="cutter" />
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(173).Height(200).Crop("fill").Chain()
  .Overlay("hexagon_sample").Flags("cutter")).BuildImageTag("pasta.png")
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:
cl.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" overlay="text:Coustard_200_bold:Flowers" flags="cutter">
        <Transformation overlay="text:Coustard_200_bold:Flowers" flags="cutter" />
</Image>
Angular:
<cl-image public-id="yellow_tulip.png" overlay="text:Coustard_200_bold:Flowers" flags="cutter">
        <cl-transformation overlay="text:Coustard_200_bold:Flowers" flags="cutter" />
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("text:Coustard_200_bold:Flowers").Flags("cutter")).BuildImageTag("yellow_tulip.png")
by Itay Taragano