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:
Copy to clipboard
cl_image_tag("night_sky.jpg")
PHP:
Copy to clipboard
cl_image_tag("night_sky.jpg")
Python:
Copy to clipboard
CloudinaryImage("night_sky.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("night_sky.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("night_sky.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('night_sky.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("night_sky.jpg")
React:
Copy to clipboard
<Image publicId="night_sky.jpg" >

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

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

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("night_sky.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("night_sky.jpg");
iOS:
Copy to clipboard
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:
Copy to clipboard
cl_image_tag("ring2.png")
PHP:
Copy to clipboard
cl_image_tag("ring2.png")
Python:
Copy to clipboard
CloudinaryImage("ring2.png").image()
Node.js:
Copy to clipboard
cloudinary.image("ring2.png")
Java:
Copy to clipboard
cloudinary.url().imageTag("ring2.png");
JS:
Copy to clipboard
cloudinary.imageTag('ring2.png').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("ring2.png")
React:
Copy to clipboard
<Image publicId="ring2.png" >

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

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

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("ring2.png")
Android:
Copy to clipboard
MediaManager.get().url().generate("ring2.png");
iOS:
Copy to clipboard
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:
Copy to clipboard
cl_image_tag("night_sky.jpg", :transformation=>[
  {:overlay=>"ring2", :radius=>"max", :width=>200, :height=>200},
  {:effect=>"cut_out", :flags=>"layer_apply"}
  ])
PHP:
Copy to clipboard
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:
Copy to clipboard
CloudinaryImage("night_sky.jpg").image(transformation=[
  {'overlay': "ring2", 'radius': "max", 'width': 200, 'height': 200},
  {'effect': "cut_out", 'flags': "layer_apply"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("night_sky.jpg", {transformation: [
  {overlay: "ring2", radius: "max", width: 200, height: 200},
  {effect: "cut_out", flags: "layer_apply"}
  ]})
Java:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<Image publicId="night_sky.jpg" >
  <Transformation overlay="ring2" radius="max" width="200" height="200" />
  <Transformation effect="cut_out" flags="layer_apply" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="night_sky.jpg" >
  <cld-transformation overlay="ring2" radius="max" width="200" height="200" />
  <cld-transformation effect="cut_out" flags="layer_apply" />
</cld-image>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
cl_image_tag("hexagon_feather_sample.png")
PHP:
Copy to clipboard
cl_image_tag("hexagon_feather_sample.png")
Python:
Copy to clipboard
CloudinaryImage("hexagon_feather_sample.png").image()
Node.js:
Copy to clipboard
cloudinary.image("hexagon_feather_sample.png")
Java:
Copy to clipboard
cloudinary.url().imageTag("hexagon_feather_sample.png");
JS:
Copy to clipboard
cloudinary.imageTag('hexagon_feather_sample.png').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("hexagon_feather_sample.png")
React:
Copy to clipboard
<Image publicId="hexagon_feather_sample.png" >

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

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

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

And here's a sample result:

Ruby:
Copy to clipboard
cl_image_tag("night_sky.jpg", :transformation=>[
  {:width=>200, :height=>220, :overlay=>"hexagon_feather_sample"},
  {:effect=>"cut_out", :flags=>"layer_apply"}
  ])
PHP:
Copy to clipboard
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:
Copy to clipboard
CloudinaryImage("night_sky.jpg").image(transformation=[
  {'width': 200, 'height': 220, 'overlay': "hexagon_feather_sample"},
  {'effect': "cut_out", 'flags': "layer_apply"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("night_sky.jpg", {transformation: [
  {width: 200, height: 220, overlay: "hexagon_feather_sample"},
  {effect: "cut_out", flags: "layer_apply"}
  ]})
Java:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<Image publicId="night_sky.jpg" >
  <Transformation width="200" height="220" overlay="hexagon_feather_sample" />
  <Transformation effect="cut_out" flags="layer_apply" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="night_sky.jpg" >
  <cld-transformation width="200" height="220" overlay="hexagon_feather_sample" />
  <cld-transformation effect="cut_out" flags="layer_apply" />
</cld-image>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
cl_image_tag("night_sky.png", :transformation=>[
  {:width=>500, :overlay=>"cloudinary_icon"},
  {:effect=>"cut_out", :flags=>"layer_apply"},
  {:underlay=>"night_sky", :effect=>"negate"}
  ])
PHP:
Copy to clipboard
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:
Copy to clipboard
CloudinaryImage("night_sky.png").image(transformation=[
  {'width': 500, 'overlay': "cloudinary_icon"},
  {'effect': "cut_out", 'flags': "layer_apply"},
  {'underlay': "night_sky", 'effect': "negate"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("night_sky.png", {transformation: [
  {width: 500, overlay: "cloudinary_icon"},
  {effect: "cut_out", flags: "layer_apply"},
  {underlay: "night_sky", effect: "negate"}
  ]})
Java:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="night_sky.png" >
  <cld-transformation width="500" overlay="cloudinary_icon" />
  <cld-transformation effect="cut_out" flags="layer_apply" />
  <cld-transformation underlay="night_sky" effect="negate" />
</cld-image>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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