Using content aware padding
There are many cases where you need to adjust the background of your images.
There are many cases where you need to adjust the background of your images.
Rotating and flipping videos on Cloudinary is a cakewalk. To rotate a video to an angle you desire, set the angle parameter. To mirror a video and vertically or horizontally flip it, set vflip
or hflip
as the angle value. Examples:
To add custom engravings to your products, such as gadgets like watches, electronic devices, and the like, you could use the paid tools on the market. Why not leverage Cloudinary to do so? It’s a simple tool that seamlessly delivers excellent results—for free.
cl_image_tag("scout-chrono.png", :variables=>[["$text", "!Sample Text!"]], :transformation=>[ {:quality=>"auto", :flags=>"lossy"}, {:overlay=>{:font_family=>"futura", :font_size=>50, :text=>"%24%28text%29"}, :color=>"white", :gravity=>"center", :y=>-189, :x=>1}, {:width=>250, :crop=>"scale"} ])
cl_image_tag("scout-chrono.png", array("variables"=>array("$text"=>"!Sample Text!"), "transformation"=>array( array("quality"=>"auto", "flags"=>"lossy"), array("overlay"=>array("font_family"=>"futura", "font_size"=>50, "text"=>"%24%28text%29"), "color"=>"white", "gravity"=>"center", "y"=>-189, "x"=>1), array("width"=>250, "crop"=>"scale") )))
(new ImageTag('scout-chrono.png')) ->addVariable(Variable::set('text', 'Sample Text')) ->delivery(Delivery::format(Format::auto()) ->lossy()) ->delivery(Delivery::quality(Quality::auto())) ->overlay( Overlay::source(Source::text('$(text)', (new TextStyle('futura', 50))) ->textColor(Color::WHITE)) ->position((new Position()) ->gravity(Gravity::compass(Compass::center())) ->offsetX(1)->offsetY(-189))) ->resize(Resize::scale()->width(250));
CloudinaryImage("scout-chrono.png").image(variables={"$text": "!Sample Text!"}, transformation=[ {'quality': "auto", 'flags': "lossy"}, {'overlay': {'font_family': "futura", 'font_size': 50, 'text': "%24%28text%29"}, 'color': "white", 'gravity': "center", 'y': -189, 'x': 1}, {'width': 250, 'crop': "scale"} ])
cloudinary.image("scout-chrono.png", {variables: [["$text", "!Sample Text!"]], transformation: [ {quality: "auto", flags: "lossy"}, {overlay: {font_family: "futura", font_size: 50, text: "%24%28text%29"}, color: "white", gravity: "center", y: -189, x: 1}, {width: 250, crop: "scale"} ]})
cloudinary.url().transformation(new Transformation() .variables(variable("$text","!Sample Text!")).chain() .quality("auto").flags("lossy").chain() .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("white").gravity("center").y(-189).x(1).chain() .width(250).crop("scale")).imageTag("scout-chrono.png");
cloudinary.imageTag('scout-chrono.png', {variables: [["$text", "!Sample Text!"]], transformation: [ {quality: "auto", flags: "lossy"}, {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "white", gravity: "center", y: -189, x: 1}, {width: 250, crop: "scale"} ]}).toHtml();
$.cloudinary.image("scout-chrono.png", {variables: [["$text", "!Sample Text!"]], transformation: [ {quality: "auto", flags: "lossy"}, {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "white", gravity: "center", y: -189, x: 1}, {width: 250, crop: "scale"} ]})
<Image publicId="scout-chrono.png" variables={[["$text", "!Sample Text!"]]}> <Transformation quality="auto" flags="lossy" /> <Transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="white" gravity="center" y="-189" x="1" /> <Transformation width="250" crop="scale" /> </Image>
<cld-image publicId="scout-chrono.png" :variables="[['$text', '!Sample Text!']]"> <cld-transformation quality="auto" flags="lossy" /> <cld-transformation :overlay="{fontFamily: 'futura', fontSize: 50, text: '%24%28text%29'}" color="white" gravity="center" y="-189" x="1" /> <cld-transformation width="250" crop="scale" /> </cld-image>
<cl-image public-id="scout-chrono.png" variables="[['$text', '!Sample Text!']]"> <cl-transformation quality="auto" flags="lossy"> </cl-transformation> <cl-transformation overlay="text:futura_50:%24%28text%29" color="white" gravity="center" y="-189" x="1"> </cl-transformation> <cl-transformation width="250" crop="scale"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Quality("auto").Flags("lossy").Chain() .Overlay(new TextLayer().FontFamily("futura").FontSize(50).Text("%24%28text%29")).Color("white").Gravity("center").Y(-189).X(1).Chain() .Width(250).Crop("scale")).BuildImageTag("scout-chrono.png")
MediaManager.get().url().transformation(new Transformation() .variables(variable("$text","!Sample Text!")).chain() .quality("auto").flags("lossy").chain() .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("white").gravity("center").y(-189).x(1).chain() .width(250).crop("scale")).generate("scout-chrono.png");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setQuality("auto").setFlags("lossy").chain() .setOverlay("text:futura_50:%24%28text%29").setColor("white").setGravity("center").setY(-189).setX(1).chain() .setWidth(250).setCrop("scale")).generate("scout-chrono.png")!, cloudinary: cloudinary)
Adding watermarks to videos on Cloudinary yields many enhancements, involving only a few simple steps. The sections below describe the various scenarios along with examples.
Do you know that, with Cloudinary, you can access and dynamically render the context metadata stored centric to an image into a text overlay in real time? You can then can quickly output product information directly on an image to support merchandising efforts.
cl_image_tag("courtfrasco.jpg", :variables=>[["$offer", "ctx:!offer!"], ["$title", "ctx:!title!"]], :transformation=>[ {:width=>200, :crop=>"scale"}, {:overlay=>{:font_family=>"arial", :font_size=>20, :text=>"%24%28offer%29"}, :y=>0.4, :color=>"red"}, {:overlay=>{:font_family=>"arial", :font_size=>22, :font_weight=>"bold", :text=>"%24%28title%29"}, :y=>0.28} ])
cl_image_tag("courtfrasco.jpg", array("variables"=>array("$offer"=>"ctx:!offer!", "$title"=>"ctx:!title!"), "transformation"=>array( array("width"=>200, "crop"=>"scale"), array("overlay"=>array("font_family"=>"arial", "font_size"=>20, "text"=>"%24%28offer%29"), "y"=>"0.4", "color"=>"red"), array("overlay"=>array("font_family"=>"arial", "font_size"=>22, "font_weight"=>"bold", "text"=>"%24%28title%29"), "y"=>"0.28") )))
(new ImageTag('courtfrasco.jpg')) ->resize(Resize::scale()->width(200)) ->addVariable(Variable::setFromContext('offer', 'offer')) ->overlay( Overlay::source(Source::text('$(offer)', (new TextStyle('arial', 20))) ->textColor(Color::RED)) ->position((new Position()) ->offsetY(0.4))) ->addVariable(Variable::setFromContext('title', 'title')) ->overlay( Overlay::source( Source::text('$(title)', (new TextStyle('arial', 22)) ->fontWeight(FontWeight::bold()))) ->position((new Position()) ->offsetY(0.28) ));
CloudinaryImage("courtfrasco.jpg").image(variables={"$offer": "ctx:!offer!", "$title": "ctx:!title!"}, transformation=[ {'width': 200, 'crop': "scale"}, {'overlay': {'font_family': "arial", 'font_size': 20, 'text': "%24%28offer%29"}, 'y': "0.4", 'color': "red"}, {'overlay': {'font_family': "arial", 'font_size': 22, 'font_weight': "bold", 'text': "%24%28title%29"}, 'y': "0.28"} ])
cloudinary.image("courtfrasco.jpg", {variables: [["$offer", "ctx:!offer!"], ["$title", "ctx:!title!"]], transformation: [ {width: 200, crop: "scale"}, {overlay: {font_family: "arial", font_size: 20, text: "%24%28offer%29"}, y: "0.4", color: "red"}, {overlay: {font_family: "arial", font_size: 22, font_weight: "bold", text: "%24%28title%29"}, y: "0.28"} ]})
cloudinary.url().transformation(new Transformation() .variables(variable("$offer","ctx:!offer!"),variable("$title","ctx:!title!")).chain() .width(200).crop("scale").chain() .overlay(new TextLayer().fontFamily("arial").fontSize(20).text("%24%28offer%29")).y(0.4).color("red").chain() .overlay(new TextLayer().fontFamily("arial").fontSize(22).fontWeight("bold").text("%24%28title%29")).y(0.28)).imageTag("courtfrasco.jpg");
cloudinary.imageTag('courtfrasco.jpg', {variables: [["$offer", "ctx:!offer!"], ["$title", "ctx:!title!"]], transformation: [ {width: 200, crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(20).text("%24%28offer%29"), y: "0.4", color: "red"}, {overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(22).fontWeight("bold").text("%24%28title%29"), y: "0.28"} ]}).toHtml();
$.cloudinary.image("courtfrasco.jpg", {variables: [["$offer", "ctx:!offer!"], ["$title", "ctx:!title!"]], transformation: [ {width: 200, crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(20).text("%24%28offer%29"), y: "0.4", color: "red"}, {overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(22).fontWeight("bold").text("%24%28title%29"), y: "0.28"} ]})
<Image publicId="courtfrasco.jpg" variables={[["$offer", "ctx:!offer!"], ["$title", "ctx:!title!"]]}> <Transformation width="200" crop="scale" /> <Transformation overlay={{fontFamily: "arial", fontSize: 20, text: "%24%28offer%29"}} y="0.4" color="red" /> <Transformation overlay={{fontFamily: "arial", fontSize: 22, fontWeight: "bold", text: "%24%28title%29"}} y="0.28" /> </Image>
<cld-image publicId="courtfrasco.jpg" :variables="[['$offer', 'ctx:!offer!'], ['$title', 'ctx:!title!']]"> <cld-transformation width="200" crop="scale" /> <cld-transformation :overlay="{fontFamily: 'arial', fontSize: 20, text: '%24%28offer%29'}" y="0.4" color="red" /> <cld-transformation :overlay="{fontFamily: 'arial', fontSize: 22, fontWeight: 'bold', text: '%24%28title%29'}" y="0.28" /> </cld-image>
<cl-image public-id="courtfrasco.jpg" variables="[['$offer', 'ctx:!offer!'], ['$title', 'ctx:!title!']]"> <cl-transformation width="200" crop="scale"> </cl-transformation> <cl-transformation overlay="text:arial_20:%24%28offer%29" y="0.4" color="red"> </cl-transformation> <cl-transformation overlay="text:arial_22_bold:%24%28title%29" y="0.28"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(200).Crop("scale").Chain() .Overlay(new TextLayer().FontFamily("arial").FontSize(20).Text("%24%28offer%29")).Y(0.4).Color("red").Chain() .Overlay(new TextLayer().FontFamily("arial").FontSize(22).FontWeight("bold").Text("%24%28title%29")).Y(0.28)).BuildImageTag("courtfrasco.jpg")
MediaManager.get().url().transformation(new Transformation() .variables(variable("$offer","ctx:!offer!"),variable("$title","ctx:!title!")).chain() .width(200).crop("scale").chain() .overlay(new TextLayer().fontFamily("arial").fontSize(20).text("%24%28offer%29")).y(0.4).color("red").chain() .overlay(new TextLayer().fontFamily("arial").fontSize(22).fontWeight("bold").text("%24%28title%29")).y(0.28)).generate("courtfrasco.jpg");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(200).setCrop("scale").chain() .setOverlay("text:arial_20:%24%28offer%29").setY(0.4).setColor("red").chain() .setOverlay("text:arial_22_bold:%24%28title%29").setY(0.28)).generate("courtfrasco.jpg")!, cloudinary: cloudinary)
You can add text dynamically to the image by using overlays with syntax l_
in the URL.
Here's an example of a URL with on-the-fly generated text transformation:
Dynamic style
Center an object within an image with a solid background. Do this by first trimming the background around the object (e_trim
) and then pad (c_lpad
) and resize the canvas to the image's initial width (w_iw
) and height (h_ih
).
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).
You don't have to wait to go to a theme park to take an old-timey photograph with your family. Instead, you can use Cloudinary to quickly and easily create this effect on any of your current images.
cl_image_tag("mac-bubbles.jpg", array("transformation"=>array( array("width"=>1000, "crop"=>"scale"), array("overlay"=>"torn-paper", "width"=>"1.0", "height"=>"1.0", "flags"=>array("relative", "cutter")), array("overlay"=>"torn-paper", "width"=>"1.0", "height"=>"1.0", "flags"=>"relative", "opacity"=>40), array("effect"=>"sepia") )))
(new ImageTag('mac-bubbles.jpg')) ->resize(Resize::scale()->width(1000)) ->reshape( Reshape::cutByImage(Source::image('torn-paper') ->transformation((new ImageTransformation()) ->resize(Resize::scale()->width(1.0)->height(1.0)->relative())))) ->overlay( Overlay::source(Source::image('torn-paper') ->transformation((new ImageTransformation()) ->resize(Resize::scale()->width(1.0)->height(1.0)->relative()) ->adjust(Adjust::opacity(40))))) ->effect(Effect::sepia());
CloudinaryImage("mac-bubbles.jpg").image(transformation=[ {'width': 1000, 'crop': "scale"}, {'overlay': "torn-paper", 'width': "1.0", 'height': "1.0", 'flags': ["relative", "cutter"]}, {'overlay': "torn-paper", 'width': "1.0", 'height': "1.0", 'flags': "relative", 'opacity': 40}, {'effect': "sepia"} ])
cloudinary.url().transformation(new Transformation() .width(1000).crop("scale").chain() .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative", "cutter").chain() .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative").opacity(40).chain() .effect("sepia")).imageTag("mac-bubbles.jpg");
cloudinary.imageTag('mac-bubbles.jpg', {transformation: [ {width: 1000, crop: "scale"}, {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: ["relative", "cutter"]}, {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: "relative", opacity: 40}, {effect: "sepia"} ]}).toHtml();
$.cloudinary.image("mac-bubbles.jpg", {transformation: [ {width: 1000, crop: "scale"}, {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: ["relative", "cutter"]}, {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: "relative", opacity: 40}, {effect: "sepia"} ]})
<Image publicId="mac-bubbles.jpg" > <Transformation width="1000" crop="scale" /> <Transformation overlay="torn-paper" width="1.0" height="1.0" flags={["relative", "cutter"]} /> <Transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40" /> <Transformation effect="sepia" /> </Image>
<cld-image publicId="mac-bubbles.jpg" > <cld-transformation width="1000" crop="scale" /> <cld-transformation :overlay="torn-paper" width="1.0" height="1.0" flags={["relative", "cutter"]} /> <cld-transformation :overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40" /> <cld-transformation effect="sepia" /> </cld-image>
<cl-image public-id="mac-bubbles.jpg" > <cl-transformation width="1000" crop="scale"> </cl-transformation> <cl-transformation overlay="torn-paper" width="1.0" height="1.0" flags={{["relative", "cutter"]}}> </cl-transformation> <cl-transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40"> </cl-transformation> <cl-transformation effect="sepia"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(1000).Crop("scale").Chain() .Overlay(new Layer().PublicId("torn-paper")).Width(1.0).Height(1.0).Flags("relative", "cutter").Chain() .Overlay(new Layer().PublicId("torn-paper")).Width(1.0).Height(1.0).Flags("relative").Opacity(40).Chain() .Effect("sepia")).BuildImageTag("mac-bubbles.jpg")
MediaManager.get().url().transformation(new Transformation() .width(1000).crop("scale").chain() .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative", "cutter").chain() .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative").opacity(40).chain() .effect("sepia")).generate("mac-bubbles.jpg");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(1000).setCrop("scale").chain() .setOverlay("torn-paper").setWidth(1.0).setHeight(1.0).setFlags("relative", "cutter").chain() .setOverlay("torn-paper").setWidth(1.0).setHeight(1.0).setFlags("relative").setOpacity(40).chain() .setEffect("sepia")).generate("mac-bubbles.jpg")!, cloudinary: cloudinary)
Creating a dynamic and engaging animated video preview (as opposed to a static image) can have a lot of benefits:
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.
imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").setTransformation(CLDTransformation().setEffect("pixelate")).generate("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")!, cloudinary: cloudinary)
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
).
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.
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%).
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.
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).
(new ImageTag('http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg')) ->overlay( Overlay::source(Source::image('badge') ->transformation((new ImageTransformation()) ->resize(Resize::scale()->width(30)))) ->position((new Position()) ->gravity(Gravity::focusOn(FocusOn::faces())))) ->deliveryType('fetch');
imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").setTransformation(CLDTransformation().setOverlay("badge").setGravity("faces").setWidth(30)).generate("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg")!, cloudinary: cloudinary)
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.
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.
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 is
10`.
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.