Cloudinary - Cookbook

Find recipes by 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).

Original

Custom shaped

Semi-transparency

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

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("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>
  <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("hexagon_sample").Flags("cutter")).BuildImageTag("pasta.png")

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(173).height(200).crop("fill").chain()
  .overlay("hexagon_sample").flags("cutter")).generate("pasta.png")

by Itay Taragano Jun 11, 2014

Tags:

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

Text texture

Fetch + texture

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/l_text:Coustard_200_bold:Flowers,fl_cutter/yellow_tulip.png

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" >
  <Transformation overlay="text:Coustard_200_bold:Flowers" flags="cutter" />
</Image>

Angular:

<cl-image public-id="yellow_tulip.png" >
  <cl-transformation overlay="text:Coustard_200_bold:Flowers" flags="cutter">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("text:Coustard_200_bold:Flowers").Flags("cutter")).BuildImageTag("yellow_tulip.png")

Android:

MediaManager.get().url().transformation(new Transformation().overlay("text:Coustard_200_bold:Flowers").flags("cutter")).generate("yellow_tulip.png")

by Itay Taragano Jun 11, 2014

Tags:

Generate a profile completeness meter

Generate a great looking profile completeness meter to notify your users of their progress. Whether it's for profile page details, survey progress, or just to show your users the percentage of the completion of any task. Use Cloudinary's powerful manipulation tools to generate just what you need.

Badge meter

User's thumbnail

Avatar meter

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/e_trim/e_colorize,co_white/b_rgb:D0CDCD/l_avatar,e_trim,w_1.0,h_0.6,c_crop,g_south/fl_layer_apply,g_south/l_text:Playball_40:60%25,co_white,y_80/w_200,c_scale/avatar.jpg

Ruby:

cl_image_tag("avatar.jpg", :transformation=>[
  {:effect=>"trim"},
  {:effect=>"colorize", :color=>"white"},
  {:background=>"#D0CDCD"},
  {:overlay=>"avatar", :effect=>"trim", :width=>1.0, :height=>0.6, :gravity=>"south", :crop=>"crop"},
  {:flags=>"layer_apply", :gravity=>"south"},
  {:overlay=>"text:Playball_40:60%2525", :color=>"white", :y=>80},
  {:width=>200, :crop=>"scale"}
  ])

PHP:

cl_image_tag("avatar.jpg", array("transformation"=>array(
  array("effect"=>"trim"),
  array("effect"=>"colorize", "color"=>"white"),
  array("background"=>"#D0CDCD"),
  array("overlay"=>"avatar", "effect"=>"trim", "width"=>1.0, "height"=>0.6, "gravity"=>"south", "crop"=>"crop"),
  array("flags"=>"layer_apply", "gravity"=>"south"),
  array("overlay"=>"text:Playball_40:60%2525", "color"=>"white", "y"=>80),
  array("width"=>200, "crop"=>"scale")
  )))

Python:

CloudinaryImage("avatar.jpg").image(transformation=[
  {"effect": "trim"},
  {"effect": "colorize", "color": "white"},
  {"background": "#D0CDCD"},
  {"overlay": "avatar", "effect": "trim", "width": 1.0, "height": 0.6, "gravity": "south", "crop": "crop"},
  {"flags": "layer_apply", "gravity": "south"},
  {"overlay": "text:Playball_40:60%2525", "color": "white", "y": 80},
  {"width": 200, "crop": "scale"}
  ])

Node.js:

