Cloudinary cookbook background
Cloudinary Cookbook
← View popular recipes
Find recipes by tags:
View all tags

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

Here's the original image:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/pasta.jpg
Ruby:
cl_image_tag("pasta.jpg")
PHP:
cl_image_tag("pasta.jpg")
Python:
CloudinaryImage("pasta.jpg").image()
Node.js:
cloudinary.image("pasta.jpg")
Java:
cloudinary.url().imageTag("pasta.jpg");
JS:
cloudinary.imageTag('pasta.jpg').toHtml();
jQuery:
$.cloudinary.image("pasta.jpg")
React:
<Image publicId="pasta.jpg" >

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

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

The following PNG image was uploaded to Cloudinary with the 'hexagon_sample' public ID:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/hexagon_sample.png
Ruby:
cl_image_tag("hexagon_sample.png")
PHP:
cl_image_tag("hexagon_sample.png")
Python:
CloudinaryImage("hexagon_sample.png").image()
Node.js:
cloudinary.image("hexagon_sample.png")
Java:
cloudinary.url().imageTag("hexagon_sample.png");
JS:
cloudinary.imageTag('hexagon_sample.png').toHtml();
jQuery:
$.cloudinary.image("hexagon_sample.png")
React:
<Image publicId="hexagon_sample.png" >

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

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

Now, you can use this image with the cutter flag. For example, when applying it to an image with the 'pasta' public ID:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_173,h_200,c_fill/l_hexagon_sample,fl_cutter/pasta.png
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(new Layer().publicId("hexagon_sample")).flags("cutter")).imageTag("pasta.png");
JS:
cloudinary.imageTag('pasta.png', {transformation: [
  {width: 173, height: 200, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("hexagon_sample"), flags: "cutter"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("pasta.png", {transformation: [
  {width: 173, height: 200, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("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(new Layer().PublicId("hexagon_sample")).Flags("cutter")).BuildImageTag("pasta.png")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(173).height(200).crop("fill").chain()
  .overlay(new Layer().publicId("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)
Custom shaped

You can also add the relative flag to automatically adjust the dimensions of the mask to match the resulting image you need. For example:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/l_hexagon_sample,fl_cutter.relative,w_1.0,h_1.0/pasta.png
Ruby:
cl_image_tag("pasta.png", :overlay=>"hexagon_sample", :flags=>["cutter", "relative"], :width=>1.0, :height=>1.0)
PHP:
cl_image_tag("pasta.png", array("overlay"=>"hexagon_sample", "flags"=>array("cutter", "relative"), "width"=>1.0, "height"=>1.0))
Python:
CloudinaryImage("pasta.png").image(overlay="hexagon_sample", flags=["cutter", "relative"], width=1.0, height=1.0)
Node.js:
cloudinary.image("pasta.png", {overlay: "hexagon_sample", flags: ["cutter", "relative"], width: "1.0", height: "1.0"})
Java:
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("hexagon_sample")).flags("cutter", "relative").width(1.0).height(1.0)).imageTag("pasta.png");
JS:
cloudinary.imageTag('pasta.png', {overlay: new cloudinary.Layer().publicId("hexagon_sample"), flags: ["cutter", "relative"], width: "1.0", height: "1.0"}).toHtml();
jQuery:
$.cloudinary.image("pasta.png", {overlay: new cloudinary.Layer().publicId("hexagon_sample"), flags: ["cutter", "relative"], width: "1.0", height: "1.0"})
React:
<Image publicId="pasta.png" >
  <Transformation overlay="hexagon_sample" flags={["cutter", "relative"]} width="1.0" height="1.0" />
</Image>
Angular:
<cl-image public-id="pasta.png" >
  <cl-transformation overlay="hexagon_sample" flags={{["cutter", "relative"]}} width="1.0" height="1.0">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("hexagon_sample")).Flags("cutter", "relative").Width(1.0).Height(1.0)).BuildImageTag("pasta.png")
Android:
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("hexagon_sample")).flags("cutter", "relative").width(1.0).height(1.0)).generate("pasta.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("hexagon_sample").setFlags("cutter", "relative").setWidth(1.0).setHeight(1.0)).generate("pasta.png")!, cloudinary: cloudinary)
Adjustable size

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

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/hexagon_feather_sample.png
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 while creating a 200x220 face detection based thumbnail of an uploaded image:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_200,h_220,c_thumb,g_face/l_hexagon_feather_sample,fl_cutter/face_left.png
Ruby:
cl_image_tag("face_left.png", :transformation=>[
  {:width=>200, :height=>220, :gravity=>"face", :crop=>"thumb"},
  {:overlay=>"hexagon_feather_sample", :flags=>"cutter"}
  ])
PHP:
cl_image_tag("face_left.png", array("transformation"=>array(
  array("width"=>200, "height"=>220, "gravity"=>"face", "crop"=>"thumb"),
  array("overlay"=>"hexagon_feather_sample", "flags"=>"cutter")
  )))
Python:
CloudinaryImage("face_left.png").image(transformation=[
  {'width': 200, 'height': 220, 'gravity': "face", 'crop': "thumb"},
  {'overlay': "hexagon_feather_sample", 'flags': "cutter"}
  ])
Node.js:
cloudinary.image("face_left.png", {transformation: [
  {width: 200, height: 220, gravity: "face", crop: "thumb"},
  {overlay: "hexagon_feather_sample", flags: "cutter"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(200).height(220).gravity("face").crop("thumb").chain()
  .overlay(new Layer().publicId("hexagon_feather_sample")).flags("cutter")).imageTag("face_left.png");
JS:
cloudinary.imageTag('face_left.png', {transformation: [
  {width: 200, height: 220, gravity: "face", crop: "thumb"},
  {overlay: new cloudinary.Layer().publicId("hexagon_feather_sample"), flags: "cutter"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("face_left.png", {transformation: [
  {width: 200, height: 220, gravity: "face", crop: "thumb"},
  {overlay: new cloudinary.Layer().publicId("hexagon_feather_sample"), flags: "cutter"}
  ]})
React:
<Image publicId="face_left.png" >
  <Transformation width="200" height="220" gravity="face" crop="thumb" />
  <Transformation overlay="hexagon_feather_sample" flags="cutter" />
</Image>
Angular:
<cl-image public-id="face_left.png" >
  <cl-transformation width="200" height="220" gravity="face" crop="thumb">
  </cl-transformation>
  <cl-transformation overlay="hexagon_feather_sample" flags="cutter">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(200).Height(220).Gravity("face").Crop("thumb").Chain()
  .Overlay(new Layer().PublicId("hexagon_feather_sample")).Flags("cutter")).BuildImageTag("face_left.png")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(200).height(220).gravity("face").crop("thumb").chain()
  .overlay(new Layer().publicId("hexagon_feather_sample")).flags("cutter")).generate("face_left.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(200).setHeight(220).setGravity("face").setCrop("thumb").chain()
  .setOverlay("hexagon_feather_sample").setFlags("cutter")).generate("face_left.png")!, cloudinary: cloudinary)
Semi-transparency

by Itay Taragano
Tags: