Cloudinary's visual effects and enhancements are a great way to easily change the way your images look within your site or application. For example, you can change the shape of your images, blur and pixelate them, apply quality improvements, make color adjustments, change the look and feel with fun effects, apply filters, and much more. You can also apply multiple effects to an image by applying each effect as a separate chained transformation .
Some transformations use fairly simple syntax , whereas others require more explanation - examples of these types of transformations are shown in the advanced syntax examples .
Besides the examples on this page, there are many more effects available and you can find a full list of them, including examples, by checking out our URL transformation reference .
Here are some popular options for using effects and artistic enhancements. Click each image to see the URL parameters applied in each case:
Cartoonify your images
Add a vignette to your images
Generate low quality image placeholders
Add image outlines
Here are some examples of effects and enhancements that use a simple transformation syntax. Click the links to see the full syntax for each transformation in the URL transformation reference.
Apply an artistic filter using the art
effect, specifying one of the filters shown.
Original image:
Filters:
al_dente
athena
audrey
aurora
daguerre
eucalyptus
fes
frost
hairspray
hokusai
incognito
linen
peacock
primavera
quartz
red_rock
refresh
sizzle
sonnet
ukulele
zorro
Ruby (cloudinary 1.x):
cl_image_tag(" horses.jpg " , :effect =>" art:zorro " )
PHP (cloudinary_php 2.x):
(new ImageTag (' horses.jpg ' ))
->effect(Effect ::artisticFilter(
ArtisticFilter ::zorro()));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" horses.jpg " , array (" effect " =>" art:zorro " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" horses.jpg " ).image(effect=" art:zorro " )
Node.js (cloudinary 1.x):
cloudinary.image(" horses.jpg " , {effect : " art:zorro " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().effect(" art:zorro " )).imageTag(" horses.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" horses.jpg " ).effect(artisticFilter(" zorro " ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' horses.jpg ' , {effect : " art:zorro " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" horses.jpg " , {effect : " art:zorro " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" horses.jpg " ).effect(artisticFilter(" zorro " ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" horses.jpg " >
<Transformation effect =" art:zorro " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" horses.jpg " ).effect(artisticFilter(" zorro " ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" horses.jpg " >
<cld-transformation effect =" art:zorro " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" horses.jpg " ).effect(artisticFilter(" zorro " ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" horses.jpg " >
<cl-transformation effect=" art:zorro " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(" art:zorro " )).BuildImageTag(" horses.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(" art:zorro " )).generate(" horses.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().effect(" art:zorro " )).generate(" horses.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" horses.jpg " )
effect(Effect.artisticFilter(
ArtisticFilter.zorro()))
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('horses.jpg').transformation(Transformation()
.effect(Effect.artisticFilter(
ArtisticFilter.zorro())));
Dart (cloudinary_dart 0.x):
cloudinary.image('horses.jpg').transformation(Transformation()
.effect(Effect.artisticFilter(
ArtisticFilter.zorro())));
See full syntax : e_art in the Transformation Reference .
Make an image look more like a cartoon using the cartoonify
effect.
Ruby (cloudinary 1.x):
cl_image_tag(" horses.jpg " , :effect =>" cartoonify " )
PHP (cloudinary_php 2.x):
(new ImageTag (' horses.jpg ' ))
->effect(Effect ::cartoonify());
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" horses.jpg " , array (" effect " =>" cartoonify " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" horses.jpg " ).image(effect=" cartoonify " )
Node.js (cloudinary 1.x):
cloudinary.image(" horses.jpg " , {effect : " cartoonify " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().effect(" cartoonify " )).imageTag(" horses.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" horses.jpg " ).effect(cartoonify());
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' horses.jpg ' , {effect : " cartoonify " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" horses.jpg " , {effect : " cartoonify " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" horses.jpg " ).effect(cartoonify());
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" horses.jpg " >
<Transformation effect =" cartoonify " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" horses.jpg " ).effect(cartoonify());
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" horses.jpg " >
<cld-transformation effect =" cartoonify " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" horses.jpg " ).effect(cartoonify());
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" horses.jpg " >
<cl-transformation effect=" cartoonify " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(" cartoonify " )).BuildImageTag(" horses.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(" cartoonify " )).generate(" horses.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().effect(" cartoonify " )).generate(" horses.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" horses.jpg " )
effect(Effect.cartoonify())
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('horses.jpg').transformation(Transformation()
.effect(Effect.cartoonify()));
Dart (cloudinary_dart 0.x):
cloudinary.image('horses.jpg').transformation(Transformation()
.effect(Effect.cartoonify()));
See full syntax : e_cartoonify in the Transformation Reference .
Adjust the opacity of an image using the opacity transformation (o
in URLs). Specify a value between 0 and 100, representing the percentage of transparency, where 100 means completely opaque and 0 is completely transparent. In this case the image is delivered with 30% opacity:
Ruby (cloudinary 1.x):
cl_image_tag(" horses.jpg " , :opacity =>30 )
PHP (cloudinary_php 2.x):
(new ImageTag (' horses.jpg ' ))
->adjust(Adjust ::opacity(30 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" horses.jpg " , array (" opacity " =>30 ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" horses.jpg " ).image(opacity=30 )
Node.js (cloudinary 1.x):
cloudinary.image(" horses.jpg " , {opacity : 30 })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().opacity(30 )).imageTag(" horses.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" horses.jpg " ).adjust(opacity(30 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' horses.jpg ' , {opacity : 30 }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" horses.jpg " , {opacity : 30 })
React (@cloudinary/react 1.x):
new CloudinaryImage(" horses.jpg " ).adjust(opacity(30 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" horses.jpg " >
<Transformation opacity =" 30 " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" horses.jpg " ).adjust(opacity(30 ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" horses.jpg " >
<cld-transformation opacity =" 30 " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" horses.jpg " ).adjust(opacity(30 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" horses.jpg " >
<cl-transformation opacity=" 30 " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Opacity(30 )).BuildImageTag(" horses.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOpacity(30 )).generate(" horses.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().opacity(30 )).generate(" horses.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" horses.jpg " )
adjust(Adjust.opacity(30 ))
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('horses.jpg').transformation(Transformation()
.adjust(Adjust.opacity(30)));
Dart (cloudinary_dart 0.x):
cloudinary.image('horses.jpg').transformation(Transformation()
.adjust(Adjust.opacity(30)));
See full syntax : o (opacity) in the Transformation Reference .
Pixelate an image using the pixelate
effect.
Ruby (cloudinary 1.x):
cl_image_tag(" horses.jpg " , :effect =>" pixelate:20 " )
PHP (cloudinary_php 2.x):
(new ImageTag (' horses.jpg ' ))
->effect(Effect ::pixelate()->squareSize(20 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" horses.jpg " , array (" effect " =>" pixelate:20 " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" horses.jpg " ).image(effect=" pixelate:20 " )
Node.js (cloudinary 1.x):
cloudinary.image(" horses.jpg " , {effect : " pixelate:20 " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().effect(" pixelate:20 " )).imageTag(" horses.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" horses.jpg " ).effect(pixelate().squareSize(20 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' horses.jpg ' , {effect : " pixelate:20 " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" horses.jpg " , {effect : " pixelate:20 " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" horses.jpg " ).effect(pixelate().squareSize(20 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" horses.jpg " >
<Transformation effect =" pixelate:20 " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" horses.jpg " ).effect(pixelate().squareSize(20 ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" horses.jpg " >
<cld-transformation effect =" pixelate:20 " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" horses.jpg " ).effect(pixelate().squareSize(20 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" horses.jpg " >
<cl-transformation effect=" pixelate:20 " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(" pixelate:20 " )).BuildImageTag(" horses.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(" pixelate:20 " )).generate(" horses.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().effect(" pixelate:20 " )).generate(" horses.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" horses.jpg " )
effect(Effect.pixelate() { squareSize(20 ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('horses.jpg').transformation(Transformation()
.effect(Effect.pixelate().squareSize(20)));
Dart (cloudinary_dart 0.x):
cloudinary.image('horses.jpg').transformation(Transformation()
.effect(Effect.pixelate().squareSize(20)));
See full syntax : e_pixelate in the Transformation Reference .
Change the colors of an image to shades of sepia using the sepia
effect.
Ruby (cloudinary 1.x):
cl_image_tag(" horses.jpg " , :effect =>" sepia " )
PHP (cloudinary_php 2.x):
(new ImageTag (' horses.jpg ' ))
->effect(Effect ::sepia());
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" horses.jpg " , array (" effect " =>" sepia " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" horses.jpg " ).image(effect=" sepia " )
Node.js (cloudinary 1.x):
cloudinary.image(" horses.jpg " , {effect : " sepia " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().effect(" sepia " )).imageTag(" horses.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" horses.jpg " ).effect(sepia());
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' horses.jpg ' , {effect : " sepia " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" horses.jpg " , {effect : " sepia " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" horses.jpg " ).effect(sepia());
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" horses.jpg " >
<Transformation effect =" sepia " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" horses.jpg " ).effect(sepia());
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" horses.jpg " >
<cld-transformation effect =" sepia " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" horses.jpg " ).effect(sepia());
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" horses.jpg " >
<cl-transformation effect=" sepia " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(" sepia " )).BuildImageTag(" horses.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(" sepia " )).generate(" horses.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().effect(" sepia " )).generate(" horses.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" horses.jpg " )
effect(Effect.sepia())
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('horses.jpg').transformation(Transformation()
.effect(Effect.sepia()));
Dart (cloudinary_dart 0.x):
cloudinary.image('horses.jpg').transformation(Transformation()
.effect(Effect.sepia()));
See full syntax : e_sepia in the Transformation Reference .
Fade the edges of images into the background using the vignette
effect.
Ruby (cloudinary 1.x):
cl_image_tag(" horses.jpg " , :effect =>" vignette " )
PHP (cloudinary_php 2.x):
(new ImageTag (' horses.jpg ' ))
->effect(Effect ::vignette());
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" horses.jpg " , array (" effect " =>" vignette " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" horses.jpg " ).image(effect=" vignette " )
Node.js (cloudinary 1.x):
cloudinary.image(" horses.jpg " , {effect : " vignette " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().effect(" vignette " )).imageTag(" horses.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" horses.jpg " ).effect(vignette());
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' horses.jpg ' , {effect : " vignette " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" horses.jpg " , {effect : " vignette " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" horses.jpg " ).effect(vignette());
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" horses.jpg " >
<Transformation effect =" vignette " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" horses.jpg " ).effect(vignette());
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" horses.jpg " >
<cld-transformation effect =" vignette " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" horses.jpg " ).effect(vignette());
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" horses.jpg " >
<cl-transformation effect=" vignette " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(" vignette " )).BuildImageTag(" horses.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(" vignette " )).generate(" horses.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().effect(" vignette " )).generate(" horses.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" horses.jpg " )
effect(Effect.vignette())
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('horses.jpg').transformation(Transformation()
.effect(Effect.vignette()));
Dart (cloudinary_dart 0.x):
cloudinary.image('horses.jpg').transformation(Transformation()
.effect(Effect.vignette()));
See full syntax : e_vignette in the Transformation Reference .
In general, most of the visual effects and enhancements can take an additional option to tailor the effect to your liking. For some, however, you may need to provide additional syntax and use some more complex concepts. It is important to understand how these advanced transformations work when attempting to use them. The sections below outline some of the more advanced transformations and help you to use these with your own assets.
Remember, there are many more transformations available and you can find a full list of them, including examples, by checking out our URL transformation reference .
3D lookup tables (3D LUTs) are used to map one color space to another. They can be used to adjust colors, contrast, and/or saturation, so that you can correct contrast, fix a camera's inability to see a particular color shade, or give a final finished look or a particular style to your image.
After uploading a .3dl
file to your product environment as a raw file, you can apply it to any image using the lut
property of the layer
parameter ( l_lut:
in URLs), followed by the LUT file name (including the .3dl
extension).
Below you can see the laydybug_top.jpg
image file in its original color, compared to the video with different LUT files applied. Below these is the code for applying one of the LUTs.
Original
with 'iwltbap_sedona' LUT
with 'iwltbap_aspen' LUT
Ruby (cloudinary 1.x):
cl_image_tag(" ladybug_top.jpg " , :overlay =>" lut:iwltbap_aspen.3dl " )
PHP (cloudinary_php 2.x):
(new ImageTag (' ladybug_top.jpg ' ))
->adjust(Adjust ::by3dLut(" iwltbap_aspen.3dl " ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" ladybug_top.jpg " , array (" overlay " =>" lut:iwltbap_aspen.3dl " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" ladybug_top.jpg " ).image(overlay=" lut:iwltbap_aspen.3dl " )
Node.js (cloudinary 1.x):
cloudinary.image(" ladybug_top.jpg " , {overlay : " lut:iwltbap_aspen.3dl " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId(" lut:iwltbap_aspen.3dl " ))).imageTag(" ladybug_top.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" ladybug_top.jpg " ).adjust(by3dLut(" iwltbap_aspen.3dl " ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' ladybug_top.jpg ' , {overlay : new cloudinary.Layer().publicId(" lut:iwltbap_aspen.3dl " )}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" ladybug_top.jpg " , {overlay : new cloudinary.Layer().publicId(" lut:iwltbap_aspen.3dl " )})
React (@cloudinary/react 1.x):
new CloudinaryImage(" ladybug_top.jpg " ).adjust(by3dLut(" iwltbap_aspen.3dl " ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" ladybug_top.jpg " >
<Transformation overlay =" lut:iwltbap_aspen.3dl " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" ladybug_top.jpg " ).adjust(by3dLut(" iwltbap_aspen.3dl " ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" ladybug_top.jpg " >
<cld-transformation :overlay =" lut:iwltbap_aspen.3dl " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" ladybug_top.jpg " ).adjust(by3dLut(" iwltbap_aspen.3dl " ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" ladybug_top.jpg " >
<cl-transformation overlay=" lut:iwltbap_aspen.3dl " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId(" lut:iwltbap_aspen.3dl " ))).BuildImageTag(" ladybug_top.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(" lut:iwltbap_aspen.3dl " )).generate(" ladybug_top.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId(" lut:iwltbap_aspen.3dl " ))).generate(" ladybug_top.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" ladybug_top.jpg " )
adjust(Adjust.by3dLut(" iwltbap_aspen.3dl " ))
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('ladybug_top.jpg').transformation(Transformation()
.adjust(Adjust.by3dLut("iwltbap_aspen.3dl")));
Dart (cloudinary_dart 0.x):
cloudinary.image('ladybug_top.jpg').transformation(Transformation()
.adjust(Adjust.by3dLut("iwltbap_aspen.3dl")));
See full syntax : l_lut in the Transformation Reference .
Use the background
parameter (b
in URLs) to set the background color of the image. The image background is visible when padding is added with one of the padding crop modes, when rounding corners, when adding overlays, and with semi-transparent PNGs and GIFs.
An opaque color can be set as an RGB hex triplet (e.g., b_rgb:3e2222
), a 3-digit RGB hex (e.g., b_rgb:777
) or a named color (e.g., b_green
). Cloudinary's client libraries also support a #
shortcut for RGB (e.g., setting background
to #3e2222
which is then translated to rgb:3e2222
).
For example, the uploaded image named sample
padded to a width and height of 300 pixels with a green background:
Ruby (cloudinary 1.x):
cl_image_tag(" sample.jpg " , :background =>" green " , :height =>300 , :width =>300 , :crop =>" pad " )
PHP (cloudinary_php 2.x):
(new ImageTag (' sample.jpg ' ))
->resize(Resize ::pad()->width(300 )
->height(300 )
->background(
Background ::color(Color ::GREEN ))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" sample.jpg " , array (" background " =>" green " , " height " =>300 , " width " =>300 , " crop " =>" pad " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" sample.jpg " ).image(background=" green " , height=300 , width=300 , crop=" pad " )
Node.js (cloudinary 1.x):
cloudinary.image(" sample.jpg " , {background : " green " , height : 300 , width : 300 , crop : " pad " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().background(" green " ).height(300 ).width(300 ).crop(" pad " )).imageTag(" sample.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" sample.jpg " ).resize(
pad()
.width(300 )
.height(300 )
.background(color(" green " ))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' sample.jpg ' , {background : " green " , height : 300 , width : 300 , crop : " pad " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" sample.jpg " , {background : " green " , height : 300 , width : 300 , crop : " pad " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" sample.jpg " ).resize(
pad()
.width(300 )
.height(300 )
.background(color(" green " ))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" sample.jpg " >
<Transformation background =" green " height =" 300 " width =" 300 " crop =" pad " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" sample.jpg " ).resize(
pad()
.width(300 )
.height(300 )
.background(color(" green " ))
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" sample.jpg " >
<cld-transformation background =" green " height =" 300 " width =" 300 " crop =" pad " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" sample.jpg " ).resize(
pad()
.width(300 )
.height(300 )
.background(color(" green " ))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" sample.jpg " >
<cl-transformation background=" green " height=" 300 " width=" 300 " crop=" pad " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background(" green " ).Height(300 ).Width(300 ).Crop(" pad " )).BuildImageTag(" sample.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground(" green " ).setHeight(300 ).setWidth(300 ).setCrop(" pad " )).generate(" sample.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().background(" green " ).height(300 ).width(300 ).crop(" pad " )).generate(" sample.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" sample.jpg " )
resize(Resize.pad() { width(300 )
height(300 )
background(
Background.color(Color .GREEN))
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('sample.jpg').transformation(Transformation()
.resize(Resize.pad().width(300)
.height(300)
.background(
Background.color(Color.GREEN))
));
Dart (cloudinary_dart 0.x):
cloudinary.image('sample.jpg').transformation(Transformation()
.resize(Resize.pad().width(300)
.height(300)
.background(
Background.color(Color.GREEN))
));
You can also use a 4-digit or 8-digit RGBA hex quadruplet for the background color, where the 4th hex value represents the alpha (opacity) value (e.g., co_rgb:3e222240
results in 25% opacity).
When using the background parameter to set the background color of a text overlay, you can also set the color to
predominant_contrast
. This selects the strongest contrasting color to the predominant color while taking all pixels in the image into account. For example,
l_text:Arial_30:foo,b_predominant_contrast
.
See full syntax : b (background) in the Transformation Reference .
You can automatically set the background color to the most prominent color in the image when applying one of the padding crop modes (pad , lpad , or mpad ) by setting the background
parameter to auto
(b_auto
in URLs). The parameter can also accept an additional value as follows:
b_auto:border
- selects the predominant color while taking only the image border pixels into account. This is the default option for b_auto
.
b_auto:predominant
- selects the predominant color while taking all pixels in the image into account.
b_auto:border_contrast
- selects the strongest contrasting color to the predominant color while taking only the image border pixels into account.
b_auto:predominant_contrast
- selects the strongest contrasting color to the predominant color while taking all pixels in the image into account.
b_auto:border
b_auto:predominant
b_auto:border_contrast
b_auto:predominant_contrast
For example, padding the sample
image to a width and height of 300 pixels, and with the background color set to the predominant color in the image:
Ruby (cloudinary 1.x):
cl_image_tag(" sample.jpg " , :background =>" auto:predominant " , :height =>300 , :width =>300 , :crop =>" pad " )
PHP (cloudinary_php 2.x):
(new ImageTag (' sample.jpg ' ))
->resize(Resize ::pad()->width(300 )
->height(300 )
->background(
Background ::predominant())
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" sample.jpg " , array (" background " =>" auto:predominant " , " height " =>300 , " width " =>300 , " crop " =>" pad " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" sample.jpg " ).image(background=" auto:predominant " , height=300 , width=300 , crop=" pad " )
Node.js (cloudinary 1.x):
cloudinary.image(" sample.jpg " , {background : " auto:predominant " , height : 300 , width : 300 , crop : " pad " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().background(" auto:predominant " ).height(300 ).width(300 ).crop(" pad " )).imageTag(" sample.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" sample.jpg " ).resize(
pad()
.width(300 )
.height(300 )
.background(predominant())
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' sample.jpg ' , {background : " auto:predominant " , height : 300 , width : 300 , crop : " pad " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" sample.jpg " , {background : " auto:predominant " , height : 300 , width : 300 , crop : " pad " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" sample.jpg " ).resize(
pad()
.width(300 )
.height(300 )
.background(predominant())
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" sample.jpg " >
<Transformation background =" auto:predominant " height =" 300 " width =" 300 " crop =" pad " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" sample.jpg " ).resize(
pad()
.width(300 )
.height(300 )
.background(predominant())
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" sample.jpg " >
<cld-transformation background =" auto:predominant " height =" 300 " width =" 300 " crop =" pad " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" sample.jpg " ).resize(
pad()
.width(300 )
.height(300 )
.background(predominant())
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" sample.jpg " >
<cl-transformation background=" auto:predominant " height=" 300 " width=" 300 " crop=" pad " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background(" auto:predominant " ).Height(300 ).Width(300 ).Crop(" pad " )).BuildImageTag(" sample.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground(" auto:predominant " ).setHeight(300 ).setWidth(300 ).setCrop(" pad " )).generate(" sample.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().background(" auto:predominant " ).height(300 ).width(300 ).crop(" pad " )).generate(" sample.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" sample.jpg " )
resize(Resize.pad() { width(300 )
height(300 )
background(
Background.predominant())
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('sample.jpg').transformation(Transformation()
.resize(Resize.pad().width(300)
.height(300)
.background(
Background.predominant())
));
Dart (cloudinary_dart 0.x):
cloudinary.image('sample.jpg').transformation(Transformation()
.resize(Resize.pad().width(300)
.height(300)
.background(
Background.predominant())
));
See full syntax : b_auto in the Transformation Reference .
Gradient fade You can also apply a padding gradient fade effect with the predominant colors in the image by adjusting the value of the b_auto
parameter as follows:
b_auto:[gradient_type]:[number]:[direction]
Where :
gradient_type
- one of the following values:
predominant_gradient
- base the gradient fade effect on the predominant colors in the image
predominant_gradient_contrast
- base the effect on the colors that contrast the predominant colors in the image
border_gradient
- base the gradient fade effect on the predominant colors in the border pixels of the image
border_gradient_contrast
- base the effect on the colors that contrast the predominant colors in the border pixels of the image
number
- the number of predominant colors to select. Possible values: 2
or 4
. Default: 2
direction
- if 2 colors are selected, this parameter specifies the direction to blend the 2 colors together (if 4 colors are selected each gets interpolated between the four corners). Possible values: horizontal
, vertical
, diagonal_desc
, and diagonal_asc
. Default: horizontal
predominant_gradient:2:diagonal_desc
predominant_gradient_contrast:4
Ruby (cloudinary 1.x):
cl_image_tag(" horse.jpg " , :background =>" auto:predominant_gradient_contrast:4 " , :height =>300 , :width =>300 , :crop =>" pad " )
PHP (cloudinary_php 2.x):
(new ImageTag (' horse.jpg ' ))
->resize(Resize ::pad()->width(300 )
->height(300 )
->background(
Background ::predominantGradient()
->contrast()
->gradientColors(4 )
)
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" horse.jpg " , array (" background " =>" auto:predominant_gradient_contrast:4 " , " height " =>300 , " width " =>300 , " crop " =>" pad " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" horse.jpg " ).image(background=" auto:predominant_gradient_contrast:4 " , height=300 , width=300 , crop=" pad " )
Node.js (cloudinary 1.x):
cloudinary.image(" horse.jpg " , {background : " auto:predominant_gradient_contrast:4 " , height : 300 , width : 300 , crop : " pad " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().background(" auto:predominant_gradient_contrast:4 " ).height(300 ).width(300 ).crop(" pad " )).imageTag(" horse.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" horse.jpg " ).resize(
pad()
.width(300 )
.height(300 )
.background(
predominantGradient()
.contrast()
.gradientColors(4 )
)
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' horse.jpg ' , {background : " auto:predominant_gradient_contrast:4 " , height : 300 , width : 300 , crop : " pad " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" horse.jpg " , {background : " auto:predominant_gradient_contrast:4 " , height : 300 , width : 300 , crop : " pad " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" horse.jpg " ).resize(
pad()
.width(300 )
.height(300 )
.background(
predominantGradient()
.contrast()
.gradientColors(4 )
)
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" horse.jpg " >
<Transformation background =" auto:predominant_gradient_contrast:4 " height =" 300 " width =" 300 " crop =" pad " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" horse.jpg " ).resize(
pad()
.width(300 )
.height(300 )
.background(
predominantGradient()
.contrast()
.gradientColors(4 )
)
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" horse.jpg " >
<cld-transformation background =" auto:predominant_gradient_contrast:4 " height =" 300 " width =" 300 " crop =" pad " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" horse.jpg " ).resize(
pad()
.width(300 )
.height(300 )
.background(
predominantGradient()
.contrast()
.gradientColors(4 )
)
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" horse.jpg " >
<cl-transformation background=" auto:predominant_gradient_contrast:4 " height=" 300 " width=" 300 " crop=" pad " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background(" auto:predominant_gradient_contrast:4 " ).Height(300 ).Width(300 ).Crop(" pad " )).BuildImageTag(" horse.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground(" auto:predominant_gradient_contrast:4 " ).setHeight(300 ).setWidth(300 ).setCrop(" pad " )).generate(" horse.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().background(" auto:predominant_gradient_contrast:4 " ).height(300 ).width(300 ).crop(" pad " )).generate(" horse.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" horse.jpg " )
resize(Resize.pad() { width(300 )
height(300 )
background(
Background.predominantGradient() {
contrast()
gradientColors(4 )
})
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('horse.jpg').transformation(Transformation()
.resize(Resize.pad().width(300)
.height(300)
.background(
Background.predominantGradient()
.contrast()
.gradientColors(4)
)
));
Dart (cloudinary_dart 0.x):
cloudinary.image('horse.jpg').transformation(Transformation()
.resize(Resize.pad().width(300)
.height(300)
.background(
Background.predominantGradient()
.contrast()
.gradientColors(4)
)
));
Custom color palette Add a custom palette to limit the selected color to one of the colors in the palette that you provide. Once the predominant color has been calculated then the closest color from the available palette is selected. Append a colon and then the value palette
followed by a list of colors, each separated by an underscore. For example, to automatically add padding and a palette that limits the possible choices to green, red and blue: b_auto:palette_red_green_blue
The palette can be used in combination with any of the various values for b_auto
, and the same color in the palette can be selected more than once when requesting multiple predominant colors. For example, padding to a width and height of 300 pixels, with a 4 color gradient fade in the auto colored padding, and limiting the possible colors to red, green, blue, and orange:
Ruby (cloudinary 1.x):
cl_image_tag(" horse.jpg " , :background =>" auto:predominant_gradient:4:palette_red_green_blue_orange " , :height =>300 , :width =>300 , :crop =>" pad " )
PHP (cloudinary_php 2.x):
(new ImageTag (' horse.jpg ' ))
->resize(Resize ::pad()->width(300 )
->height(300 )
->background(
Background ::predominantGradient()->gradientColors(4 )
->palette(Color ::RED ,Color ::GREEN ,Color ::BLUE ,Color ::ORANGE )
)
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" horse.jpg " , array (" background " =>" auto:predominant_gradient:4:palette_red_green_blue_orange " , " height " =>300 , " width " =>300 , " crop " =>" pad " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" horse.jpg " ).image(background=" auto:predominant_gradient:4:palette_red_green_blue_orange " , height=300 , width=300 , crop=" pad " )
Node.js (cloudinary 1.x):
cloudinary.image(" horse.jpg " , {background : " auto:predominant_gradient:4:palette_red_green_blue_orange " , height : 300 , width : 300 , crop : " pad " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().background(" auto:predominant_gradient:4:palette_red_green_blue_orange " ).height(300 ).width(300 ).crop(" pad " )).imageTag(" horse.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" horse.jpg " ).resize(
pad()
.width(300 )
.height(300 )
.background(
predominantGradient()
.gradientColors(4 )
.palette(" red " , " green " , " blue " , " orange " )
)
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' horse.jpg ' , {background : " auto:predominant_gradient:4:palette_red_green_blue_orange " , height : 300 , width : 300 , crop : " pad " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" horse.jpg " , {background : " auto:predominant_gradient:4:palette_red_green_blue_orange " , height : 300 , width : 300 , crop : " pad " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" horse.jpg " ).resize(
pad()
.width(300 )
.height(300 )
.background(
predominantGradient()
.gradientColors(4 )
.palette(" red " , " green " , " blue " , " orange " )
)
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" horse.jpg " >
<Transformation background =" auto:predominant_gradient:4:palette_red_green_blue_orange " height =" 300 " width =" 300 " crop =" pad " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" horse.jpg " ).resize(
pad()
.width(300 )
.height(300 )
.background(
predominantGradient()
.gradientColors(4 )
.palette(" red " , " green " , " blue " , " orange " )
)
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" horse.jpg " >
<cld-transformation background =" auto:predominant_gradient:4:palette_red_green_blue_orange " height =" 300 " width =" 300 " crop =" pad " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" horse.jpg " ).resize(
pad()
.width(300 )
.height(300 )
.background(
predominantGradient()
.gradientColors(4 )
.palette(" red " , " green " , " blue " , " orange " )
)
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" horse.jpg " >
<cl-transformation background=" auto:predominant_gradient:4:palette_red_green_blue_orange " height=" 300 " width=" 300 " crop=" pad " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background(" auto:predominant_gradient:4:palette_red_green_blue_orange " ).Height(300 ).Width(300 ).Crop(" pad " )).BuildImageTag(" horse.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground(" auto:predominant_gradient:4:palette_red_green_blue_orange " ).setHeight(300 ).setWidth(300 ).setCrop(" pad " )).generate(" horse.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().background(" auto:predominant_gradient:4:palette_red_green_blue_orange " ).height(300 ).width(300 ).crop(" pad " )).generate(" horse.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" horse.jpg " )
resize(Resize.pad() { width(300 )
height(300 )
background(
Background.predominantGradient() { gradientColors(4 )
palette(Color .RED,Color .GREEN,Color .BLUE,Color .ORANGE)
})
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('horse.jpg').transformation(Transformation()
.resize(Resize.pad().width(300)
.height(300)
.background(
Background.predominantGradient().gradientColors(4)
.palette(Color.RED,Color.GREEN,Color.BLUE,Color.ORANGE)
)
));
Dart (cloudinary_dart 0.x):
cloudinary.image('horse.jpg').transformation(Transformation()
.resize(Resize.pad().width(300)
.height(300)
.background(
Background.predominantGradient().gradientColors(4)
.palette(Color.RED,Color.GREEN,Color.BLUE,Color.ORANGE)
)
));
Gradient fade into padding Fade the image into the added padding by adding the gradient_fade
effect with a value of symmetric_pad
(e_gradient_fade:symmetric_pad
in URLs). The padding blends into the edge of the image with a strength indicated by an additional value, separated by a colon (Range: 0 to 100, Default: 20). Values for x and y can also be specified as a percentage (range: 0.0 to 1.0), or in pixels (integer values) to indicate how far into the image to apply the gradient effect. By default, the gradient is applied 30% into the image (x_0.3).
For example, padding the sample
image to a width and height of 300 pixels, with the background color set to the predominant color, and with a gradient fade effect, between the added padding and 50% into the image.
Ruby (cloudinary 1.x):
cl_image_tag(" sample.jpg " , :transformation =>[
{:background =>" auto:predominant " , :height =>300 , :width =>300 , :crop =>" pad " },
{:effect =>" gradient_fade:symmetric_pad " , :x =>0.5 }
])
PHP (cloudinary_php 2.x):
(new ImageTag (' sample.jpg ' ))
->resize(Resize ::pad()->width(300 )
->height(300 )
->background(
Background ::predominant())
)
->effect(Effect ::gradientFade()
->type(
GradientFade ::symmetricPad())
->horizontalStartPoint(0.5 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" sample.jpg " , array (" transformation " =>array (
array (" background " =>" auto:predominant " , " height " =>300 , " width " =>300 , " crop " =>" pad " ),
array (" effect " =>" gradient_fade:symmetric_pad " , " x " =>" 0.5 " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" sample.jpg " ).image(transformation=[
{' background ' : " auto:predominant " , ' height ' : 300 , ' width ' : 300 , ' crop ' : " pad " },
{' effect ' : " gradient_fade:symmetric_pad " , ' x ' : " 0.5 " }
])
Node.js (cloudinary 1.x):
cloudinary.image(" sample.jpg " , {transformation : [
{background : " auto:predominant " , height : 300 , width : 300 , crop : " pad " },
{effect : " gradient_fade:symmetric_pad " , x : " 0.5 " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.background(" auto:predominant " ).height(300 ).width(300 ).crop(" pad " ).chain()
.effect(" gradient_fade:symmetric_pad " ).x(0.5 )).imageTag(" sample.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" sample.jpg " )
.resize(
pad()
.width(300 )
.height(300 )
.background(predominant())
)
.effect(
gradientFade()
.type(symmetricPad())
.horizontalStartPoint(0.5 )
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' sample.jpg ' , {transformation : [
{background : " auto:predominant " , height : 300 , width : 300 , crop : " pad " },
{effect : " gradient_fade:symmetric_pad " , x : " 0.5 " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" sample.jpg " , {transformation : [
{background : " auto:predominant " , height : 300 , width : 300 , crop : " pad " },
{effect : " gradient_fade:symmetric_pad " , x : " 0.5 " }
]})
React (@cloudinary/react 1.x):
new CloudinaryImage(" sample.jpg " )
.resize(
pad()
.width(300 )
.height(300 )
.background(predominant())
)
.effect(
gradientFade()
.type(symmetricPad())
.horizontalStartPoint(0.5 )
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" sample.jpg " >
<Transformation background =" auto:predominant " height =" 300 " width =" 300 " crop =" pad " />
<Transformation effect =" gradient_fade:symmetric_pad " x =" 0.5 " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" sample.jpg " )
.resize(
pad()
.width(300 )
.height(300 )
.background(predominant())
)
.effect(
gradientFade()
.type(symmetricPad())
.horizontalStartPoint(0.5 )
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" sample.jpg " >
<cld-transformation background =" auto:predominant " height =" 300 " width =" 300 " crop =" pad " />
<cld-transformation effect =" gradient_fade:symmetric_pad " x =" 0.5 " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" sample.jpg " )
.resize(
pad()
.width(300 )
.height(300 )
.background(predominant())
)
.effect(
gradientFade()
.type(symmetricPad())
.horizontalStartPoint(0.5 )
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" sample.jpg " >
<cl-transformation background=" auto:predominant " height=" 300 " width=" 300 " crop=" pad " >
</ cl-transformation>
<cl-transformation effect="gradient_fade:symmetric_pad" x="0.5">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Background(" auto:predominant " ).Height(300 ).Width(300 ).Crop(" pad " ).Chain()
.Effect(" gradient_fade:symmetric_pad " ).X(0.5 )).BuildImageTag(" sample.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setBackground(" auto:predominant " ).setHeight(300 ).setWidth(300 ).setCrop(" pad " ).chain()
.setEffect(" gradient_fade:symmetric_pad " ).setX(0.5 )).generate(" sample.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.background(" auto:predominant " ).height(300 ).width(300 ).crop(" pad " ).chain()
.effect(" gradient_fade:symmetric_pad " ).x(0.5 )).generate(" sample.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" sample.jpg " )
resize(Resize.pad() { width(300 )
height(300 )
background(
Background.predominant())
})
effect(Effect.gradientFade() {
type(
GradientFade.symmetricPad())
horizontalStartPoint(0.5F ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('sample.jpg').transformation(Transformation()
.resize(Resize.pad().width(300)
.height(300)
.background(
Background.predominant())
)
.effect(Effect.gradientFade()
.type(
GradientFade.symmetricPad())
.horizontalStartPoint(0.5)));
Dart (cloudinary_dart 0.x):
cloudinary.image('sample.jpg').transformation(Transformation()
.resize(Resize.pad().width(300)
.height(300)
.background(
Background.predominant())
)
.effect(Effect.gradientFade()
.type(
GradientFade.symmetricPad())
.horizontalStartPoint(0.5)));
See full syntax : e_gradient_fade in the Transformation Reference .
Add a solid border around images with the border
parameter (bo
in URLs). The parameter accepts a value with a CSS-like format: width_style_color
(e.g., 3px_solid_black
).
An opaque color can be set as an RGB hex triplet (e.g., rgb:3e2222
), a 3-digit RGB hex (e.g., rgb:777
) or a named color (e.g., green
).
You can also use a 4-digit or 8-digit RGBA hex quadruplet for the color, where the 4th hex value represents the alpha (opacity) value (e.g., co_rgb:3e222240
results in 25% opacity).
Additionally, Cloudinary's client libraries also support a #
shortcut for RGB (e.g., setting color to #3e2222
which is then translated to rgb:3e2222
), and when using Cloudinary's client libraries, you can optionally set the border values programmatically instead of as a single string (e.g., :border => { :width => 4, :color => 'black' }
).
Currently only the 'solid' border style is supported.
For example, the uploaded jpeg image named sample delivered with a 5 pixel red border:
Ruby (cloudinary 1.x):
cl_image_tag(" sample.jpg " , :border =>" 5px_solid_red " )
PHP (cloudinary_php 2.x):
(new ImageTag (' sample.jpg ' ))
->border(Border ::solid(5 ,Color ::RED ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" sample.jpg " , array (" border " =>" 5px_solid_red " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" sample.jpg " ).image(border=" 5px_solid_red " )
Node.js (cloudinary 1.x):
cloudinary.image(" sample.jpg " , {border : " 5px_solid_red " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().border(" 5px_solid_red " )).imageTag(" sample.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" sample.jpg " ).border(solid(5 , " red " ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' sample.jpg ' , {border : " 5px_solid_red " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" sample.jpg " , {border : " 5px_solid_red " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" sample.jpg " ).border(solid(5 , " red " ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" sample.jpg " >
<Transformation border =" 5px_solid_red " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" sample.jpg " ).border(solid(5 , " red " ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" sample.jpg " >
<cld-transformation border =" 5px_solid_red " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" sample.jpg " ).border(solid(5 , " red " ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" sample.jpg " >
<cl-transformation border=" 5px_solid_red " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Border(" 5px_solid_red " )).BuildImageTag(" sample.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBorder(" 5px_solid_red " )).generate(" sample.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().border(" 5px_solid_red " )).generate(" sample.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" sample.jpg " )
border(Border .solid(5 ,Color .RED))
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('sample.jpg').transformation(Transformation()
.border(Border.solid(5,Color.RED)));
Dart (cloudinary_dart 0.x):
cloudinary.image('sample.jpg').transformation(Transformation()
.border(Border.solid(5,Color.RED)));
Borders are also useful for adding to overlays to clearly define the overlaying image, and also automatically adapt to any rounded corner transformations. For example, the base image given rounded corners with a 10 pixel grey border, and an overlay of the image of young_couple
resized to a 150x150 thumbnail with face detection and a black 3 pixel border, added to the northeast corner:
Ruby (cloudinary 1.x):
cl_image_tag(" lady.jpg " , :transformation =>[
{:width =>400 , :gravity =>" auto " , :crop =>" crop " },
{:border =>" 10px_solid_grey " , :radius =>75 },
{:overlay =>" young_couple " },
{:gravity =>" faces " , :height =>150 , :width =>150 , :crop =>" thumb " },
{:border =>" 3px_solid_black " },
{:flags =>" layer_apply " , :gravity =>" north_east " }
])
PHP (cloudinary_php 2.x):
(new ImageTag (' lady.jpg ' ))
->resize(Resize ::crop()->width(400 )
->gravity(
Gravity ::autoGravity())
)
->border(Border ::solid(10 ,Color ::GREY )
->roundCorners(
RoundCorners ::byRadius(75 ))
)
->overlay(Overlay ::source(
Source ::image(" young_couple " )
->transformation((new Transformation ())
->resize(Resize ::thumbnail()->width(150 )
->height(150 )
->gravity(
Gravity ::focusOn(
FocusOn ::faces()))
)
->border(Border ::solid(3 ,Color ::BLACK )))
)
->position((new Position ())
->gravity(
Gravity ::compass(
Compass ::northEast()))
)
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" lady.jpg " , array (" transformation " =>array (
array (" width " =>400 , " gravity " =>" auto " , " crop " =>" crop " ),
array (" border " =>" 10px_solid_grey " , " radius " =>75 ),
array (" overlay " =>" young_couple " ),
array (" gravity " =>" faces " , " height " =>150 , " width " =>150 , " crop " =>" thumb " ),
array (" border " =>" 3px_solid_black " ),
array (" flags " =>" layer_apply " , " gravity " =>" north_east " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" lady.jpg " ).image(transformation=[
{' width ' : 400 , ' gravity ' : " auto " , ' crop ' : " crop " },
{' border ' : " 10px_solid_grey " , ' radius ' : 75 },
{' overlay ' : " young_couple " },
{' gravity ' : " faces " , ' height ' : 150 , ' width ' : 150 , ' crop ' : " thumb " },
{' border ' : " 3px_solid_black " },
{' flags ' : " layer_apply " , ' gravity ' : " north_east " }
])
Node.js (cloudinary 1.x):
cloudinary.image(" lady.jpg " , {transformation : [
{width : 400 , gravity : " auto " , crop : " crop " },
{border : " 10px_solid_grey " , radius : 75 },
{overlay : " young_couple " },
{gravity : " faces " , height : 150 , width : 150 , crop : " thumb " },
{border : " 3px_solid_black " },
{flags : " layer_apply " , gravity : " north_east " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.width(400 ).gravity(" auto " ).crop(" crop " ).chain()
.border(" 10px_solid_grey " ).radius(75 ).chain()
.overlay(new Layer().publicId(" young_couple " )).chain()
.gravity(" faces " ).height(150 ).width(150 ).crop(" thumb " ).chain()
.border(" 3px_solid_black " ).chain()
.flags(" layer_apply " ).gravity(" north_east " )).imageTag(" lady.jpg " );
JS (@cloudinary/url-gen 1.x):
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' lady.jpg ' , {transformation : [
{width : 400 , gravity : " auto " , crop : " crop " },
{border : " 10px_solid_grey " , radius : 75 },
{overlay : new cloudinary.Layer().publicId(" young_couple " )},
{gravity : " faces " , height : 150 , width : 150 , crop : " thumb " },
{border : " 3px_solid_black " },
{flags : " layer_apply " , gravity : " north_east " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" lady.jpg " , {transformation : [
{width : 400 , gravity : " auto " , crop : " crop " },
{border : " 10px_solid_grey " , radius : 75 },
{overlay : new cloudinary.Layer().publicId(" young_couple " )},
{gravity : " faces " , height : 150 , width : 150 , crop : " thumb " },
{border : " 3px_solid_black " },
{flags : " layer_apply " , gravity : " north_east " }
]})
React (@cloudinary/react 1.x):
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" lady.jpg " >
<Transformation width =" 400 " gravity =" auto " crop =" crop " />
<Transformation border =" 10px_solid_grey " radius =" 75 " />
<Transformation overlay =" young_couple " />
<Transformation gravity =" faces " height =" 150 " width =" 150 " crop =" thumb " />
<Transformation border =" 3px_solid_black " />
<Transformation flags =" layer_apply " gravity =" north_east " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" lady.jpg " >
<cld-transformation width =" 400 " gravity =" auto " crop =" crop " />
<cld-transformation border =" 10px_solid_grey " radius =" 75 " />
<cld-transformation :overlay =" young_couple " />
<cld-transformation gravity =" faces " height =" 150 " width =" 150 " crop =" thumb " />
<cld-transformation border =" 3px_solid_black " />
<cld-transformation flags =" layer_apply " gravity =" north_east " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" lady.jpg " >
<cl-transformation width=" 400 " gravity=" auto " crop=" crop " >
</ cl-transformation>
<cl-transformation border="10px_solid_grey" radius="75">
< / cl-transformation>
<cl-transformation overlay=" young_couple " >
</ cl-transformation>
<cl-transformation gravity="faces" height="150" width="150" crop="thumb">
< / cl-transformation>
<cl-transformation border=" 3px_solid_black " >
</ cl-transformation>
<cl-transformation flags="layer_apply" gravity="north_east">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Width(400 ).Gravity(" auto " ).Crop(" crop " ).Chain()
.Border(" 10px_solid_grey " ).Radius(75 ).Chain()
.Overlay(new Layer().PublicId(" young_couple " )).Chain()
.Gravity(" faces " ).Height(150 ).Width(150 ).Crop(" thumb " ).Chain()
.Border(" 3px_solid_black " ).Chain()
.Flags(" layer_apply " ).Gravity(" north_east " )).BuildImageTag(" lady.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setWidth(400 ).setGravity(" auto " ).setCrop(" crop " ).chain()
.setBorder(" 10px_solid_grey " ).setRadius(75 ).chain()
.setOverlay(" young_couple " ).chain()
.setGravity(" faces " ).setHeight(150 ).setWidth(150 ).setCrop(" thumb " ).chain()
.setBorder(" 3px_solid_black " ).chain()
.setFlags(" layer_apply " ).setGravity(" north_east " )).generate(" lady.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.width(400 ).gravity(" auto " ).crop(" crop " ).chain()
.border(" 10px_solid_grey " ).radius(75 ).chain()
.overlay(new Layer().publicId(" young_couple " )).chain()
.gravity(" faces " ).height(150 ).width(150 ).crop(" thumb " ).chain()
.border(" 3px_solid_black " ).chain()
.flags(" layer_apply " ).gravity(" north_east " )).generate(" lady.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" lady.jpg " )
resize(Resize.crop() { width(400 )
gravity(
Gravity.autoGravity())
})
border(Border .solid(10 ,Color .GREY) {
roundCorners(
RoundCorners.byRadius(75 ))
})
overlay(Overlay.source(
Source .image(" young_couple " ) {
transformation(Transformation {
resize(Resize.thumbnail() { width(150 )
height(150 )
gravity(
Gravity.focusOn(
FocusOn.faces()))
})
border(Border .solid(3 ,Color .BLACK)) })
}) {
position(Position () {
gravity(
Gravity.compass(
Compass.northEast()))
})
})
}.generate()
Flutter (cloudinary_flutter 0.x):
// This code example is not currently available.
Dart (cloudinary_dart 0.x):
// This code example is not currently available.
When using the border parameter to set the border color of a text overlay, you can also set the color to
predominant_contrast
. This selects the strongest contrasting color to the predominant color while taking all pixels in the image into account. For example,
l_text:Arial_30:foo,bo_3px_solid_predominant_contrast
See full syntax : bo (border) in the Transformation Reference .
Cloudinary has a number of features that can help you to choose the best images as well as to transform problematic images to ones that are more accessible to color blind people. You can use Cloudinary to:
Simulate how an image would look to people with different color blind conditions.
Assist people with color blind conditions to help differentiate problematic colors.
Analyze images to provide color blind accessibility scores and information on which colors are the hardest to differentiate.
You can simulate a number of different color blind conditions using the simulate_colorblind
effect. For full syntax and supported conditions, see the e_simulate_colorblind parameter in the Transformation URL API Reference.
Simulate the way an image would appear to someone with deuteranopia (most common form of) color blindness:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/colorblind_green_red.jpg " , :effect =>" simulate_colorblind:deuteranopia " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/colorblind_green_red.jpg ' ))
->effect(Effect ::simulateColorBlind()
->condition(
SimulateColorBlind ::deuteranopia())
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/colorblind_green_red.jpg " , array (" effect " =>" simulate_colorblind:deuteranopia " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/colorblind_green_red.jpg " ).image(effect=" simulate_colorblind:deuteranopia " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/colorblind_green_red.jpg " , {effect : " simulate_colorblind:deuteranopia " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().effect(" simulate_colorblind:deuteranopia " )).imageTag(" docs/colorblind_green_red.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/colorblind_green_red.jpg " ).effect(
simulateColorBlind().condition(" deuteranopia " )
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/colorblind_green_red.jpg ' , {effect : " simulate_colorblind:deuteranopia " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/colorblind_green_red.jpg " , {effect : " simulate_colorblind:deuteranopia " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/colorblind_green_red.jpg " ).effect(
simulateColorBlind().condition(" deuteranopia " )
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/colorblind_green_red.jpg " >
<Transformation effect =" simulate_colorblind:deuteranopia " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/colorblind_green_red.jpg " ).effect(
simulateColorBlind().condition(" deuteranopia " )
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/colorblind_green_red.jpg " >
<cld-transformation effect =" simulate_colorblind:deuteranopia " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/colorblind_green_red.jpg " ).effect(
simulateColorBlind().condition(" deuteranopia " )
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/colorblind_green_red.jpg " >
<cl-transformation effect=" simulate_colorblind:deuteranopia " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(" simulate_colorblind:deuteranopia " )).BuildImageTag(" docs/colorblind_green_red.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(" simulate_colorblind:deuteranopia " )).generate(" docs/colorblind_green_red.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().effect(" simulate_colorblind:deuteranopia " )).generate(" docs/colorblind_green_red.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/colorblind_green_red.jpg " )
effect(Effect.simulateColorBlind() {
condition(
SimulateColorBlind.deuteranopia())
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/colorblind_green_red.jpg').transformation(Transformation()
.effect(Effect.simulateColorBlind()
.condition(
SimulateColorBlind.deuteranopia())
));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/colorblind_green_red.jpg').transformation(Transformation()
.effect(Effect.simulateColorBlind()
.condition(
SimulateColorBlind.deuteranopia())
));
Original image
Deuteranopia simulation
See full syntax : e_simulate_colorblind in the Transformation Reference .
Use the assist_colorblind
effect (e_assist_colorblind in URLs) to help people with color blind conditions to differentiate between colors.
You can add stripes in different directions and thicknesses to different colors, making them easier to differentiate, for example:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/colorblind_green_red.jpg " , :effect =>" assist_colorblind:8 " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/colorblind_green_red.jpg ' ))
->effect(Effect ::assistColorBlind()->stripesStrength(8 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/colorblind_green_red.jpg " , array (" effect " =>" assist_colorblind:8 " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/colorblind_green_red.jpg " ).image(effect=" assist_colorblind:8 " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/colorblind_green_red.jpg " , {effect : " assist_colorblind:8 " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().effect(" assist_colorblind:8 " )).imageTag(" docs/colorblind_green_red.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/colorblind_green_red.jpg " ).effect(
assistColorBlind().stripesStrength(8 )
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/colorblind_green_red.jpg ' , {effect : " assist_colorblind:8 " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/colorblind_green_red.jpg " , {effect : " assist_colorblind:8 " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/colorblind_green_red.jpg " ).effect(
assistColorBlind().stripesStrength(8 )
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/colorblind_green_red.jpg " >
<Transformation effect =" assist_colorblind:8 " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/colorblind_green_red.jpg " ).effect(
assistColorBlind().stripesStrength(8 )
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/colorblind_green_red.jpg " >
<cld-transformation effect =" assist_colorblind:8 " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/colorblind_green_red.jpg " ).effect(
assistColorBlind().stripesStrength(8 )
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/colorblind_green_red.jpg " >
<cl-transformation effect=" assist_colorblind:8 " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(" assist_colorblind:8 " )).BuildImageTag(" docs/colorblind_green_red.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(" assist_colorblind:8 " )).generate(" docs/colorblind_green_red.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().effect(" assist_colorblind:8 " )).generate(" docs/colorblind_green_red.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/colorblind_green_red.jpg " )
effect(Effect.assistColorBlind() { stripesStrength(8 ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/colorblind_green_red.jpg').transformation(Transformation()
.effect(Effect.assistColorBlind().stripesStrength(8)));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/colorblind_green_red.jpg').transformation(Transformation()
.effect(Effect.assistColorBlind().stripesStrength(8)));
A color blind person would see the stripes like this:
Alternatively, you can use color shifts to make colors easier to distinguish by specifying the xray
assist type, for example:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/colorblind_green_red.jpg " , :effect =>" assist_colorblind:xray " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/colorblind_green_red.jpg ' ))
->effect(Effect ::assistColorBlind()->xray());
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/colorblind_green_red.jpg " , array (" effect " =>" assist_colorblind:xray " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/colorblind_green_red.jpg " ).image(effect=" assist_colorblind:xray " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/colorblind_green_red.jpg " , {effect : " assist_colorblind:xray " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().effect(" assist_colorblind:xray " )).imageTag(" docs/colorblind_green_red.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/colorblind_green_red.jpg " ).effect(
assistColorBlind().xray()
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/colorblind_green_red.jpg ' , {effect : " assist_colorblind:xray " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/colorblind_green_red.jpg " , {effect : " assist_colorblind:xray " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/colorblind_green_red.jpg " ).effect(
assistColorBlind().xray()
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/colorblind_green_red.jpg " >
<Transformation effect =" assist_colorblind:xray " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/colorblind_green_red.jpg " ).effect(
assistColorBlind().xray()
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/colorblind_green_red.jpg " >
<cld-transformation effect =" assist_colorblind:xray " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/colorblind_green_red.jpg " ).effect(
assistColorBlind().xray()
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/colorblind_green_red.jpg " >
<cl-transformation effect=" assist_colorblind:xray " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(" assist_colorblind:xray " )).BuildImageTag(" docs/colorblind_green_red.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(" assist_colorblind:xray " )).generate(" docs/colorblind_green_red.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().effect(" assist_colorblind:xray " )).generate(" docs/colorblind_green_red.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/colorblind_green_red.jpg " )
effect(Effect.assistColorBlind() { xray() })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/colorblind_green_red.jpg').transformation(Transformation()
.effect(Effect.assistColorBlind().xray()));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/colorblind_green_red.jpg').transformation(Transformation()
.effect(Effect.assistColorBlind().xray()));
See full syntax : e_assist_colorblind in the Transformation Reference .
You can displace pixels in a source image based on the intensity of pixels in a displacement map image using the e_displace
effect in conjunction with a displacement map image specified as an overlay. This can be useful to create interesting effects in a select area of an image or to warp the entire image to fit a needed design or texture. For example, to make an image wrap around a coffee cup or appear to be printed on a textured canvas.
The displace
effect (e_displace
in URLs) algorithm displaces the pixels in an image according to the color channels of the pixels in another specified image (a gradient map specified with the overlay parameter). The displace
effect is added in the same component as the layer_apply
flag. The red channel controls horizontal displacement, green controls vertical displacement, and the blue channel is ignored. The final displacement of each pixel in the base image is determined by a combination of the red and green color channels, together with the configured x and/or y parameters. For example, for a given x value of 20 and a pixel with a red value of 255 (highest), the corresponding base image pixel would be displaced by 20 pixels horizontally, while a red value of 25 (10%) would only displace the base image pixel by 2 pixels horizontally.
This is a standard displacement map algorithm used by popular image editing tools, so you can upload existing displacement maps found on the internet or created by your graphic artists to your product environment and specify them as the overlay asset, enabling you to dynamically apply the displacement effect on other images in your product environment or those uploaded by your end users.
Several sample use-case of this layer-based effect are shown in the sections below.
See full syntax : e_displace in the Transformation Reference .
Use a displacement map to warp the perspective of an overlay image for final placement as an overlay on a mug:
Ruby (cloudinary 1.x):
cl_image_tag(" sample " , :use_root_path =>true , :transformation =>[
{:overlay =>" radialize " },
{:effect =>" displace " , :flags =>" layer_apply " , :y =>-8 }
])
PHP (cloudinary_php 2.x):
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" sample " , array (" use_root_path " =>true , " transformation " =>array (
array (" overlay " =>" radialize " ),
array (" effect " =>" displace " , " flags " =>" layer_apply " , " y " =>-8 )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" sample " ).image(use_root_path=True , transformation=[
{' overlay ' : " radialize " },
{' effect ' : " displace " , ' flags ' : " layer_apply " , ' y ' : -8 }
])
Node.js (cloudinary 1.x):
cloudinary.image(" sample " , {use_root_path : true , transformation : [
{overlay : " radialize " },
{effect : " displace " , flags : " layer_apply " , y : -8 }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.overlay(new Layer().publicId(" radialize " )).chain()
.effect(" displace " ).flags(" layer_apply " ).y(-8 )).useRootPath(true ).imageTag(" sample " );
JS (@cloudinary/url-gen 1.x):
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' sample ' , {useRootPath : true , transformation : [
{overlay : new cloudinary.Layer().publicId(" radialize " )},
{effect : " displace " , flags : " layer_apply " , y : -8 }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" sample " , {use_root_path : true , transformation : [
{overlay : new cloudinary.Layer().publicId(" radialize " )},
{effect : " displace " , flags : " layer_apply " , y : -8 }
]})
React (@cloudinary/react 1.x):
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" sample " useRootPath =" true " >
<Transformation overlay =" radialize " />
<Transformation effect =" displace " flags =" layer_apply " y =" -8 " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" sample " use-root-path=" true " >
<cld-transformation :overlay =" radialize " />
<cld-transformation effect =" displace " flags =" layer_apply " y =" -8 " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" sample " use-root-path=" true " >
<cl-transformation overlay=" radialize " >
</ cl-transformation>
<cl-transformation effect="displace" flags="layer_apply" y="-8">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Overlay(new Layer().PublicId(" radialize " )).Chain()
.Effect(" displace " ).Flags(" layer_apply " ).Y(-8 )).UseRootPath(true ).BuildImageTag(" sample " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setUseRootPath( true ).setTransformation(CLDTransformation()
.setOverlay(" radialize " ).chain()
.setEffect(" displace " ).setFlags(" layer_apply " ).setY(-8 )).generate(" sample " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.overlay(new Layer().publicId(" radialize " )).chain()
.effect(" displace " ).flags(" layer_apply " ).y(-8 )).useRootPath(true ).generate(" sample " );
Kotlin (kotlin-url-gen 1.x):
Flutter (cloudinary_flutter 0.x):
// This code example is not currently available.
Dart (cloudinary_dart 0.x):
// This code example is not currently available.
Using this overlay transformation for placement on a mug:
Ruby (cloudinary 1.x):
cl_image_tag(" left_mug " , :use_root_path =>true , :transformation =>[
{:width =>500 , :crop =>" scale " },
{:overlay =>" sample.png " },
{:height =>250 , :width =>250 , :crop =>" pad " },
{:overlay =>" radialize " },
{:effect =>" displace " , :flags =>" layer_apply " , :y =>-8 },
{:flags =>" layer_apply " , :x =>10 }
])
PHP (cloudinary_php 2.x):
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" left_mug " , array (" use_root_path " =>true , " transformation " =>array (
array (" width " =>500 , " crop " =>" scale " ),
array (" overlay " =>" sample.png " ),
array (" height " =>250 , " width " =>250 , " crop " =>" pad " ),
array (" overlay " =>" radialize " ),
array (" effect " =>" displace " , " flags " =>" layer_apply " , " y " =>-8 ),
array (" flags " =>" layer_apply " , " x " =>10 )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" left_mug " ).image(use_root_path=True , transformation=[
{' width ' : 500 , ' crop ' : " scale " },
{' overlay ' : " sample.png " },
{' height ' : 250 , ' width ' : 250 , ' crop ' : " pad " },
{' overlay ' : " radialize " },
{' effect ' : " displace " , ' flags ' : " layer_apply " , ' y ' : -8 },
{' flags ' : " layer_apply " , ' x ' : 10 }
])
Node.js (cloudinary 1.x):
cloudinary.image(" left_mug " , {use_root_path : true , transformation : [
{width : 500 , crop : " scale " },
{overlay : " sample.png " },
{height : 250 , width : 250 , crop : " pad " },
{overlay : " radialize " },
{effect : " displace " , flags : " layer_apply " , y : -8 },
{flags : " layer_apply " , x : 10 }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.width(500 ).crop(" scale " ).chain()
.overlay(new Layer().publicId(" sample.png " )).chain()
.height(250 ).width(250 ).crop(" pad " ).chain()
.overlay(new Layer().publicId(" radialize " )).chain()
.effect(" displace " ).flags(" layer_apply " ).y(-8 ).chain()
.flags(" layer_apply " ).x(10 )).useRootPath(true ).imageTag(" left_mug " );
JS (@cloudinary/url-gen 1.x):
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' left_mug ' , {useRootPath : true , transformation : [
{width : 500 , crop : " scale " },
{overlay : new cloudinary.Layer().publicId(" sample.png " )},
{height : 250 , width : 250 , crop : " pad " },
{overlay : new cloudinary.Layer().publicId(" radialize " )},
{effect : " displace " , flags : " layer_apply " , y : -8 },
{flags : " layer_apply " , x : 10 }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" left_mug " , {use_root_path : true , transformation : [
{width : 500 , crop : " scale " },
{overlay : new cloudinary.Layer().publicId(" sample.png " )},
{height : 250 , width : 250 , crop : " pad " },
{overlay : new cloudinary.Layer().publicId(" radialize " )},
{effect : " displace " , flags : " layer_apply " , y : -8 },
{flags : " layer_apply " , x : 10 }
]})
React (@cloudinary/react 1.x):
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" left_mug " useRootPath =" true " >
<Transformation width =" 500 " crop =" scale " />
<Transformation overlay =" sample.png " />
<Transformation height =" 250 " width =" 250 " crop =" pad " />
<Transformation overlay =" radialize " />
<Transformation effect =" displace " flags =" layer_apply " y =" -8 " />
<Transformation flags =" layer_apply " x =" 10 " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" left_mug " use-root-path=" true " >
<cld-transformation width =" 500 " crop =" scale " />
<cld-transformation :overlay =" sample.png " />
<cld-transformation height =" 250 " width =" 250 " crop =" pad " />
<cld-transformation :overlay =" radialize " />
<cld-transformation effect =" displace " flags =" layer_apply " y =" -8 " />
<cld-transformation flags =" layer_apply " x =" 10 " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" left_mug " use-root-path=" true " >
<cl-transformation width=" 500 " crop=" scale " >
</ cl-transformation>
<cl-transformation overlay="sample.png">
< / cl-transformation>
<cl-transformation height=" 250 " width=" 250 " crop=" pad " >
</ cl-transformation>
<cl-transformation overlay="radialize">
< / cl-transformation>
<cl-transformation effect=" displace " flags=" layer_apply " y=" -8 " >
</ cl-transformation>
<cl-transformation flags="layer_apply" x="10">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Width(500 ).Crop(" scale " ).Chain()
.Overlay(new Layer().PublicId(" sample.png " )).Chain()
.Height(250 ).Width(250 ).Crop(" pad " ).Chain()
.Overlay(new Layer().PublicId(" radialize " )).Chain()
.Effect(" displace " ).Flags(" layer_apply " ).Y(-8 ).Chain()
.Flags(" layer_apply " ).X(10 )).UseRootPath(true ).BuildImageTag(" left_mug " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setUseRootPath( true ).setTransformation(CLDTransformation()
.setWidth(500 ).setCrop(" scale " ).chain()
.setOverlay(" sample.png " ).chain()
.setHeight(250 ).setWidth(250 ).setCrop(" pad " ).chain()
.setOverlay(" radialize " ).chain()
.setEffect(" displace " ).setFlags(" layer_apply " ).setY(-8 ).chain()
.setFlags(" layer_apply " ).setX(10 )).generate(" left_mug " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.width(500 ).crop(" scale " ).chain()
.overlay(new Layer().publicId(" sample.png " )).chain()
.height(250 ).width(250 ).crop(" pad " ).chain()
.overlay(new Layer().publicId(" radialize " )).chain()
.effect(" displace " ).flags(" layer_apply " ).y(-8 ).chain()
.flags(" layer_apply " ).x(10 )).useRootPath(true ).generate(" left_mug " );
Kotlin (kotlin-url-gen 1.x):
Flutter (cloudinary_flutter 0.x):
// This code example is not currently available.
Dart (cloudinary_dart 0.x):
// This code example is not currently available.
To displace the sample
image by using a displacement map, creating a zoom effect:
Ruby (cloudinary 1.x):
cl_image_tag(" sample " , :use_root_path =>true , :transformation =>[
{:overlay =>" docs:zoom_map " },
{:effect =>" displace " , :flags =>" layer_apply " , :x =>50 , :y =>50 }
])
PHP (cloudinary_php 2.x):
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" sample " , array (" use_root_path " =>true , " transformation " =>array (
array (" overlay " =>" docs:zoom_map " ),
array (" effect " =>" displace " , " flags " =>" layer_apply " , " x " =>50 , " y " =>50 )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" sample " ).image(use_root_path=True , transformation=[
{' overlay ' : " docs:zoom_map " },
{' effect ' : " displace " , ' flags ' : " layer_apply " , ' x ' : 50 , ' y ' : 50 }
])
Node.js (cloudinary 1.x):
cloudinary.image(" sample " , {use_root_path : true , transformation : [
{overlay : " docs:zoom_map " },
{effect : " displace " , flags : " layer_apply " , x : 50 , y : 50 }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.overlay(new Layer().publicId(" docs:zoom_map " )).chain()
.effect(" displace " ).flags(" layer_apply " ).x(50 ).y(50 )).useRootPath(true ).imageTag(" sample " );
JS (@cloudinary/url-gen 1.x):
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' sample ' , {useRootPath : true , transformation : [
{overlay : new cloudinary.Layer().publicId(" docs:zoom_map " )},
{effect : " displace " , flags : " layer_apply " , x : 50 , y : 50 }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" sample " , {use_root_path : true , transformation : [
{overlay : new cloudinary.Layer().publicId(" docs:zoom_map " )},
{effect : " displace " , flags : " layer_apply " , x : 50 , y : 50 }
]})
React (@cloudinary/react 1.x):
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" sample " useRootPath =" true " >
<Transformation overlay =" docs:zoom_map " />
<Transformation effect =" displace " flags =" layer_apply " x =" 50 " y =" 50 " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" sample " use-root-path=" true " >
<cld-transformation :overlay =" docs:zoom_map " />
<cld-transformation effect =" displace " flags =" layer_apply " x =" 50 " y =" 50 " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" sample " use-root-path=" true " >
<cl-transformation overlay=" docs:zoom_map " >
</ cl-transformation>
<cl-transformation effect="displace" flags="layer_apply" x="50" y="50">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Overlay(new Layer().PublicId(" docs:zoom_map " )).Chain()
.Effect(" displace " ).Flags(" layer_apply " ).X(50 ).Y(50 )).UseRootPath(true ).BuildImageTag(" sample " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setUseRootPath( true ).setTransformation(CLDTransformation()
.setOverlay(" docs:zoom_map " ).chain()
.setEffect(" displace " ).setFlags(" layer_apply " ).setX(50 ).setY(50 )).generate(" sample " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.overlay(new Layer().publicId(" docs:zoom_map " )).chain()
.effect(" displace " ).flags(" layer_apply " ).x(50 ).y(50 )).useRootPath(true ).generate(" sample " );
Kotlin (kotlin-url-gen 1.x):
Flutter (cloudinary_flutter 0.x):
// This code example is not currently available.
Dart (cloudinary_dart 0.x):
// This code example is not currently available.
You could take this a step further by applying this displacement along with another overlay component that adds a magnifying glass. In this example, the same displacement map as above is used on a different base image and offset to a different location.
url:
http://demo-res.cloudinary.com/ c_fill,h_500,w_500/l_woman/w_500,h_500,c_fill/c_crop,h_200,w_200,x_20,y_20/l_docs:zoom_map/c_fill,h_200,w_200/e_displace,fl_layer_apply,x_20,y_20/fl_layer_apply,g_north_west,x_20,y_20/l_mag-glass.png/fl_layer_apply,fl_no_overflow,g_north_west,h_215,w_330,x_38,y_38/ woman.jpg Ruby (cloudinary 1.x):
cl_image_tag(" woman.jpg " , :use_root_path =>true , :transformation =>[
{:height =>500 , :width =>500 , :crop =>" fill " },
{:overlay =>" woman " },
{:width =>500 , :height =>500 , :crop =>" fill " },
{:height =>200 , :width =>200 , :x =>20 , :y =>20 , :crop =>" crop " },
{:overlay =>" docs:zoom_map " },
{:height =>200 , :width =>200 , :crop =>" fill " },
{:effect =>" displace " , :flags =>" layer_apply " , :x =>20 , :y =>20 },
{:flags =>" layer_apply " , :gravity =>" north_west " , :x =>20 , :y =>20 },
{:overlay =>" mag-glass.png " },
{:flags =>[" layer_apply " , " no_overflow " ], :gravity =>" north_west " , :height =>215 , :width =>330 , :x =>38 , :y =>38 , :crop =>" scale " }
])
PHP (cloudinary_php 2.x):
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" woman.jpg " , array (" use_root_path " =>true , " transformation " =>array (
array (" height " =>500 , " width " =>500 , " crop " =>" fill " ),
array (" overlay " =>" woman " ),
array (" width " =>500 , " height " =>500 , " crop " =>" fill " ),
array (" height " =>200 , " width " =>200 , " x " =>20 , " y " =>20 , " crop " =>" crop " ),
array (" overlay " =>" docs:zoom_map " ),
array (" height " =>200 , " width " =>200 , " crop " =>" fill " ),
array (" effect " =>" displace " , " flags " =>" layer_apply " , " x " =>20 , " y " =>20 ),
array (" flags " =>" layer_apply " , " gravity " =>" north_west " , " x " =>20 , " y " =>20 ),
array (" overlay " =>" mag-glass.png " ),
array (" flags " =>array (" layer_apply " , " no_overflow " ), " gravity " =>" north_west " , " height " =>215 , " width " =>330 , " x " =>38 , " y " =>38 , " crop " =>" scale " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" woman.jpg " ).image(use_root_path=True , transformation=[
{' height ' : 500 , ' width ' : 500 , ' crop ' : " fill " },
{' overlay ' : " woman " },
{' width ' : 500 , ' height ' : 500 , ' crop ' : " fill " },
{' height ' : 200 , ' width ' : 200 , ' x ' : 20 , ' y ' : 20 , ' crop ' : " crop " },
{' overlay ' : " docs:zoom_map " },
{' height ' : 200 , ' width ' : 200 , ' crop ' : " fill " },
{' effect ' : " displace " , ' flags ' : " layer_apply " , ' x ' : 20 , ' y ' : 20 },
{' flags ' : " layer_apply " , ' gravity ' : " north_west " , ' x ' : 20 , ' y ' : 20 },
{' overlay ' : " mag-glass.png " },
{' flags ' : [" layer_apply " , " no_overflow " ], ' gravity ' : " north_west " , ' height ' : 215 , ' width ' : 330 , ' x ' : 38 , ' y ' : 38 , ' crop ' : " scale " }
])
Node.js (cloudinary 1.x):
cloudinary.image(" woman.jpg " , {use_root_path : true , transformation : [
{height : 500 , width : 500 , crop : " fill " },
{overlay : " woman " },
{width : 500 , height : 500 , crop : " fill " },
{height : 200 , width : 200 , x : 20 , y : 20 , crop : " crop " },
{overlay : " docs:zoom_map " },
{height : 200 , width : 200 , crop : " fill " },
{effect : " displace " , flags : " layer_apply " , x : 20 , y : 20 },
{flags : " layer_apply " , gravity : " north_west " , x : 20 , y : 20 },
{overlay : " mag-glass.png " },
{flags : [" layer_apply " , " no_overflow " ], gravity : " north_west " , height : 215 , width : 330 , x : 38 , y : 38 , crop : " scale " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.height(500 ).width(500 ).crop(" fill " ).chain()
.overlay(new Layer().publicId(" woman " )).chain()
.width(500 ).height(500 ).crop(" fill " ).chain()
.height(200 ).width(200 ).x(20 ).y(20 ).crop(" crop " ).chain()
.overlay(new Layer().publicId(" docs:zoom_map " )).chain()
.height(200 ).width(200 ).crop(" fill " ).chain()
.effect(" displace " ).flags(" layer_apply " ).x(20 ).y(20 ).chain()
.flags(" layer_apply " ).gravity(" north_west " ).x(20 ).y(20 ).chain()
.overlay(new Layer().publicId(" mag-glass.png " )).chain()
.flags(" layer_apply " , " no_overflow " ).gravity(" north_west " ).height(215 ).width(330 ).x(38 ).y(38 ).crop(" scale " )).useRootPath(true ).imageTag(" woman.jpg " );
JS (@cloudinary/url-gen 1.x):
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' woman.jpg ' , {useRootPath : true , transformation : [
{height : 500 , width : 500 , crop : " fill " },
{overlay : new cloudinary.Layer().publicId(" woman " )},
{width : 500 , height : 500 , crop : " fill " },
{height : 200 , width : 200 , x : 20 , y : 20 , crop : " crop " },
{overlay : new cloudinary.Layer().publicId(" docs:zoom_map " )},
{height : 200 , width : 200 , crop : " fill " },
{effect : " displace " , flags : " layer_apply " , x : 20 , y : 20 },
{flags : " layer_apply " , gravity : " north_west " , x : 20 , y : 20 },
{overlay : new cloudinary.Layer().publicId(" mag-glass.png " )},
{flags : [" layer_apply " , " no_overflow " ], gravity : " north_west " , height : 215 , width : 330 , x : 38 , y : 38 , crop : " scale " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" woman.jpg " , {use_root_path : true , transformation : [
{height : 500 , width : 500 , crop : " fill " },
{overlay : new cloudinary.Layer().publicId(" woman " )},
{width : 500 , height : 500 , crop : " fill " },
{height : 200 , width : 200 , x : 20 , y : 20 , crop : " crop " },
{overlay : new cloudinary.Layer().publicId(" docs:zoom_map " )},
{height : 200 , width : 200 , crop : " fill " },
{effect : " displace " , flags : " layer_apply " , x : 20 , y : 20 },
{flags : " layer_apply " , gravity : " north_west " , x : 20 , y : 20 },
{overlay : new cloudinary.Layer().publicId(" mag-glass.png " )},
{flags : [" layer_apply " , " no_overflow " ], gravity : " north_west " , height : 215 , width : 330 , x : 38 , y : 38 , crop : " scale " }
]})
React (@cloudinary/react 1.x):
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" woman.jpg " useRootPath =" true " >
<Transformation height =" 500 " width =" 500 " crop =" fill " />
<Transformation overlay =" woman " />
<Transformation width =" 500 " height =" 500 " crop =" fill " />
<Transformation height =" 200 " width =" 200 " x =" 20 " y =" 20 " crop =" crop " />
<Transformation overlay =" docs:zoom_map " />
<Transformation height =" 200 " width =" 200 " crop =" fill " />
<Transformation effect =" displace " flags =" layer_apply " x =" 20 " y =" 20 " />
<Transformation flags =" layer_apply " gravity =" north_west " x =" 20 " y =" 20 " />
<Transformation overlay =" mag-glass.png " />
<Transformation flags ={ [ " layer_apply " , " no_overflow " ] } gravity =" north_west " height =" 215 " width =" 330 " x =" 38 " y =" 38 " crop =" scale " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" woman.jpg " use-root-path=" true " >
<cld-transformation height =" 500 " width =" 500 " crop =" fill " />
<cld-transformation :overlay =" woman " />
<cld-transformation width =" 500 " height =" 500 " crop =" fill " />
<cld-transformation height =" 200 " width =" 200 " x =" 20 " y =" 20 " crop =" crop " />
<cld-transformation :overlay =" docs:zoom_map " />
<cld-transformation height =" 200 " width =" 200 " crop =" fill " />
<cld-transformation effect =" displace " flags =" layer_apply " x =" 20 " y =" 20 " />
<cld-transformation flags =" layer_apply " gravity =" north_west " x =" 20 " y =" 20 " />
<cld-transformation :overlay =" mag-glass.png " />
<cld-transformation flags ={ [ " layer_apply " , " no_overflow " ] } gravity =" north_west " height =" 215 " width =" 330 " x =" 38 " y =" 38 " crop =" scale " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" woman.jpg " use-root-path=" true " >
<cl-transformation height=" 500 " width=" 500 " crop=" fill " >
</ cl-transformation>
<cl-transformation overlay="woman">
< / cl-transformation>
<cl-transformation width=" 500 " height=" 500 " crop=" fill " >
</ cl-transformation>
<cl-transformation height="200" width="200" x="20" y="20" crop="crop">
< / cl-transformation>
<cl-transformation overlay=" docs:zoom_map " >
</ cl-transformation>
<cl-transformation height="200" width="200" crop="fill">
< / cl-transformation>
<cl-transformation effect=" displace " flags=" layer_apply " x=" 20 " y=" 20 " >
</ cl-transformation>
<cl-transformation flags="layer_apply" gravity="north_west" x="20" y="20">
< / cl-transformation>
<cl-transformation overlay=" mag-glass.png " >
</ cl-transformation>
<cl-transformation flags={{["layer_apply", "no_overflow"]}} gravity="north_west" height="215" width="330" x="38" y="38" crop="scale">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Height(500 ).Width(500 ).Crop(" fill " ).Chain()
.Overlay(new Layer().PublicId(" woman " )).Chain()
.Width(500 ).Height(500 ).Crop(" fill " ).Chain()
.Height(200 ).Width(200 ).X(20 ).Y(20 ).Crop(" crop " ).Chain()
.Overlay(new Layer().PublicId(" docs:zoom_map " )).Chain()
.Height(200 ).Width(200 ).Crop(" fill " ).Chain()
.Effect(" displace " ).Flags(" layer_apply " ).X(20 ).Y(20 ).Chain()
.Flags(" layer_apply " ).Gravity(" north_west " ).X(20 ).Y(20 ).Chain()
.Overlay(new Layer().PublicId(" mag-glass.png " )).Chain()
.Flags(" layer_apply " , " no_overflow " ).Gravity(" north_west " ).Height(215 ).Width(330 ).X(38 ).Y(38 ).Crop(" scale " )).UseRootPath(true ).BuildImageTag(" woman.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setUseRootPath( true ).setTransformation(CLDTransformation()
.setHeight(500 ).setWidth(500 ).setCrop(" fill " ).chain()
.setOverlay(" woman " ).chain()
.setWidth(500 ).setHeight(500 ).setCrop(" fill " ).chain()
.setHeight(200 ).setWidth(200 ).setX(20 ).setY(20 ).setCrop(" crop " ).chain()
.setOverlay(" docs:zoom_map " ).chain()
.setHeight(200 ).setWidth(200 ).setCrop(" fill " ).chain()
.setEffect(" displace " ).setFlags(" layer_apply " ).setX(20 ).setY(20 ).chain()
.setFlags(" layer_apply " ).setGravity(" north_west " ).setX(20 ).setY(20 ).chain()
.setOverlay(" mag-glass.png " ).chain()
.setFlags(" layer_apply " , " no_overflow " ).setGravity(" north_west " ).setHeight(215 ).setWidth(330 ).setX(38 ).setY(38 ).setCrop(" scale " )).generate(" woman.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.height(500 ).width(500 ).crop(" fill " ).chain()
.overlay(new Layer().publicId(" woman " )).chain()
.width(500 ).height(500 ).crop(" fill " ).chain()
.height(200 ).width(200 ).x(20 ).y(20 ).crop(" crop " ).chain()
.overlay(new Layer().publicId(" docs:zoom_map " )).chain()
.height(200 ).width(200 ).crop(" fill " ).chain()
.effect(" displace " ).flags(" layer_apply " ).x(20 ).y(20 ).chain()
.flags(" layer_apply " ).gravity(" north_west " ).x(20 ).y(20 ).chain()
.overlay(new Layer().publicId(" mag-glass.png " )).chain()
.flags(" layer_apply " , " no_overflow " ).gravity(" north_west " ).height(215 ).width(330 ).x(38 ).y(38 ).crop(" scale " )).useRootPath(true ).generate(" woman.jpg " );
Kotlin (kotlin-url-gen 1.x):
Flutter (cloudinary_flutter 0.x):
// This code example is not currently available.
Dart (cloudinary_dart 0.x):
// This code example is not currently available.
Ruby (cloudinary 1.x):
cl_image_tag(" docs/autumn_woods.jpg " , :transformation =>[
{:width =>600 , :crop =>" scale " },
{:overlay =>" docs:old-canvas-texture " },
{:effect =>" displace " , :flags =>" layer_apply " , :x =>25 , :y =>25 },
{:width =>585 , :height =>320 , :crop =>" crop " }
])
PHP (cloudinary_php 2.x):
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/autumn_woods.jpg " , array (" transformation " =>array (
array (" width " =>600 , " crop " =>" scale " ),
array (" overlay " =>" docs:old-canvas-texture " ),
array (" effect " =>" displace " , " flags " =>" layer_apply " , " x " =>25 , " y " =>25 ),
array (" width " =>585 , " height " =>320 , " crop " =>" crop " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/autumn_woods.jpg " ).image(transformation=[
{' width ' : 600 , ' crop ' : " scale " },
{' overlay ' : " docs:old-canvas-texture " },
{' effect ' : " displace " , ' flags ' : " layer_apply " , ' x ' : 25 , ' y ' : 25 },
{' width ' : 585 , ' height ' : 320 , ' crop ' : " crop " }
])
Node.js (cloudinary 1.x):
cloudinary.image(" docs/autumn_woods.jpg " , {transformation : [
{width : 600 , crop : " scale " },
{overlay : " docs:old-canvas-texture " },
{effect : " displace " , flags : " layer_apply " , x : 25 , y : 25 },
{width : 585 , height : 320 , crop : " crop " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.width(600 ).crop(" scale " ).chain()
.overlay(new Layer().publicId(" docs:old-canvas-texture " )).chain()
.effect(" displace " ).flags(" layer_apply " ).x(25 ).y(25 ).chain()
.width(585 ).height(320 ).crop(" crop " )).imageTag(" docs/autumn_woods.jpg " );
JS (@cloudinary/url-gen 1.x):
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/autumn_woods.jpg ' , {transformation : [
{width : 600 , crop : " scale " },
{overlay : new cloudinary.Layer().publicId(" docs:old-canvas-texture " )},
{effect : " displace " , flags : " layer_apply " , x : 25 , y : 25 },
{width : 585 , height : 320 , crop : " crop " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/autumn_woods.jpg " , {transformation : [
{width : 600 , crop : " scale " },
{overlay : new cloudinary.Layer().publicId(" docs:old-canvas-texture " )},
{effect : " displace " , flags : " layer_apply " , x : 25 , y : 25 },
{width : 585 , height : 320 , crop : " crop " }
]})
React (@cloudinary/react 1.x):
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/autumn_woods.jpg " >
<Transformation width =" 600 " crop =" scale " />
<Transformation overlay =" docs:old-canvas-texture " />
<Transformation effect =" displace " flags =" layer_apply " x =" 25 " y =" 25 " />
<Transformation width =" 585 " height =" 320 " crop =" crop " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/autumn_woods.jpg " >
<cld-transformation width =" 600 " crop =" scale " />
<cld-transformation :overlay =" docs:old-canvas-texture " />
<cld-transformation effect =" displace " flags =" layer_apply " x =" 25 " y =" 25 " />
<cld-transformation width =" 585 " height =" 320 " crop =" crop " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/autumn_woods.jpg " >
<cl-transformation width=" 600 " crop=" scale " >
</ cl-transformation>
<cl-transformation overlay="docs:old-canvas-texture">
< / cl-transformation>
<cl-transformation effect=" displace " flags=" layer_apply " x=" 25 " y=" 25 " >
</ cl-transformation>
<cl-transformation width="585" height="320" crop="crop">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Width(600 ).Crop(" scale " ).Chain()
.Overlay(new Layer().PublicId(" docs:old-canvas-texture " )).Chain()
.Effect(" displace " ).Flags(" layer_apply " ).X(25 ).Y(25 ).Chain()
.Width(585 ).Height(320 ).Crop(" crop " )).BuildImageTag(" docs/autumn_woods.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setWidth(600 ).setCrop(" scale " ).chain()
.setOverlay(" docs:old-canvas-texture " ).chain()
.setEffect(" displace " ).setFlags(" layer_apply " ).setX(25 ).setY(25 ).chain()
.setWidth(585 ).setHeight(320 ).setCrop(" crop " )).generate(" docs/autumn_woods.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.width(600 ).crop(" scale " ).chain()
.overlay(new Layer().publicId(" docs:old-canvas-texture " )).chain()
.effect(" displace " ).flags(" layer_apply " ).x(25 ).y(25 ).chain()
.width(585 ).height(320 ).crop(" crop " )).generate(" docs/autumn_woods.jpg " );
Kotlin (kotlin-url-gen 1.x):
Flutter (cloudinary_flutter 0.x):
// This code example is not currently available.
Dart (cloudinary_dart 0.x):
// This code example is not currently available.
Interactive texture demo For more details on displacement mapping with the displace
effect, see the article on Displacement Maps for Easy Image Transformations with Cloudinary . The article includes a variety of examples, as well as an interactive demo.
Using the distort
effect, you can change the shape of an image, distorting its dimensions and the image itself. It works in one of two modes: you can either change the positioning of each of the corners, or you can warp the image into an arc.
To change the positioning of each of the corners, it is helpful to have in mind a picture like the one below. The solid rectangle shows the coordinates of the corners of the original image. The intended result of the distortion is represented by the dashed shape. The new corner coordinates are specified in the distort effect as x,y pairs, clockwise from top-left. For example:
Ruby (cloudinary 1.x):
cl_image_tag(" sample.jpg " , :transformation =>[
{:width =>300 , :crop =>" scale " },
{:effect =>" distort:40:25:280:60:260:155:35:165 " }
])
PHP (cloudinary_php 2.x):
(new ImageTag (' sample.jpg ' ))
->resize(Resize ::scale()->width(300 ))
->reshape(Reshape ::distort([40 , 25 , 280 , 60 , 260 , 155 , 35 , 165 ]));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" sample.jpg " , array (" transformation " =>array (
array (" width " =>300 , " crop " =>" scale " ),
array (" effect " =>" distort:40:25:280:60:260:155:35:165 " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" sample.jpg " ).image(transformation=[
{' width ' : 300 , ' crop ' : " scale " },
{' effect ' : " distort:40:25:280:60:260:155:35:165 " }
])
Node.js (cloudinary 1.x):
cloudinary.image(" sample.jpg " , {transformation : [
{width : 300 , crop : " scale " },
{effect : " distort:40:25:280:60:260:155:35:165 " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.width(300 ).crop(" scale " ).chain()
.effect(" distort:40:25:280:60:260:155:35:165 " )).imageTag(" sample.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" sample.jpg " )
.resize(scale().width(300 ))
.reshape(distort([40 , 25 , 280 , 60 , 260 , 155 , 35 , 165 ]));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' sample.jpg ' , {transformation : [
{width : 300 , crop : " scale " },
{effect : " distort:40:25:280:60:260:155:35:165 " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" sample.jpg " , {transformation : [
{width : 300 , crop : " scale " },
{effect : " distort:40:25:280:60:260:155:35:165 " }
]})
React (@cloudinary/react 1.x):
new CloudinaryImage(" sample.jpg " )
.resize(scale().width(300 ))
.reshape(distort([40 , 25 , 280 , 60 , 260 , 155 , 35 , 165 ]));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" sample.jpg " >
<Transformation width =" 300 " crop =" scale " />
<Transformation effect =" distort:40:25:280:60:260:155:35:165 " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" sample.jpg " )
.resize(scale().width(300 ))
.reshape(distort([40 , 25 , 280 , 60 , 260 , 155 , 35 , 165 ]));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" sample.jpg " >
<cld-transformation width =" 300 " crop =" scale " />
<cld-transformation effect =" distort:40:25:280:60:260:155:35:165 " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" sample.jpg " )
.resize(scale().width(300 ))
.reshape(distort([40 , 25 , 280 , 60 , 260 , 155 , 35 , 165 ]));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" sample.jpg " >
<cl-transformation width=" 300 " crop=" scale " >
</ cl-transformation>
<cl-transformation effect="distort:40:25:280:60:260:155:35:165">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Width(300 ).Crop(" scale " ).Chain()
.Effect(" distort:40:25:280:60:260:155:35:165 " )).BuildImageTag(" sample.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setWidth(300 ).setCrop(" scale " ).chain()
.setEffect(" distort:40:25:280:60:260:155:35:165 " )).generate(" sample.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.width(300 ).crop(" scale " ).chain()
.effect(" distort:40:25:280:60:260:155:35:165 " )).generate(" sample.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" sample.jpg " )
resize(Resize.scale() { width(300 ) })
reshape(Reshape.distort(listOf(40 , 25 , 280 , 60 , 260 , 155 , 35 , 165 )))
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('sample.jpg').transformation(Transformation()
.resize(Resize.scale().width(300))
.reshape(Reshape.distort([40, 25, 280, 60, 260, 155, 35, 165])));
Dart (cloudinary_dart 0.x):
cloudinary.image('sample.jpg').transformation(Transformation()
.resize(Resize.scale().width(300))
.reshape(Reshape.distort([40, 25, 280, 60, 260, 155, 35, 165])));
For more details on perspective warping with the distort
effect, see the article on How to dynamically distort images to fit your graphic design .
To curve an image, you can specify arc
and the number of degrees in the distort effect, instead of the corner coordinates. If you specify a positive value for the number of degrees, the image is curved upwards, like a frown. Negative values curve the image downwards, like a smile.
You can distort text in the same way as images, for example, to add curved text to the frisbee
image (e_distort:arc:-120
):
Ruby (cloudinary 1.x):
cl_image_tag(" frisbee.jpg " , :transformation =>[
{:color =>" white " , :overlay =>{:font_family =>" impact " , :font_size =>150 , :text =>" Your%20Brand%20Name%20or%20Logo%20Here " }},
{:opacity =>60 },
{:effect =>" distort:arc:-120.0 " },
{:flags =>" layer_apply " , :gravity =>" south " , :y =>840 }
])
PHP (cloudinary_php 2.x):
(new ImageTag (' frisbee.jpg ' ))
->overlay(Overlay ::source(
Source ::text(" Your Brand Name or Logo Here " ,(new TextStyle (" impact " ,150 )))
->textColor(Color ::WHITE )
->transformation((new Transformation ())
->adjust(Adjust ::opacity(60 ))
->reshape(Reshape ::distortArc(-120.0 )))
)
->position((new Position ())
->gravity(
Gravity ::compass(
Compass ::south()))
->offsetY(840 ))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" frisbee.jpg " , array (" transformation " =>array (
array (" color " =>" white " , " overlay " =>array (" font_family " =>" impact " , " font_size " =>150 , " text " =>" Your%20Brand%20Name%20or%20Logo%20Here " )),
array (" opacity " =>60 ),
array (" effect " =>" distort:arc:-120.0 " ),
array (" flags " =>" layer_apply " , " gravity " =>" south " , " y " =>840 )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" frisbee.jpg " ).image(transformation=[
{' color ' : " white " , ' overlay ' : {' font_family ' : " impact " , ' font_size ' : 150 , ' text ' : " Your%20Brand%20Name%20or%20Logo%20Here " }},
{' opacity ' : 60 },
{' effect ' : " distort:arc:-120.0 " },
{' flags ' : " layer_apply " , ' gravity ' : " south " , ' y ' : 840 }
])
Node.js (cloudinary 1.x):
cloudinary.image(" frisbee.jpg " , {transformation : [
{color : " white " , overlay : {font_family : " impact " , font_size : 150 , text : " Your%20Brand%20Name%20or%20Logo%20Here " }},
{opacity : 60 },
{effect : " distort:arc:-120.0 " },
{flags : " layer_apply " , gravity : " south " , y : 840 }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.color(" white " ).overlay(new TextLayer().fontFamily(" impact " ).fontSize(150 ).text(" Your%20Brand%20Name%20or%20Logo%20Here " )).chain()
.opacity(60 ).chain()
.effect(" distort:arc:-120.0 " ).chain()
.flags(" layer_apply " ).gravity(" south " ).y(840 )).imageTag(" frisbee.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" frisbee.jpg " ).overlay(
source(
text(" Your Brand Name or Logo Here " , new TextStyle(" impact " , 150 ))
.textColor(" white " )
.transformation(
new Transformation().adjust(opacity(60 )).reshape(distortArc(" -120.0 " ))
)
).position(
new Position()
.gravity(compass(" south " ))
.offsetY(840 )
)
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' frisbee.jpg ' , {transformation : [
{color : " white " , overlay : new cloudinary.TextLayer().fontFamily(" impact " ).fontSize(150 ).text(" Your%20Brand%20Name%20or%20Logo%20Here " )},
{opacity : 60 },
{effect : " distort:arc:-120.0 " },
{flags : " layer_apply " , gravity : " south " , y : 840 }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" frisbee.jpg " , {transformation : [
{color : " white " , overlay : new cloudinary.TextLayer().fontFamily(" impact " ).fontSize(150 ).text(" Your%20Brand%20Name%20or%20Logo%20Here " )},
{opacity : 60 },
{effect : " distort:arc:-120.0 " },
{flags : " layer_apply " , gravity : " south " , y : 840 }
]})
React (@cloudinary/react 1.x):
new CloudinaryImage(" frisbee.jpg " ).overlay(
source(
text(" Your Brand Name or Logo Here " , new TextStyle(" impact " , 150 ))
.textColor(" white " )
.transformation(
new Transformation().adjust(opacity(60 )).reshape(distortArc(" -120.0 " ))
)
).position(
new Position()
.gravity(compass(" south " ))
.offsetY(840 )
)
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" frisbee.jpg " >
<Transformation color =" white " overlay ={ { fontFamily: " impact " , fontSize: 150 , text: " Your % 20Brand % 20Name % 20or % 20Logo % 20Here " } } />
<Transformation opacity =" 60 " />
<Transformation effect =" distort:arc:-120.0 " />
<Transformation flags =" layer_apply " gravity =" south " y =" 840 " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" frisbee.jpg " ).overlay(
source(
text(" Your Brand Name or Logo Here " , new TextStyle(" impact " , 150 ))
.textColor(" white " )
.transformation(
new Transformation().adjust(opacity(60 )).reshape(distortArc(" -120.0 " ))
)
).position(
new Position()
.gravity(compass(" south " ))
.offsetY(840 )
)
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" frisbee.jpg " >
<cld-transformation color =" white " :overlay =" {fontFamily: 'impact', fontSize: 150, text: 'Your%20Brand%20Name%20or%20Logo%20Here'} " />
<cld-transformation opacity =" 60 " />
<cld-transformation effect =" distort:arc:-120.0 " />
<cld-transformation flags =" layer_apply " gravity =" south " y =" 840 " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" frisbee.jpg " ).overlay(
source(
text(" Your Brand Name or Logo Here " , new TextStyle(" impact " , 150 ))
.textColor(" white " )
.transformation(
new Transformation().adjust(opacity(60 )).reshape(distortArc(" -120.0 " ))
)
).position(
new Position()
.gravity(compass(" south " ))
.offsetY(840 )
)
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" frisbee.jpg " >
<cl-transformation color=" white " overlay=" text:impact_150:Your%20Brand%20Name%20or%20Logo%20Here " >
</ cl-transformation>
<cl-transformation opacity="60">
< / cl-transformation>
<cl-transformation effect=" distort:arc:-120.0 " >
</ cl-transformation>
<cl-transformation flags="layer_apply" gravity="south" y="840">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Color(" white " ).Overlay(new TextLayer().FontFamily(" impact " ).FontSize(150 ).Text(" Your%20Brand%20Name%20or%20Logo%20Here " )).Chain()
.Opacity(60 ).Chain()
.Effect(" distort:arc:-120.0 " ).Chain()
.Flags(" layer_apply " ).Gravity(" south " ).Y(840 )).BuildImageTag(" frisbee.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setColor(" white " ).setOverlay(" text:impact_150:Your%20Brand%20Name%20or%20Logo%20Here " ).chain()
.setOpacity(60 ).chain()
.setEffect(" distort:arc:-120.0 " ).chain()
.setFlags(" layer_apply " ).setGravity(" south " ).setY(840 )).generate(" frisbee.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.color(" white " ).overlay(new TextLayer().fontFamily(" impact " ).fontSize(150 ).text(" Your%20Brand%20Name%20or%20Logo%20Here " )).chain()
.opacity(60 ).chain()
.effect(" distort:arc:-120.0 " ).chain()
.flags(" layer_apply " ).gravity(" south " ).y(840 )).generate(" frisbee.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" frisbee.jpg " )
overlay(Overlay.source(
Source .text(" Your Brand Name or Logo Here " ,TextStyle(" impact " ,150 )) {
textColor(Color .WHITE)
transformation(Transformation {
adjust(Adjust.opacity(60 ))
reshape(Reshape.distortArc(-120.0F )) })
}) {
position(Position () {
gravity(
Gravity.compass(
Compass.south()))
offsetY(840 ) })
})
}.generate()
Flutter (cloudinary_flutter 0.x):
// This code example is not currently available.
Dart (cloudinary_dart 0.x):
// This code example is not currently available.
See full syntax : e_distort in the Transformation Reference .
Effects : screen
, multiply
, overlay
, mask
, anti_removal
These effects are used for blending an overlay with an image.
For example, to make each pixel of the sample
image brighter according to the pixel value of the overlaid cloudinary_icon_blue
image:
Ruby (cloudinary 1.x):
cl_image_tag(" sample.jpg " , :effect =>" screen " , :overlay =>" cloudinary_icon_blue " )
PHP (cloudinary_php 2.x):
(new ImageTag (' sample.jpg ' ))
->overlay(Overlay ::source(
Source ::image(" cloudinary_icon_blue " ))
->blendMode(
BlendMode ::screen())
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" sample.jpg " , array (" effect " =>" screen " , " overlay " =>" cloudinary_icon_blue " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" sample.jpg " ).image(effect=" screen " , overlay=" cloudinary_icon_blue " )
Node.js (cloudinary 1.x):
cloudinary.image(" sample.jpg " , {effect : " screen " , overlay : " cloudinary_icon_blue " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().effect(" screen " ).overlay(new Layer().publicId(" cloudinary_icon_blue " ))).imageTag(" sample.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" sample.jpg " ).overlay(
source(image(" cloudinary_icon_blue " )).blendMode(" screen " )
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' sample.jpg ' , {effect : " screen " , overlay : new cloudinary.Layer().publicId(" cloudinary_icon_blue " )}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" sample.jpg " , {effect : " screen " , overlay : new cloudinary.Layer().publicId(" cloudinary_icon_blue " )})
React (@cloudinary/react 1.x):
new CloudinaryImage(" sample.jpg " ).overlay(
source(image(" cloudinary_icon_blue " )).blendMode(" screen " )
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" sample.jpg " >
<Transformation effect =" screen " overlay =" cloudinary_icon_blue " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" sample.jpg " ).overlay(
source(image(" cloudinary_icon_blue " )).blendMode(" screen " )
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" sample.jpg " >
<cld-transformation effect =" screen " :overlay =" cloudinary_icon_blue " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" sample.jpg " ).overlay(
source(image(" cloudinary_icon_blue " )).blendMode(" screen " )
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" sample.jpg " >
<cl-transformation effect=" screen " overlay=" cloudinary_icon_blue " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(" screen " ).Overlay(new Layer().PublicId(" cloudinary_icon_blue " ))).BuildImageTag(" sample.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(" screen " ).setOverlay(" cloudinary_icon_blue " )).generate(" sample.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().effect(" screen " ).overlay(new Layer().publicId(" cloudinary_icon_blue " ))).generate(" sample.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" sample.jpg " )
overlay(Overlay.source(
Source .image(" cloudinary_icon_blue " )) {
blendMode(
BlendMode.screen())
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('sample.jpg').transformation(Transformation()
.overlay(Overlay.source(
Source.image("cloudinary_icon_blue"))
.blendMode(
BlendMode.screen())
));
Dart (cloudinary_dart 0.x):
cloudinary.image('sample.jpg').transformation(Transformation()
.overlay(Overlay.source(
Source.image("cloudinary_icon_blue"))
.blendMode(
BlendMode.screen())
));
See full syntax : e_screen , e_multiply , e_overlay , e_mask , e_anti_removal in the Transformation Reference .
The outline effect (e_outline
in URLs) enables you to add an outline to your transparent images. The parameter can also be passed additional values as follows:
outline:[mode]:[width]:[blur]
mode - how to apply the outline effect which can be one of the following values: inner
, inner_fill
, outer
, fill
. Default value: inner
and outer
.
width - the first integer supplied applies to the thickness of the outline in pixels. Default value: 5
. Range: 1 - 100
blur - the second integer supplied applies to the level of blur of the outline. Default value: 0
. Range: 0 - 2000
Original
e_outline
e_outline:inner
e_outline:inner_fill
e_outline:outer
e_outline:fill
Use the color
parameter (co
in URLs) to define a new color for the outline (the default is black
). The color can be specified as an RGB hex triplet (e.g., rgb:3e2222), a 3-digit RGB hex (e.g., rgb:777) or a named color (e.g., green). For example, to add an orange outline:
Ruby (cloudinary 1.x):
cl_image_tag(" balloon.png " , :transformation =>[
{:height =>200 , :crop =>" scale " },
{:color =>" orange " , :effect =>" outline:15:200 " }
])
PHP (cloudinary_php 2.x):
(new ImageTag (' balloon.png ' ))
->resize(Resize ::scale()->height(200 ))
->effect(Effect ::outline()->width(15 )
->blurLevel(200 )
->color(Color ::ORANGE )
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" balloon.png " , array (" transformation " =>array (
array (" height " =>200 , " crop " =>" scale " ),
array (" color " =>" orange " , " effect " =>" outline:15:200 " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" balloon.png " ).image(transformation=[
{' height ' : 200 , ' crop ' : " scale " },
{' color ' : " orange " , ' effect ' : " outline:15:200 " }
])
Node.js (cloudinary 1.x):
cloudinary.image(" balloon.png " , {transformation : [
{height : 200 , crop : " scale " },
{color : " orange " , effect : " outline:15:200 " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.height(200 ).crop(" scale " ).chain()
.color(" orange " ).effect(" outline:15:200 " )).imageTag(" balloon.png " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" balloon.png " ).resize(scale().height(200 )).effect(
outline()
.width(15 )
.blurLevel(200 )
.color(" orange " )
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' balloon.png ' , {transformation : [
{height : 200 , crop : " scale " },
{color : " orange " , effect : " outline:15:200 " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" balloon.png " , {transformation : [
{height : 200 , crop : " scale " },
{color : " orange " , effect : " outline:15:200 " }
]})
React (@cloudinary/react 1.x):
new CloudinaryImage(" balloon.png " ).resize(scale().height(200 )).effect(
outline()
.width(15 )
.blurLevel(200 )
.color(" orange " )
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" balloon.png " >
<Transformation height =" 200 " crop =" scale " />
<Transformation color =" orange " effect =" outline:15:200 " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" balloon.png " ).resize(scale().height(200 )).effect(
outline()
.width(15 )
.blurLevel(200 )
.color(" orange " )
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" balloon.png " >
<cld-transformation height =" 200 " crop =" scale " />
<cld-transformation color =" orange " effect =" outline:15:200 " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" balloon.png " ).resize(scale().height(200 )).effect(
outline()
.width(15 )
.blurLevel(200 )
.color(" orange " )
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" balloon.png " >
<cl-transformation height=" 200 " crop=" scale " >
</ cl-transformation>
<cl-transformation color="orange" effect="outline:15:200">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Height(200 ).Crop(" scale " ).Chain()
.Color(" orange " ).Effect(" outline:15:200 " )).BuildImageTag(" balloon.png " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setHeight(200 ).setCrop(" scale " ).chain()
.setColor(" orange " ).setEffect(" outline:15:200 " )).generate(" balloon.png " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.height(200 ).crop(" scale " ).chain()
.color(" orange " ).effect(" outline:15:200 " )).generate(" balloon.png " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" balloon.png " )
resize(Resize.scale() { height(200 ) })
effect(Effect.outline() { width(15 )
blurLevel(200 )
color(Color .ORANGE)
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('balloon.png').transformation(Transformation()
.resize(Resize.scale().height(200))
.effect(Effect.outline().width(15)
.blurLevel(200)
.color(Color.ORANGE)
));
Dart (cloudinary_dart 0.x):
cloudinary.image('balloon.png').transformation(Transformation()
.resize(Resize.scale().height(200))
.effect(Effect.outline().width(15)
.blurLevel(200)
.color(Color.ORANGE)
));
You can also add a multi-colored outline by creating successive outline effect components. For example:
Ruby (cloudinary 1.x):
cl_image_tag(" shoes.png " , :transformation =>[
{:width =>200 , :crop =>" scale " },
{:color =>" red " , :effect =>" outline:20:200 " },
{:color =>" orange " , :effect =>" outline:15:200 " },
{:color =>" yellow " , :effect =>" outline:10:200 " }
])
PHP (cloudinary_php 2.x):
(new ImageTag (' shoes.png ' ))
->resize(Resize ::scale()->width(200 ))
->effect(Effect ::outline()->width(20 )
->blurLevel(200 )
->color(Color ::RED )
)
->effect(Effect ::outline()->width(15 )
->blurLevel(200 )
->color(Color ::ORANGE )
)
->effect(Effect ::outline()->width(10 )
->blurLevel(200 )
->color(Color ::YELLOW )
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" shoes.png " , array (" transformation " =>array (
array (" width " =>200 , " crop " =>" scale " ),
array (" color " =>" red " , " effect " =>" outline:20:200 " ),
array (" color " =>" orange " , " effect " =>" outline:15:200 " ),
array (" color " =>" yellow " , " effect " =>" outline:10:200 " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" shoes.png " ).image(transformation=[
{' width ' : 200 , ' crop ' : " scale " },
{' color ' : " red " , ' effect ' : " outline:20:200 " },
{' color ' : " orange " , ' effect ' : " outline:15:200 " },
{' color ' : " yellow " , ' effect ' : " outline:10:200 " }
])
Node.js (cloudinary 1.x):
cloudinary.image(" shoes.png " , {transformation : [
{width : 200 , crop : " scale " },
{color : " red " , effect : " outline:20:200 " },
{color : " orange " , effect : " outline:15:200 " },
{color : " yellow " , effect : " outline:10:200 " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.width(200 ).crop(" scale " ).chain()
.color(" red " ).effect(" outline:20:200 " ).chain()
.color(" orange " ).effect(" outline:15:200 " ).chain()
.color(" yellow " ).effect(" outline:10:200 " )).imageTag(" shoes.png " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" shoes.png " )
.resize(scale().width(200 ))
.effect(
outline()
.width(20 )
.blurLevel(200 )
.color(" red " )
)
.effect(
outline()
.width(15 )
.blurLevel(200 )
.color(" orange " )
)
.effect(
outline()
.width(10 )
.blurLevel(200 )
.color(" yellow " )
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' shoes.png ' , {transformation : [
{width : 200 , crop : " scale " },
{color : " red " , effect : " outline:20:200 " },
{color : " orange " , effect : " outline:15:200 " },
{color : " yellow " , effect : " outline:10:200 " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" shoes.png " , {transformation : [
{width : 200 , crop : " scale " },
{color : " red " , effect : " outline:20:200 " },
{color : " orange " , effect : " outline:15:200 " },
{color : " yellow " , effect : " outline:10:200 " }
]})
React (@cloudinary/react 1.x):
new CloudinaryImage(" shoes.png " )
.resize(scale().width(200 ))
.effect(
outline()
.width(20 )
.blurLevel(200 )
.color(" red " )
)
.effect(
outline()
.width(15 )
.blurLevel(200 )
.color(" orange " )
)
.effect(
outline()
.width(10 )
.blurLevel(200 )
.color(" yellow " )
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" shoes.png " >
<Transformation width =" 200 " crop =" scale " />
<Transformation color =" red " effect =" outline:20:200 " />
<Transformation color =" orange " effect =" outline:15:200 " />
<Transformation color =" yellow " effect =" outline:10:200 " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" shoes.png " )
.resize(scale().width(200 ))
.effect(
outline()
.width(20 )
.blurLevel(200 )
.color(" red " )
)
.effect(
outline()
.width(15 )
.blurLevel(200 )
.color(" orange " )
)
.effect(
outline()
.width(10 )
.blurLevel(200 )
.color(" yellow " )
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" shoes.png " >
<cld-transformation width =" 200 " crop =" scale " />
<cld-transformation color =" red " effect =" outline:20:200 " />
<cld-transformation color =" orange " effect =" outline:15:200 " />
<cld-transformation color =" yellow " effect =" outline:10:200 " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" shoes.png " )
.resize(scale().width(200 ))
.effect(
outline()
.width(20 )
.blurLevel(200 )
.color(" red " )
)
.effect(
outline()
.width(15 )
.blurLevel(200 )
.color(" orange " )
)
.effect(
outline()
.width(10 )
.blurLevel(200 )
.color(" yellow " )
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" shoes.png " >
<cl-transformation width=" 200 " crop=" scale " >
</ cl-transformation>
<cl-transformation color="red" effect="outline:20:200">
< / cl-transformation>
<cl-transformation color=" orange " effect=" outline:15:200 " >
</ cl-transformation>
<cl-transformation color="yellow" effect="outline:10:200">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Width(200 ).Crop(" scale " ).Chain()
.Color(" red " ).Effect(" outline:20:200 " ).Chain()
.Color(" orange " ).Effect(" outline:15:200 " ).Chain()
.Color(" yellow " ).Effect(" outline:10:200 " )).BuildImageTag(" shoes.png " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setWidth(200 ).setCrop(" scale " ).chain()
.setColor(" red " ).setEffect(" outline:20:200 " ).chain()
.setColor(" orange " ).setEffect(" outline:15:200 " ).chain()
.setColor(" yellow " ).setEffect(" outline:10:200 " )).generate(" shoes.png " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.width(200 ).crop(" scale " ).chain()
.color(" red " ).effect(" outline:20:200 " ).chain()
.color(" orange " ).effect(" outline:15:200 " ).chain()
.color(" yellow " ).effect(" outline:10:200 " )).generate(" shoes.png " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" shoes.png " )
resize(Resize.scale() { width(200 ) })
effect(Effect.outline() { width(20 )
blurLevel(200 )
color(Color .RED)
})
effect(Effect.outline() { width(15 )
blurLevel(200 )
color(Color .ORANGE)
})
effect(Effect.outline() { width(10 )
blurLevel(200 )
color(Color .YELLOW)
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('shoes.png').transformation(Transformation()
.resize(Resize.scale().width(200))
.effect(Effect.outline().width(20)
.blurLevel(200)
.color(Color.RED)
)
.effect(Effect.outline().width(15)
.blurLevel(200)
.color(Color.ORANGE)
)
.effect(Effect.outline().width(10)
.blurLevel(200)
.color(Color.YELLOW)
));
Dart (cloudinary_dart 0.x):
cloudinary.image('shoes.png').transformation(Transformation()
.resize(Resize.scale().width(200))
.effect(Effect.outline().width(20)
.blurLevel(200)
.color(Color.RED)
)
.effect(Effect.outline().width(15)
.blurLevel(200)
.color(Color.ORANGE)
)
.effect(Effect.outline().width(10)
.blurLevel(200)
.color(Color.YELLOW)
));
See full syntax : e_outline in the Transformation Reference .
You can replace a color in an image using the replace_color
effect. Unless you specify otherwise, the most prominent high-saturation color in an image is selected as the color to change. By default, a tolerance of 50 is applied to this color, representing a radius in the LAB color space, so that similar shades are also replaced, achieving a more natural effect.
For example, without specifying a color to change, the most prominent color is changed to the specified maroon
:
Ruby (cloudinary 1.x):
cl_image_tag(" blue_burlap.png " , :effect =>" replace_color:maroon " )
PHP (cloudinary_php 2.x):
(new ImageTag (' blue_burlap.png ' ))
->adjust(Adjust ::replaceColor(Color ::MAROON ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" blue_burlap.png " , array (" effect " =>" replace_color:maroon " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" blue_burlap.png " ).image(effect=" replace_color:maroon " )
Node.js (cloudinary 1.x):
cloudinary.image(" blue_burlap.png " , {effect : " replace_color:maroon " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().effect(" replace_color:maroon " )).imageTag(" blue_burlap.png " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" blue_burlap.png " ).adjust(replaceColor(" maroon " ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' blue_burlap.png ' , {effect : " replace_color:maroon " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" blue_burlap.png " , {effect : " replace_color:maroon " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" blue_burlap.png " ).adjust(replaceColor(" maroon " ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" blue_burlap.png " >
<Transformation effect =" replace_color:maroon " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" blue_burlap.png " ).adjust(replaceColor(" maroon " ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" blue_burlap.png " >
<cld-transformation effect =" replace_color:maroon " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" blue_burlap.png " ).adjust(replaceColor(" maroon " ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" blue_burlap.png " >
<cl-transformation effect=" replace_color:maroon " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(" replace_color:maroon " )).BuildImageTag(" blue_burlap.png " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(" replace_color:maroon " )).generate(" blue_burlap.png " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().effect(" replace_color:maroon " )).generate(" blue_burlap.png " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" blue_burlap.png " )
adjust(Adjust.replaceColor(Color .MAROON))
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('blue_burlap.png').transformation(Transformation()
.adjust(Adjust.replaceColor(Color.MAROON)));
Dart (cloudinary_dart 0.x):
cloudinary.image('blue_burlap.png').transformation(Transformation()
.adjust(Adjust.replaceColor(Color.MAROON)));
Original blue bag
Predominant color recolored
Adding a tolerance value of 10 (e_replace_color:maroon:10
) prevents the handle also changing color:
Ruby (cloudinary 1.x):
cl_image_tag(" blue_burlap.png " , :effect =>" replace_color:maroon:10 " )
PHP (cloudinary_php 2.x):
(new ImageTag (' blue_burlap.png ' ))
->adjust(Adjust ::replaceColor(Color ::MAROON )->tolerance(10 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" blue_burlap.png " , array (" effect " =>" replace_color:maroon:10 " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" blue_burlap.png " ).image(effect=" replace_color:maroon:10 " )
Node.js (cloudinary 1.x):
cloudinary.image(" blue_burlap.png " , {effect : " replace_color:maroon:10 " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().effect(" replace_color:maroon:10 " )).imageTag(" blue_burlap.png " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" blue_burlap.png " ).adjust(
replaceColor(" maroon " ).tolerance(10 )
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' blue_burlap.png ' , {effect : " replace_color:maroon:10 " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" blue_burlap.png " , {effect : " replace_color:maroon:10 " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" blue_burlap.png " ).adjust(
replaceColor(" maroon " ).tolerance(10 )
);
@cloudinary/react 1.x
cloudinary-react 1.x