cloudinary.image("avatar.jpg", {transformation: [
  {effect: "trim"},
  {effect: "colorize", color: "white"},
  {background: "#D0CDCD"},
  {overlay: "avatar", effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"},
  {flags: "layer_apply", gravity: "south"},
  {overlay: "text:Playball_40:60%2525", color: "white", y: 80},
  {width: 200, crop: "scale"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .effect("trim").chain()
  .effect("colorize").color("white").chain()
  .background("#D0CDCD").chain()
  .overlay("avatar").effect("trim").width(1.0).height(0.6).gravity("south").crop("crop").chain()
  .flags("layer_apply").gravity("south").chain()
  .overlay("text:Playball_40:60%2525").color("white").y(80).chain()
  .width(200).crop("scale")).imageTag("avatar.jpg")

JS:

cl.imageTag('avatar.jpg', {transformation: [
  {effect: "trim"},
  {effect: "colorize", color: "white"},
  {background: "#D0CDCD"},
  {overlay: "avatar", effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"},
  {flags: "layer_apply", gravity: "south"},
  {overlay: "text:Playball_40:60%2525", color: "white", y: 80},
  {width: 200, crop: "scale"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("avatar.jpg", {transformation: [
  {effect: "trim"},
  {effect: "colorize", color: "white"},
  {background: "#D0CDCD"},
  {overlay: "avatar", effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"},
  {flags: "layer_apply", gravity: "south"},
  {overlay: "text:Playball_40:60%2525", color: "white", y: 80},
  {width: 200, crop: "scale"}
  ]})

React:

<Image publicId="avatar.jpg" >
  <Transformation effect="trim" />
  <Transformation effect="colorize" color="white" />
  <Transformation background="#D0CDCD" />
  <Transformation overlay="avatar" effect="trim" width="1.0" height="0.6" gravity="south" crop="crop" />
  <Transformation flags="layer_apply" gravity="south" />
  <Transformation overlay="text:Playball_40:60%2525" color="white" y="80" />
  <Transformation width="200" crop="scale" />
</Image>

Angular:

<cl-image public-id="avatar.jpg" >
  <cl-transformation effect="trim">
  </cl-transformation>
  <cl-transformation effect="colorize" color="white">
  </cl-transformation>
  <cl-transformation background="#D0CDCD">
  </cl-transformation>
  <cl-transformation overlay="avatar" effect="trim" width="1.0" height="0.6" gravity="south" crop="crop">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="south">
  </cl-transformation>
  <cl-transformation overlay="text:Playball_40:60%2525" color="white" y="80">
  </cl-transformation>
  <cl-transformation width="200" crop="scale">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("trim").Chain()
  .Effect("colorize").Color("white").Chain()
  .Background("#D0CDCD").Chain()
  .Overlay("avatar").Effect("trim").Width(1.0).Height(0.6).Gravity("south").Crop("crop").Chain()
  .Flags("layer_apply").Gravity("south").Chain()
  .Overlay("text:Playball_40:60%2525").Color("white").Y(80).Chain()
  .Width(200).Crop("scale")).BuildImageTag("avatar.jpg")

Android:

MediaManager.get().url().transformation(new Transformation()
  .effect("trim").chain()
  .effect("colorize").color("white").chain()
  .background("#D0CDCD").chain()
  .overlay("avatar").effect("trim").width(1.0).height(0.6).gravity("south").crop("crop").chain()
  .flags("layer_apply").gravity("south").chain()
  .overlay("text:Playball_40:60%2525").color("white").y(80).chain()
  .width(200).crop("scale")).generate("avatar.jpg")

by Itay Taragano Jul 28, 2014

Tags:

Pixelate an image or a region

Apply a pixelization effect to an image by setting the effect parameter to pixelate (e_pixelate in URLs). You can choose to pixelate the whole image or just a certain region of the image, and the size of the squares is customizable.

Original

Pixeling an image

Pixeling a region

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/fetch/e_pixelate/http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg

Ruby:

cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", :effect=>"pixelate", :type=>"fetch")

PHP:

cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", array("effect"=>"pixelate", "type"=>"fetch"))

Python:

CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg").image(effect="pixelate", type="fetch")

Node.js:

cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate", type: "fetch"})

Java:

cloudinary.url().transformation(new Transformation().effect("pixelate")).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")

JS:

cl.imageTag('http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg', {effect: "pixelate", type: "fetch"}).toHtml();

jQuery:

$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate", type: "fetch"})

React:

<Image publicId="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <Transformation effect="pixelate" />
</Image>

Angular:

<cl-image public-id="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <cl-transformation effect="pixelate">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("pixelate")).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("pixelate")).type("fetch").generate("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")

by Itay Taragano Jul 19, 2015

Tags:

Color a picture

Color an image to any other color simply by setting the effect parameter to colorize (e_colorize in URLs), then set the color you want as the value of the color parameter (co in URLs). The color can be given by either it's name (e.g., green) or by an RGB value (e.g., 00FF00).

Original

Solid colorizing

Custom intensity

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/e_colorize,co_purple/smartphone.png

Ruby:

cl_image_tag("smartphone.png", :effect=>"colorize", :color=>"purple")

PHP:

cl_image_tag("smartphone.png", array("effect"=>"colorize", "color"=>"purple"))

Python:

CloudinaryImage("smartphone.png").image(effect="colorize", color="purple")

Node.js:

cloudinary.image("smartphone.png", {effect: "colorize", color: "purple"})

Java:

cloudinary.url().transformation(new Transformation().effect("colorize").color("purple")).imageTag("smartphone.png")

JS:

cl.imageTag('smartphone.png', {effect: "colorize", color: "purple"}).toHtml();

jQuery:

$.cloudinary.image("smartphone.png", {effect: "colorize", color: "purple"})

React:

<Image publicId="smartphone.png" >
  <Transformation effect="colorize" color="purple" />
</Image>

Angular:

<cl-image public-id="smartphone.png" >
  <cl-transformation effect="colorize" color="purple">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("colorize").Color("purple")).BuildImageTag("smartphone.png")

Android:

MediaManager.get().url().transformation(new Transformation().effect("colorize").color("purple")).generate("smartphone.png")

by Itay Taragano Jul 19, 2015

Tags:

Image rotation

Rotate an image by setting the angle parameter (a in URLs) to a given value representing the degree of rotation. A positive value rotates the image clockwise while a negative value rotates it counterclockwise.

Original

Rotated 90°

Rotated overlay

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/a_90/sea_shell.jpg

Ruby:

cl_image_tag("sea_shell.jpg", :angle=>90)

PHP:

cl_image_tag("sea_shell.jpg", array("angle"=>90))

Python:

CloudinaryImage("sea_shell.jpg").image(angle=90)

Node.js:

cloudinary.image("sea_shell.jpg", {angle: 90})

Java:

cloudinary.url().transformation(new Transformation().angle(90)).imageTag("sea_shell.jpg")

JS:

cl.imageTag('sea_shell.jpg', {angle: 90}).toHtml();

jQuery:

$.cloudinary.image("sea_shell.jpg", {angle: 90})

React:

<Image publicId="sea_shell.jpg" >
  <Transformation angle="90" />
</Image>

Angular:

<cl-image public-id="sea_shell.jpg" >
  <cl-transformation angle="90">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Angle(90)).BuildImageTag("sea_shell.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().angle(90)).generate("sea_shell.jpg")

by Itay Taragano Jul 19, 2015

Tags:

Relative size overlays

Resize overlays to a given percentage of the main image, either related to width, height or both by setting the flags parameter to relative (fl_relative in URLs) while also setting the width and/or height parameters to the percentage value you need, represented by a decimal value (e.g., 0.4 for 40%).

Main image

100% width-related

Including text

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/black_bar.png

Ruby:

cl_image_tag("black_bar.png")

PHP:

cl_image_tag("black_bar.png")

Python:

CloudinaryImage("black_bar.png").image()

Node.js:

cloudinary.image("black_bar.png")

Java:

cloudinary.url().imageTag("black_bar.png")

JS:

cl.imageTag('black_bar.png').toHtml();

jQuery:

$.cloudinary.image("black_bar.png")

React:

<Image publicId="black_bar.png" >

</Image>

Angular:

<cl-image public-id="black_bar.png" >

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.BuildImageTag("black_bar.png")

Android:

MediaManager.get().url().generate("black_bar.png")

by Itay Taragano Jul 19, 2015

Tags:

Change image opacity

Change the image's opacity level by setting the opacity parameter (o in URLs) to a value between 0 to 100 which represents the visibility percentage. Control the opacity level of either the main image or overlaid images.

Original

50% opacity

Flashlight effect

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/o_50/sheep.jpg

Ruby:

cl_image_tag("sheep.jpg", :opacity=>50)

PHP:

cl_image_tag("sheep.jpg", array("opacity"=>50))

Python:

CloudinaryImage("sheep.jpg").image(opacity=50)

Node.js:

cloudinary.image("sheep.jpg", {opacity: 50})

Java:

cloudinary.url().transformation(new Transformation().opacity(50)).imageTag("sheep.jpg")

JS:

cl.imageTag('sheep.jpg', {opacity: 50}).toHtml();

jQuery:

$.cloudinary.image("sheep.jpg", {opacity: 50})

React:

<Image publicId="sheep.jpg" >
  <Transformation opacity="50" />
</Image>

Angular:

<cl-image public-id="sheep.jpg" >
  <cl-transformation opacity="50">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Opacity(50)).BuildImageTag("sheep.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().opacity(50)).generate("sheep.jpg")

by Itay Taragano Jul 19, 2015

Tags:

Overlay an image over detected faces

Overlay another image of your choice on top of the faces which are automatically detected in your image. This is done by setting the overlay parameter (l in URLs) to the overlay image's public ID while setting the gravity parameter to faces (g_faces in URLs).

Original

Faces overlay

Funny overlay

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/fetch/l_badge,g_faces,w_30/http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg

Ruby:

cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", :overlay=>"badge", :gravity=>"faces", :width=>30, :type=>"fetch")

PHP:

cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", array("overlay"=>"badge", "gravity"=>"faces", "width"=>30, "type"=>"fetch"))

Python:

CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg").image(overlay="badge", gravity="faces", width=30, type="fetch")

Node.js:

cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", {overlay: "badge", gravity: "faces", width: 30, type: "fetch"})

Java:

cloudinary.url().transformation(new Transformation().overlay("badge").gravity("faces").width(30)).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg")

JS:

cl.imageTag('http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg', {overlay: "badge", gravity: "faces", width: 30, type: "fetch"}).toHtml();

jQuery:

$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", {overlay: "badge", gravity: "faces", width: 30, type: "fetch"})

React:

<Image publicId="http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg" type="fetch">
  <Transformation overlay="badge" gravity="faces" width="30" />
</Image>

Angular:

<cl-image public-id="http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg" type="fetch">
  <cl-transformation overlay="badge" gravity="faces" width="30">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("badge").Gravity("faces").Width(30)).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().overlay("badge").gravity("faces").width(30)).type("fetch").generate("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg")

by Itay Taragano Jul 19, 2015

Tags:

Blur or pixelate faces

Hide faces in your images by telling Cloudinary to either blur or automatically pixelate the detected faces. This is done by setting the effect parameter to either blur_faces or pixelate_faces (e_blur_faces or e_pixelate_faces in URLs). The level of blurring and the size of the pixel squares can customized.

Original

Blur faces

Pixelate faces

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/e_blur_faces/young_couple.jpg

Ruby:

cl_image_tag("young_couple.jpg", :effect=>"blur_faces")

PHP:

cl_image_tag("young_couple.jpg", array("effect"=>"blur_faces"))

Python:

CloudinaryImage("young_couple.jpg").image(effect="blur_faces")

Node.js:

cloudinary.image("young_couple.jpg", {effect: "blur_faces"})

Java:

cloudinary.url().transformation(new Transformation().effect("blur_faces")).imageTag("young_couple.jpg")

JS:

cl.imageTag('young_couple.jpg', {effect: "blur_faces"}).toHtml();

jQuery:

$.cloudinary.image("young_couple.jpg", {effect: "blur_faces"})

React:

<Image publicId="young_couple.jpg" >
  <Transformation effect="blur_faces" />
</Image>

Angular:

<cl-image public-id="young_couple.jpg" >
  <cl-transformation effect="blur_faces">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("blur_faces")).BuildImageTag("young_couple.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("blur_faces")).generate("young_couple.jpg")

by Itay Taragano Jul 19, 2015

Tags:

Add a border to images

Add a border to your images by setting the value of the border parameter (bo in URLs). The border's color, width and opacity can be customized dynamically, and borders can be applied either on main images or on overlaid images.

Original

Bordered

Colored circle

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/bo_2px_solid_black/face_top.jpg

Ruby:

cl_image_tag("face_top.jpg", :border=>"2px_solid_black")

PHP:

cl_image_tag("face_top.jpg", array("border"=>"2px_solid_black"))

Python:

CloudinaryImage("face_top.jpg").image(border="2px_solid_black")

Node.js:

cloudinary.image("face_top.jpg", {border: "2px_solid_black"})

Java:

cloudinary.url().transformation(new Transformation().border("2px_solid_black")).imageTag("face_top.jpg")

JS:

cl.imageTag('face_top.jpg', {border: "2px_solid_black"}).toHtml();

jQuery:

$.cloudinary.image("face_top.jpg", {border: "2px_solid_black"})

React:

<Image publicId="face_top.jpg" >
  <Transformation border="2px_solid_black" />
</Image>

Angular:

<cl-image public-id="face_top.jpg" >
  <cl-transformation border="2px_solid_black">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Border("2px_solid_black")).BuildImageTag("face_top.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().border("2px_solid_black")).generate("face_top.jpg")

by Itay Taragano Jul 19, 2015

Tags:

Trim photo background

Apply the trim filter to remove the edges around the image. Do this by setting the effect parameter to trim (e_trim in URLs). You can customize the color similarity tolerance between 0 and 100. The default level is10`.

Original

Trimmed

Custom level

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/e_trim/business_man_padded.jpg

Ruby:

cl_image_tag("business_man_padded.jpg", :effect=>"trim")

PHP:

cl_image_tag("business_man_padded.jpg", array("effect"=>"trim"))

Python:

CloudinaryImage("business_man_padded.jpg").image(effect="trim")

Node.js:

cloudinary.image("business_man_padded.jpg", {effect: "trim"})

Java:

cloudinary.url().transformation(new Transformation().effect("trim")).imageTag("business_man_padded.jpg")

JS:

cl.imageTag('business_man_padded.jpg', {effect: "trim"}).toHtml();

jQuery:

$.cloudinary.image("business_man_padded.jpg", {effect: "trim"})

React:

<Image publicId="business_man_padded.jpg" >
  <Transformation effect="trim" />
</Image>

Angular:

<cl-image public-id="business_man_padded.jpg" >
  <cl-transformation effect="trim">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("trim")).BuildImageTag("business_man_padded.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("trim")).generate("business_man_padded.jpg")

by Itay Taragano Aug 05, 2014

Tags:

Adjust the hue value of images

Create a different mixture of colors for your images with the Hue filter. This can be applied by setting the effect parameter to hue (e_hue in URLs). The hue level can be customized.

Original

Default level

Custom level

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/e_hue/white_chicken.jpg

Ruby:

cl_image_tag("white_chicken.jpg", :effect=>"hue")

PHP:

cl_image_tag("white_chicken.jpg", array("effect"=>"hue"))

Python:

CloudinaryImage("white_chicken.jpg").image(effect="hue")

Node.js:

cloudinary.image("white_chicken.jpg", {effect: "hue"})

Java:

cloudinary.url().transformation(new Transformation().effect("hue")).imageTag("white_chicken.jpg")

JS:

cl.imageTag('white_chicken.jpg', {effect: "hue"}).toHtml();

jQuery:

$.cloudinary.image("white_chicken.jpg", {effect: "hue"})

React:

<Image publicId="white_chicken.jpg" >
  <Transformation effect="hue" />
</Image>

Angular:

<cl-image public-id="white_chicken.jpg" >
  <cl-transformation effect="hue">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("hue")).BuildImageTag("white_chicken.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("hue")).generate("white_chicken.jpg")

by Itay Taragano Aug 05, 2014

Tags:

Increase fill light of photos

Fill your images with a lighting effect. This is very handy when dealing with darker images. How? Set the effect parameter to fill_light (e_fill_light in URLs). You can control the fill light level, the range is between -100 and 100. The default value is 0.

Original

Default level

Custom level

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/e_fill_light/8jsb1xofxdqamu2rzwt9q.jpg

Ruby:

cl_image_tag("8jsb1xofxdqamu2rzwt9q.jpg", :effect=>"fill_light")

PHP:

cl_image_tag("8jsb1xofxdqamu2rzwt9q.jpg", array("effect"=>"fill_light"))

Python:

CloudinaryImage("8jsb1xofxdqamu2rzwt9q.jpg").image(effect="fill_light")

Node.js:

cloudinary.image("8jsb1xofxdqamu2rzwt9q.jpg", {effect: "fill_light"})

Java:

cloudinary.url().transformation(new Transformation().effect("fill_light")).imageTag("8jsb1xofxdqamu2rzwt9q.jpg")

JS:

cl.imageTag('8jsb1xofxdqamu2rzwt9q.jpg', {effect: "fill_light"}).toHtml();

jQuery:

$.cloudinary.image("8jsb1xofxdqamu2rzwt9q.jpg", {effect: "fill_light"})

React:

<Image publicId="8jsb1xofxdqamu2rzwt9q.jpg" >
  <Transformation effect="fill_light" />
</Image>

Angular:

<cl-image public-id="8jsb1xofxdqamu2rzwt9q.jpg" >
  <cl-transformation effect="fill_light">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("fill_light")).BuildImageTag("8jsb1xofxdqamu2rzwt9q.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("fill_light")).generate("8jsb1xofxdqamu2rzwt9q.jpg")

by Itay Taragano Aug 05, 2014

Tags:

Apply a sepia effect

Add a warm, antique feeling to your photos using the 'Sepia' filter effect. This is done by setting the effect parameter to sepia (e_sepia in URLs). You can also customize the strength of the Sepia effect.

Original

Sepia

Custom strength

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/e_sepia/coast.jpg

Ruby:

cl_image_tag("coast.jpg", :effect=>"sepia")

PHP:

cl_image_tag("coast.jpg", array("effect"=>"sepia"))

Python:

CloudinaryImage("coast.jpg").image(effect="sepia")

Node.js:

cloudinary.image("coast.jpg", {effect: "sepia"})

Java:

cloudinary.url().transformation(new Transformation().effect("sepia")).imageTag("coast.jpg")

JS:

cl.imageTag('coast.jpg', {effect: "sepia"}).toHtml();

jQuery:

$.cloudinary.image("coast.jpg", {effect: "sepia"})

React:

<Image publicId="coast.jpg" >
  <Transformation effect="sepia" />
</Image>

Angular:

<cl-image public-id="coast.jpg" >
  <cl-transformation effect="sepia">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("sepia")).BuildImageTag("coast.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("sepia")).generate("coast.jpg")

by Itay Taragano Aug 05, 2014

Tags:

Convert image to grayscale

Convert images to grayscale by setting the effect parameter to grayscale (e_grayscale in URLs). You can add further transformations in order to achieve the exact result you need.

Original

Grayscale

Gradient fade

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/e_grayscale/happy_dog.jpg

Ruby:

cl_image_tag("happy_dog.jpg", :effect=>"grayscale")

PHP:

cl_image_tag("happy_dog.jpg", array("effect"=>"grayscale"))

Python:

CloudinaryImage("happy_dog.jpg").image(effect="grayscale")

Node.js:

cloudinary.image("happy_dog.jpg", {effect: "grayscale"})

Java:

cloudinary.url().transformation(new Transformation().effect("grayscale")).imageTag("happy_dog.jpg")

JS:

cl.imageTag('happy_dog.jpg', {effect: "grayscale"}).toHtml();

jQuery:

$.cloudinary.image("happy_dog.jpg", {effect: "grayscale"})

React:

<Image publicId="happy_dog.jpg" >
  <Transformation effect="grayscale" />
</Image>

Angular:

<cl-image public-id="happy_dog.jpg" >
  <cl-transformation effect="grayscale">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("grayscale")).BuildImageTag("happy_dog.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("grayscale")).generate("happy_dog.jpg")

by Itay Taragano Aug 05, 2014

Tags:

Extract frames from an animated GIF

Extract frames from an animated GIF, you can choose which frame to deliver, apply any further image manipulations including resizing, cropping, overlays and much more.

Original

1st frame-Default

10th frame

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/bored_animation.jpg

Ruby:

cl_image_tag("bored_animation.jpg")

PHP:

cl_image_tag("bored_animation.jpg")

Python:

CloudinaryImage("bored_animation.jpg").image()

Node.js:

cloudinary.image("bored_animation.jpg")

Java:

cloudinary.url().imageTag("bored_animation.jpg")

JS:

cl.imageTag('bored_animation.jpg').toHtml();

jQuery:

$.cloudinary.image("bored_animation.jpg")

React:

<Image publicId="bored_animation.jpg" >

</Image>

Angular:

<cl-image public-id="bored_animation.jpg" >

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.BuildImageTag("bored_animation.jpg")

Android:

MediaManager.get().url().generate("bored_animation.jpg")

by Itay Taragano Aug 05, 2014

Tags:

Animated GIF manipulation

Transform animated GIFs just like any other image. Use Cloudinary's powerful image transformation tools to manipulate your animated GIFs just like you do for other standard still images.

Original

Rotated

Adding text

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/w_0.5/cloudinary_animation.gif

Ruby:

cl_image_tag("cloudinary_animation.gif", :width=>0.5, :crop=>"scale")

PHP:

cl_image_tag("cloudinary_animation.gif", array("width"=>0.5, "crop"=>"scale"))

Python:

CloudinaryImage("cloudinary_animation.gif").image(width=0.5, crop="scale")

Node.js:

cloudinary.image("cloudinary_animation.gif", {width: "0.5", crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(0.5).crop("scale")).imageTag("cloudinary_animation.gif")

JS:

cl.imageTag('cloudinary_animation.gif', {width: "0.5", crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("cloudinary_animation.gif", {width: "0.5", crop: "scale"})

React:

<Image publicId="cloudinary_animation.gif" >
  <Transformation width="0.5" crop="scale" />
</Image>

Angular:

<cl-image public-id="cloudinary_animation.gif" >
  <cl-transformation width="0.5" crop="scale">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.5).Crop("scale")).BuildImageTag("cloudinary_animation.gif")

Android:

MediaManager.get().url().transformation(new Transformation().width(0.5).crop("scale")).generate("cloudinary_animation.gif")

by Itay Taragano Aug 05, 2014

Tags:

Adding watermarks as an overlay

Add your watermark as an overlay on top of any image by setting the overlay parameter (l in URLs) as your watermark image's public ID. The overlaid image's size and position is customizable.

Overlaying

Scale and position

Semi-transparent

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon/envelope.jpg

Ruby:

cl_image_tag("envelope.jpg", :overlay=>"cloudinary_icon")

PHP:

cl_image_tag("envelope.jpg", array("overlay"=>"cloudinary_icon"))

Python:

CloudinaryImage("envelope.jpg").image(overlay="cloudinary_icon")

Node.js:

cloudinary.image("envelope.jpg", {overlay: "cloudinary_icon"})

Java:

cloudinary.url().transformation(new Transformation().overlay("cloudinary_icon")).imageTag("envelope.jpg")

JS:

cl.imageTag('envelope.jpg', {overlay: "cloudinary_icon"}).toHtml();

jQuery:

$.cloudinary.image("envelope.jpg", {overlay: "cloudinary_icon"})

React:

<Image publicId="envelope.jpg" >
  <Transformation overlay="cloudinary_icon" />
</Image>

Angular:

<cl-image public-id="envelope.jpg" >
  <cl-transformation overlay="cloudinary_icon">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("cloudinary_icon")).BuildImageTag("envelope.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().overlay("cloudinary_icon")).generate("envelope.jpg")

by Itay Taragano Jun 15, 2014

Tags:

Converting an image format

Convert your images to any other format either by simply changing the extension of the file, or by setting the format parameter. You can either covert the image's format while uploading or upload the image as is and dynamically convert its format on delivery.

GIF

Circle cropped PNG

Low quality JPG

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/nice_beach.gif

Ruby:

cl_image_tag("nice_beach.gif")

PHP:

cl_image_tag("nice_beach.gif")

Python:

CloudinaryImage("nice_beach.gif").image()

Node.js:

cloudinary.image("nice_beach.gif")

Java:

cloudinary.url().imageTag("nice_beach.gif")

JS:

cl.imageTag('nice_beach.gif').toHtml();

jQuery:

$.cloudinary.image("nice_beach.gif")

React:

<Image publicId="nice_beach.gif" >

</Image>

Angular:

<cl-image public-id="nice_beach.gif" >

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.BuildImageTag("nice_beach.gif")

Android:

MediaManager.get().url().generate("nice_beach.gif")

by Itay Taragano Jun 15, 2014

Tags:

More recipes

Cloudinary Cookbook