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

Here is the original image:

Ruby:
cl_image_tag("night_sky.jpg")
PHP:
cl_image_tag("night_sky.jpg")
Python:
CloudinaryImage("night_sky.jpg").image()
Node.js:
cloudinary.image("night_sky.jpg")
Java:
cloudinary.url().imageTag("night_sky.jpg");
JS:
cloudinary.imageTag('night_sky.jpg').toHtml();
jQuery:
$.cloudinary.image("night_sky.jpg")
React:
<Image publicId="night_sky.jpg" >

</Image>
Angular:
<cl-image public-id="night_sky.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("night_sky.jpg")
Android:
MediaManager.get().url().generate("night_sky.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("night_sky.jpg")!, cloudinary: cloudinary)
Original

The following transparent ring was upload to Cloudinary with the 'ring2' public id:

Ruby:
cl_image_tag("ring2.png")
PHP:
cl_image_tag("ring2.png")
Python:
CloudinaryImage("ring2.png").image()
Node.js:
cloudinary.image("ring2.png")
Java:
cloudinary.url().imageTag("ring2.png");
JS:
cloudinary.imageTag('ring2.png').toHtml();
jQuery:
$.cloudinary.image("ring2.png")
React:
<Image publicId="ring2.png" >

</Image>
Angular:
<cl-image public-id="ring2.png" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("ring2.png")
Android:
MediaManager.get().url().generate("ring2.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("ring2.png")!, cloudinary: cloudinary)
Original

Now you can use this image with the effect parameter as cut_out. For example, when applying it to an image with the sample public id:

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(new Layer().publicId("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: new cloudinary.Layer().publicId("ring2"), radius: "max", width: 200, height: 200},
  {effect: "cut_out", flags: "layer_apply"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("night_sky.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("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(new Layer().PublicId("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(new Layer().publicId("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)
Custom cut out

The mask image can also be a semi-transparent PNG file to make the edges smoother. Here's an example of an uploaded mask:

Ruby:
cl_image_tag("hexagon_feather_sample.png")
PHP:
cl_image_tag("hexagon_feather_sample.png")
Python:
CloudinaryImage("hexagon_feather_sample.png").image()
Node.js:
cloudinary.image("hexagon_feather_sample.png")
Java:
cloudinary.url().imageTag("hexagon_feather_sample.png");
JS:
cloudinary.imageTag('hexagon_feather_sample.png').toHtml();
jQuery:
$.cloudinary.image("hexagon_feather_sample.png")
React:
<Image publicId="hexagon_feather_sample.png" >

</Image>
Angular:
<cl-image public-id="hexagon_feather_sample.png" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("hexagon_feather_sample.png")
Android:
MediaManager.get().url().generate("hexagon_feather_sample.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("hexagon_feather_sample.png")!, cloudinary: cloudinary)
Semi-transparent mask

And here's a sample result:

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

An underlay image can be behind the cut out:

Ruby:
cl_image_tag("night_sky.png", :transformation=>[
  {:width=>500, :overlay=>"cloudinary_icon"},
  {:effect=>"cut_out", :flags=>"layer_apply"},
  {:underlay=>"night_sky", :effect=>"negate"}
  ])
PHP:
cl_image_tag("night_sky.png", array("transformation"=>array(
  array("width"=>500, "overlay"=>"cloudinary_icon"),
  array("effect"=>"cut_out", "flags"=>"layer_apply"),
  array("underlay"=>"night_sky", "effect"=>"negate")
  )))
Python:
CloudinaryImage("night_sky.png").image(transformation=[
  {'width': 500, 'overlay': "cloudinary_icon"},
  {'effect': "cut_out", 'flags': "layer_apply"},
  {'underlay': "night_sky", 'effect': "negate"}
  ])
Node.js:
cloudinary.image("night_sky.png", {transformation: [
  {width: 500, overlay: "cloudinary_icon"},
  {effect: "cut_out", flags: "layer_apply"},
  {underlay: "night_sky", effect: "negate"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(500).overlay(new Layer().publicId("cloudinary_icon")).chain()
  .effect("cut_out").flags("layer_apply").chain()
  .underlay(new Layer().publicId("night_sky")).effect("negate")).imageTag("night_sky.png");
JS:
cloudinary.imageTag('night_sky.png', {transformation: [
  {width: 500, overlay: new cloudinary.Layer().publicId("cloudinary_icon")},
  {effect: "cut_out", flags: "layer_apply"},
  {underlay: new cloudinary.Layer().publicId("night_sky"), effect: "negate"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("night_sky.png", {transformation: [
  {width: 500, overlay: new cloudinary.Layer().publicId("cloudinary_icon")},
  {effect: "cut_out", flags: "layer_apply"},
  {underlay: new cloudinary.Layer().publicId("night_sky"), effect: "negate"}
  ]})
React:
<Image publicId="night_sky.png" >
  <Transformation width="500" overlay="cloudinary_icon" />
  <Transformation effect="cut_out" flags="layer_apply" />
  <Transformation underlay="night_sky" effect="negate" />
</Image>
Angular:
<cl-image public-id="night_sky.png" >
  <cl-transformation width="500" overlay="cloudinary_icon">
  </cl-transformation>
  <cl-transformation effect="cut_out" flags="layer_apply">
  </cl-transformation>
  <cl-transformation underlay="night_sky" effect="negate">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(500).Overlay(new Layer().PublicId("cloudinary_icon")).Chain()
  .Effect("cut_out").Flags("layer_apply").Chain()
  .Underlay(new Layer().PublicId("night_sky")).Effect("negate")).BuildImageTag("night_sky.png")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(500).overlay(new Layer().publicId("cloudinary_icon")).chain()
  .effect("cut_out").flags("layer_apply").chain()
  .underlay(new Layer().publicId("night_sky")).effect("negate")).generate("night_sky.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(500).setOverlay("cloudinary_icon").chain()
  .setEffect("cut_out").setFlags("layer_apply").chain()
  .setUnderlay("night_sky").setEffect("negate")).generate("night_sky.png")!, cloudinary: cloudinary)
Underlay Image

by Daniel Mendoza