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:
Ruby:
cl_image_tag("pasta.jpg")
PHP v1:
cl_image_tag("pasta.jpg")
PHP v2:
(new ImageTag('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>
Vue.js:
<cld-image publicId="pasta.jpg" >
</cld-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)
The following PNG image was uploaded to Cloudinary with the 'hexagon_sample' public ID:
Ruby:
cl_image_tag("hexagon_sample.png")
PHP v1:
cl_image_tag("hexagon_sample.png")
PHP v2:
(new ImageTag('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>
Vue.js:
<cld-image publicId="hexagon_sample.png" >
</cld-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)
Now, you can use this image with the cutter
flag. For example, when applying it to an image with the 'pasta' public ID:
Ruby:
cl_image_tag("pasta.png", :transformation=>[
{:width=>173, :height=>200, :crop=>"fill"},
{:overlay=>"hexagon_sample", :flags=>"cutter"}
])
PHP v1:
cl_image_tag("pasta.png", array("transformation"=>array(
array("width"=>173, "height"=>200, "crop"=>"fill"),
array("overlay"=>"hexagon_sample", "flags"=>"cutter")
)))
PHP v2:
(new ImageTag('pasta.png'))
->resize(Resize::fill()->width(173)->height(200))
->reshape(Reshape::cutByImage(Source::image('hexagon_sample')));
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>
Vue.js:
<cld-image publicId="pasta.png" >
<cld-transformation width="173" height="200" crop="fill" />
<cld-transformation :overlay="hexagon_sample" flags="cutter" />
</cld-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)
You can also add the relative
flag to automatically adjust the dimensions of the mask to match the resulting image you need. For example:
Ruby:
cl_image_tag("pasta.png", :overlay=>"hexagon_sample", :flags=>["cutter", "relative"], :width=>1.0, :height=>1.0)
PHP v1:
cl_image_tag("pasta.png", array("overlay"=>"hexagon_sample", "flags"=>array("cutter", "relative"), "width"=>"1.0", "height"=>"1.0"))
PHP v2:
(new ImageTag('pasta.png'))
->reshape(
Reshape::cutByImage(Source::image('hexagon_sample')
->transformation((new ImageTransformation())
->resize(Resize::scale()->width(1.0)->height(1.0)
->relative()
))));
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>
Vue.js:
<cld-image publicId="pasta.png" >
<cld-transformation :overlay="hexagon_sample" flags={["cutter", "relative"]} width="1.0" height="1.0" />
</cld-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)
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 v1:
cl_image_tag("hexagon_feather_sample.png")
PHP v2:
(new ImageTag('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>
Vue.js:
<cld-image publicId="hexagon_feather_sample.png" >
</cld-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)
And here's a sample result while creating a 200x220 face detection based thumbnail of an uploaded image:
Ruby:
cl_image_tag("face_left.png", :transformation=>[
{:width=>200, :height=>220, :gravity=>"face", :crop=>"thumb"},
{:overlay=>"hexagon_feather_sample", :flags=>"cutter"}
])
PHP v1:
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")
)))
PHP v2:
(new ImageTag('face_left.png'))
->resize(Resize::thumbnail()->width(200)->height(220)->gravity(Gravity::focusOn(FocusOn::face())))
->reshape(Reshape::cutByImage(Source::image('hexagon_feather_sample')));
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>
Vue.js:
<cld-image publicId="face_left.png" >
<cld-transformation width="200" height="220" gravity="face" crop="thumb" />
<cld-transformation :overlay="hexagon_feather_sample" flags="cutter" />
</cld-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)