Cloudinary is a cloud-based service that provides an end-to-end asset management solution including uploads, storage, transformations, optimizations and delivery.
Cloudinary offers a very rich set of image transformation capabilities. Images can be uploaded to Cloudinary from your servers and directly from users' Web and mobile applications. In addition, Cloudinary can automatically fetch images from remote URLs or social media sites, such as Facebook, and Twitter.
URL2PNG is a fast, reliable screenshots as a Service. Cloudinary provides an add-on for using URL2PNG screenshot creation capabilities, fully integrated into Cloudinary's image management and transformation pipeline.
With URL2PNG's dynamic website screenshot creation, you can extend Cloudinary's existing set of image uploading sources. When using the URL2PNG add-on, Cloudinary's dynamic URLs can be used to generate screenshot images of public websites and further transform them to match your graphic design .
Before you can use the URL2PNG Website Screenshots add-on:
You must have a Cloudinary account. If you don't already have one, you can sign up for a free account.
Register for the add-on: make sure you're logged in to your account and then go to the Add-ons page. For more information about add-on registrations, see Registering for add-ons .
Keep in mind that many of the examples on this page use our SDKs. For SDK installation and configuration details, see the relevant SDK guide.
If you are new to Cloudinary, you may want to take a look at How to integrate Cloudinary in your app for a walk through on the basics of creating and setting up your account, working with SDKs, and then uploading, transforming and delivering assets.
By default, delivery URLs that use this add-on either need to be
signed or
eagerly generated . You can optionally remove this requirement by selecting this add-on in the
Allow unsigned add-on transformations section of the
Security account settings in the Cloudinary console (the
demo account has this setting applied to make the examples on this page easier to read and try out).
Before you start, if you haven't done so already, please sign-up to a free Cloudinary account . After signing up, you can try the URL2PNG add-on for free and later on subscribe to an add-on plan that best matches your usage requirements.
Generating a screenshot is performed on the fly using dynamic Cloudinary transformation URLs. The screenshot is created by the URL2PNG add-on and is then cached and delivered through a fast CDN. The following dynamic URL delivers a dynamically generated website screenshot:
Ruby (cloudinary 1.x):
cl_image_tag(" https://cnn.com " , :type =>" url2png " )
PHP (cloudinary_php 2.x):
(new ImageTag (' https://cnn.com ' ))
->deliveryType(" url2png " );
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" https://cnn.com " , array (" type " =>" url2png " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" https://cnn.com " ).image(type=" url2png " )
Node.js (cloudinary 1.x):
cloudinary.image(" https://cnn.com " , {type : " url2png " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().type(" url2png " ).imageTag(" https://cnn.com " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" https://cnn.com " ).setDeliveryType(" url2png " );
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' https://cnn.com ' , {type : " url2png " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" https://cnn.com " , {type : " url2png " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" https://cnn.com " ).setDeliveryType(" url2png " );
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" https://cnn.com " type =" url2png " >
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-image public -id=" https://cnn.com " type=" url2png " >
</ cld-image>
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" https://cnn.com " ).setDeliveryType(" url2png " );
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" https://cnn.com " type=" url2png " >
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Action(" url2png " ).BuildImageTag(" https://cnn.com " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setType( " url2png " ).generate(" https://cnn.com " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().type(" url2png " ).generate(" https://cnn.com " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" https://cnn.com " )
deliveryType(" url2png " )
}.generate()
Cloudinary's dynamic image transformation URLs are quite powerful and enable agile web and mobile development. However, due to the potential costs of users accessing unplanned dynamic URLs with URL2PNG screenshot directives, image transformation add-on URLs are required (by default) to be signed using Cloudinary's authenticated API and with the sign_url
parameter set to true
.
Note that once a certain version of a screenshot is generated using signed URLs or the authenticated API, all further image transformations of the same image can be applied using unsigned dynamic Cloudinary URLs.
The following code example generates an image tag with a signed Cloudinary URL by setting the sign_url
parameter to true. The image is resized to a 150x200 thumbnail using Cloudinary's fill
crop mode applied with the north gravity. As you can see in the example below, the generated Cloudinary URL includes a signature component s--yKpRnGEi--
: only URLs with a valid signature that matches the requested image transformation are approved for on-the-fly image transformation and delivery.
Ruby (cloudinary 1.x):
cl_image_tag(" https://cnn.com " , :gravity =>" north " , :height =>200 , :width =>150 , :crop =>" fill " , :sign_url =>true , :type =>" url2png " )
PHP (cloudinary_php 2.x):
(new ImageTag (' https://cnn.com ' ))
->resize(Resize ::fill()->width(150 )
->height(200 )
->gravity(
Gravity ::compass(
Compass ::north()))
)
->sign()
->deliveryType(" url2png " );
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" https://cnn.com " , array (" gravity " =>" north " , " height " =>200 , " width " =>150 , " crop " =>" fill " , " sign_url " =>true , " type " =>" url2png " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" https://cnn.com " ).image(gravity=" north " , height=200 , width=150 , crop=" fill " , sign_url=True , type=" url2png " )
Node.js (cloudinary 1.x):
cloudinary.image(" https://cnn.com " , {gravity : " north " , height : 200 , width : 150 , crop : " fill " , sign_url : true , type : " url2png " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().gravity(" north " ).height(200 ).width(150 ).crop(" fill " )).signed(true ).type(" url2png " ).imageTag(" https://cnn.com " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" https://cnn.com " )
.resize(
fill()
.width(150 )
.height(200 )
.gravity(compass(" north " ))
)
.setSignature(" yKpRnGEi " )
.setDeliveryType(" url2png " );
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' https://cnn.com ' , {gravity : " north " , height : 200 , width : 150 , crop : " fill " , signUrl : true , type : " url2png " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" https://cnn.com " , {gravity : " north " , height : 200 , width : 150 , crop : " fill " , type : " url2png " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" https://cnn.com " )
.resize(
fill()
.width(150 )
.height(200 )
.gravity(compass(" north " ))
)
.setSignature(" yKpRnGEi " )
.setDeliveryType(" url2png " );
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" https://cnn.com " signUrl =" true " type =" url2png " >
<Transformation gravity =" north " height =" 200 " width =" 150 " crop =" fill " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-image public -id=" https://cnn.com " sign-url=" true " type=" url2png " >
<cld-transformation gravity =" north " height =" 200 " width =" 150 " crop =" fill " />
</ cld-image>
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" https://cnn.com " )
.resize(
fill()
.width(150 )
.height(200 )
.gravity(compass(" north " ))
)
.setSignature(" yKpRnGEi " )
.setDeliveryType(" url2png " );
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" https://cnn.com " sign-url=" true " type=" url2png " >
<cl-transformation gravity=" north " height=" 200 " width=" 150 " crop=" fill " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity(" north " ).Height(200 ).Width(150 ).Crop(" fill " )).Signed(true ).Action(" url2png " ).BuildImageTag(" https://cnn.com " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setType( " url2png " ).setTransformation(CLDTransformation().setGravity(" north " ).setHeight(200 ).setWidth(150 ).setCrop(" fill " )).generate(" https://cnn.com " , signUrl: true )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().gravity(" north " ).height(200 ).width(150 ).crop(" fill " )).signed(true ).type(" url2png " ).generate(" https://cnn.com " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" https://cnn.com " )
resize(Resize.fill() { width(150 )
height(200 )
gravity(
Gravity.compass(
Compass.north()))
})
signature()
deliveryType(" url2png " )
}.generate()
For more details regarding signed URLs, see the following blog post: On-the-fly image transformations secured with signed URLs .
You can optionally remove the default signed URL requirement for a particular add-on by selecting it in the
Allow unsigned add-on transformations section of the
Security account settings in the Cloudinary console.
As an alternative to signed URLs, you can eagerly generate and transform screenshots using Cloudinary's authenticated explicit
API. This way you already use Cloudinary's authenticated API for requesting URL2PNG screenshot creation, therefore, accessing the generated images can be done using regular unsigned Cloudinary URLs.
Ruby (cloudinary 1.x):
Cloudinary ::Uploader .explicit(" https://en.wikipedia.org/wiki/Jpg " ,
:type => " url2png " )
PHP (cloudinary_php 2.x):
$cloudinary ->uploadApi()->explicit(" https://en.wikipedia.org/wiki/Jpg " ,
[" type " => " url2png " ]);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
\Cloudinary \Uploader ::explicit(" https://en.wikipedia.org/wiki/Jpg " ,
[" type " => " url2png " ]);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
cloudinary.uploader.explicit(" https://en.wikipedia.org/wiki/Jpg " ,
type = " url2png " )
Node.js (cloudinary 1.x):
cloudinary.v2.uploader.explicit(" https://en.wikipedia.org/wiki/Jpg " ,
{ type : " url2png " },
function (error, result){console.log(result);});
Java (cloudinary 1.x):
cloudinary.uploader().explicit(" https://en.wikipedia.org/wiki/Jpg " ,
ObjectUtils.asMap(" type " , " url2png " ));
.NET (CloudinaryDotNet 1.x):
var explicitParams = new ExplicitParams(" https://en.wikipedia.org/wiki/Jpg " ){
Type = " url2png " };
var explicitResult = cloudinary.Explicit(explicitParams);
Go (cloudinary-go 1.x):
resp, err := cld.Upload.Explicit(ctx, " https://en.wikipedia.org/wiki/Jpg " , uploader.ExplicitParams{
Type: " url2png " })
curl:
curl https://api.cloudinary.com/v1_1/demo/image/explicit -X POST --data 'file=https://en.wikipedia.org/wiki/Jpg&type=url2png×tamp=173719931&api_key=436464676&signature=a781d61f86a6f818af'
cli:
cld uploader explicit "https://en.wikipedia.org/wiki/Jpg" type="url2png"
The authenticated API call above generates a screenshot of a Wikipedia Web page. Now we can dynamically generate any derived image and thumbnail of the generated screenshot using unsigned Cloudinary delivery URLs. For example:
As shown in the examples above, a generated screenshot is a full size image. In order to embed a screenshot in your website or mobile application while matching your graphic design, you would need to generate a thumbnail of the original screenshot.
The following code snippet returns a URL for generating and delivering a 150x200 thumbnail of a screenshot generated by the URL2PNG add-on of a Wikipedia page:
Ruby (cloudinary 1.x):
cl_image_tag(" https://en.wikipedia.org/wiki/jpg " , :gravity =>" north " , :height =>200 , :width =>150 , :crop =>" fill " , :sign_url =>true , :type =>" url2png " )
PHP (cloudinary_php 2.x):
(new ImageTag (' https://en.wikipedia.org/wiki/jpg ' ))
->resize(Resize ::fill()->width(150 )
->height(200 )
->gravity(
Gravity ::compass(
Compass ::north()))
)
->sign()
->deliveryType(" url2png " );
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" https://en.wikipedia.org/wiki/jpg " , array (" gravity " =>" north " , " height " =>200 , " width " =>150 , " crop " =>" fill " , " sign_url " =>true , " type " =>" url2png " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" https://en.wikipedia.org/wiki/jpg " ).image(gravity=" north " , height=200 , width=150 , crop=" fill " , sign_url=True , type=" url2png " )
Node.js (cloudinary 1.x):
cloudinary.image(" https://en.wikipedia.org/wiki/jpg " , {gravity : " north " , height : 200 , width : 150 , crop : " fill " , sign_url : true , type : " url2png " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().gravity(" north " ).height(200 ).width(150 ).crop(" fill " )).signed(true ).type(" url2png " ).imageTag(" https://en.wikipedia.org/wiki/jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" https://en.wikipedia.org/wiki/jpg " )
.resize(
fill()
.width(150 )
.height(200 )
.gravity(compass(" north " ))
)
.setSignature(" pCCYde_e " )
.setDeliveryType(" url2png " );
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' https://en.wikipedia.org/wiki/jpg ' , {gravity : " north " , height : 200 , width : 150 , crop : " fill " , signUrl : true , type : " url2png " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" https://en.wikipedia.org/wiki/jpg " , {gravity : " north " , height : 200 , width : 150 , crop : " fill " , type : " url2png " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" https://en.wikipedia.org/wiki/jpg " )
.resize(
fill()
.width(150 )
.height(200 )
.gravity(compass(" north " ))
)
.setSignature(" pCCYde_e " )
.setDeliveryType(" url2png " );
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" https://en.wikipedia.org/wiki/jpg " signUrl =" true " type =" url2png " >
<Transformation gravity =" north " height =" 200 " width =" 150 " crop =" fill " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-image public -id=" https://en.wikipedia.org/wiki/jpg " sign-url=" true " type=" url2png " >
<cld-transformation gravity =" north " height =" 200 " width =" 150 " crop =" fill " />
</ cld-image>
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" https://en.wikipedia.org/wiki/jpg " )
.resize(
fill()
.width(150 )
.height(200 )
.gravity(compass(" north " ))
)
.setSignature(" pCCYde_e " )
.setDeliveryType(" url2png " );
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" https://en.wikipedia.org/wiki/jpg " sign-url=" true " type=" url2png " >
<cl-transformation gravity=" north " height=" 200 " width=" 150 " crop=" fill " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity(" north " ).Height(200 ).Width(150 ).Crop(" fill " )).Signed(true ).Action(" url2png " ).BuildImageTag(" https://en.wikipedia.org/wiki/jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setType( " url2png " ).setTransformation(CLDTransformation().setGravity(" north " ).setHeight(200 ).setWidth(150 ).setCrop(" fill " )).generate(" https://en.wikipedia.org/wiki/jpg " , signUrl: true )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().gravity(" north " ).height(200 ).width(150 ).crop(" fill " )).signed(true ).type(" url2png " ).generate(" https://en.wikipedia.org/wiki/jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" https://en.wikipedia.org/wiki/jpg " )
resize(Resize.fill() { width(150 )
height(200 )
gravity(
Gravity.compass(
Compass.north()))
})
signature()
deliveryType(" url2png " )
}.generate()
Screenshot creation using the URL2PNG Cloudinary add-on can be mixed with any of Cloudinary's rich set of image transformation capabilities.
For example, the following code first crops a screenshot to 400x400 while rounding its corners, adding a gray border and specifying auto format to enable transparency on the corners. A light shadow is then added and finally, an uploaded image named url2png_logo
is added as an overlay. The overlay image is rotated and colorized:
Ruby (cloudinary 1.x):
cl_image_tag(" https://en.wikipedia.org/wiki/jpg " , :type =>" url2png " , :transformation =>[
{:border =>" 2px_solid_rgb:999 " },
{:gravity =>" north " , :height =>400 , :width =>400 , :crop =>" fill " },
{:radius =>50 },
{:color =>" #ccc " , :effect =>" shadow:20 " },
{:overlay =>" url2png_logo " },
{:angle =>30 },
{:color =>" #ec9800 " , :effect =>" colorize " },
{:flags =>" layer_apply " }
])
PHP (cloudinary_php 2.x):
(new ImageTag (' https://en.wikipedia.org/wiki/jpg ' ))
->border(Border ::solid(2 ,Color ::rgb(" 999 " )))
->resize(Resize ::fill()->width(400 )
->height(400 )
->gravity(
Gravity ::compass(
Compass ::north()))
)
->roundCorners(RoundCorners ::byRadius(50 ))
->delivery(Delivery ::format(
Format ::auto()))
->effect(Effect ::shadow()->strength(20 )
->color(Color ::rgb(" ccc " ))
)
->overlay(Overlay ::source(
Source ::image(" url2png_logo " )
->transformation((new Transformation ())
->rotate(Rotate ::byAngle(30 ))
->effect(Effect ::colorize()
->color(Color ::rgb(" ec9800 " ))
))
))
->deliveryType(" url2png " );
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" https://en.wikipedia.org/wiki/jpg " , array (" type " =>" url2png " , " transformation " =>array (
array (" border " =>" 2px_solid_rgb:999 " ),
array (" gravity " =>" north " , " height " =>400 , " width " =>400 , " crop " =>" fill " ),
array (" radius " =>50 ),
array (" color " =>" #ccc " , " effect " =>" shadow:20 " ),
array (" overlay " =>" url2png_logo " ),
array (" angle " =>30 ),
array (" color " =>" #ec9800 " , " effect " =>" colorize " ),
array (" flags " =>" layer_apply " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" https://en.wikipedia.org/wiki/jpg " ).image(type=" url2png " , transformation=[
{' border ' : " 2px_solid_rgb:999 " },
{' gravity ' : " north " , ' height ' : 400 , ' width ' : 400 , ' crop ' : " fill " },
{' radius ' : 50 },
{' color ' : " #ccc " , ' effect ' : " shadow:20 " },
{' overlay ' : " url2png_logo " },
{' angle ' : 30 },
{' color ' : " #ec9800 " , ' effect ' : " colorize " },
{' flags ' : " layer_apply " }
])
Node.js (cloudinary 1.x):
cloudinary.image(" https://en.wikipedia.org/wiki/jpg " , {type : " url2png " , transformation : [
{border : " 2px_solid_rgb:999 " },
{gravity : " north " , height : 400 , width : 400 , crop : " fill " },
{radius : 50 },
{color : " #ccc " , effect : " shadow:20 " },
{overlay : " url2png_logo " },
{angle : 30 },
{color : " #ec9800 " , effect : " colorize " },
{flags : " layer_apply " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.border(" 2px_solid_rgb:999 " ).chain()
.gravity(" north " ).height(400 ).width(400 ).crop(" fill " ).chain()
.radius(50 ).chain()
.color(" #ccc " ).effect(" shadow:20 " ).chain()
.overlay(new Layer().publicId(" url2png_logo " )).chain()
.angle(30 ).chain()
.color(" #ec9800 " ).effect(" colorize " ).chain()
.flags(" layer_apply " )).type(" url2png " ).imageTag(" https://en.wikipedia.org/wiki/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(' https://en.wikipedia.org/wiki/jpg ' , {type : " url2png " , transformation : [
{border : " 2px_solid_rgb:999 " },
{gravity : " north " , height : 400 , width : 400 , crop : " fill " },
{radius : 50 },
{color : " #ccc " , effect : " shadow:20 " },
{overlay : new cloudinary.Layer().publicId(" url2png_logo " )},
{angle : 30 },
{color : " #ec9800 " , effect : " colorize " },
{flags : " layer_apply " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" https://en.wikipedia.org/wiki/jpg " , {type : " url2png " , transformation : [
{border : " 2px_solid_rgb:999 " },
{gravity : " north " , height : 400 , width : 400 , crop : " fill " },
{radius : 50 },
{color : " #ccc " , effect : " shadow:20 " },
{overlay : new cloudinary.Layer().publicId(" url2png_logo " )},
{angle : 30 },
{color : " #ec9800 " , effect : " colorize " },
{flags : " layer_apply " }
]})
React (@cloudinary/react 1.x):
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" https://en.wikipedia.org/wiki/jpg " type =" url2png " >
<Transformation border =" 2px_solid_rgb:999 " />
<Transformation gravity =" north " height =" 400 " width =" 400 " crop =" fill " />
<Transformation radius =" 50 " />
<Transformation color =" #ccc " effect =" shadow:20 " />
<Transformation overlay =" url2png_logo " />
<Transformation angle =" 30 " />
<Transformation color =" #ec9800 " effect =" colorize " />
<Transformation flags =" layer_apply " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-image public -id=" https://en.wikipedia.org/wiki/jpg " type=" url2png " >
<cld-transformation border =" 2px_solid_rgb:999 " />
<cld-transformation gravity =" north " height =" 400 " width =" 400 " crop =" fill " />
<cld-transformation radius =" 50 " />
<cld-transformation color =" #ccc " effect =" shadow:20 " />
<cld-transformation :overlay =" url2png_logo " />
<cld-transformation angle =" 30 " />
<cld-transformation color =" #ec9800 " effect =" colorize " />
<cld-transformation flags =" layer_apply " />
</ cld-image>
Angular (@cloudinary/ng 1.x):
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" https://en.wikipedia.org/wiki/jpg " type=" url2png " >
<cl-transformation border=" 2px_solid_rgb:999 " >
</ cl-transformation>
<cl-transformation gravity="north" height="400" width="400" crop="fill">
< / cl-transformation>
<cl-transformation radius=" 50 " >
</ cl-transformation>
<cl-transformation color="#ccc" effect="shadow:20">
< / cl-transformation>
<cl-transformation overlay=" url2png_logo " >
</ cl-transformation>
<cl-transformation angle="30">
< / cl-transformation>
<cl-transformation color=" #ec9800 " effect=" colorize " >
</ cl-transformation>
<cl-transformation flags="layer_apply">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
cloudinary-angular 1.x
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Border(" 2px_solid_rgb:999 " ).Chain()
.Gravity(" north " ).Height(400 ).Width(400 ).Crop(" fill " ).Chain()
.Radius(50 ).Chain()
.Color(" #ccc " ).Effect(" shadow:20 " ).Chain()
.Overlay(new Layer().PublicId(" url2png_logo " )).Chain()
.Angle(30 ).Chain()
.Color(" #ec9800 " ).Effect(" colorize " ).Chain()
.Flags(" layer_apply " )).Action(" url2png " ).BuildImageTag(" https://en.wikipedia.org/wiki/jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setType( " url2png " ).setTransformation(CLDTransformation()
.setBorder(" 2px_solid_rgb:999 " ).chain()
.setGravity(" north " ).setHeight(400 ).setWidth(400 ).setCrop(" fill " ).chain()
.setRadius(50 ).chain()
.setColor(" #ccc " ).setEffect(" shadow:20 " ).chain()
.setOverlay(" url2png_logo " ).chain()
.setAngle(30 ).chain()
.setColor(" #ec9800 " ).setEffect(" colorize " ).chain()
.setFlags(" layer_apply " )).generate(" https://en.wikipedia.org/wiki/jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.border(" 2px_solid_rgb:999 " ).chain()
.gravity(" north " ).height(400 ).width(400 ).crop(" fill " ).chain()
.radius(50 ).chain()
.color(" #ccc " ).effect(" shadow:20 " ).chain()
.overlay(new Layer().publicId(" url2png_logo " )).chain()
.angle(30 ).chain()
.color(" #ec9800 " ).effect(" colorize " ).chain()
.flags(" layer_apply " )).type(" url2png " ).generate(" https://en.wikipedia.org/wiki/jpg " );
Kotlin (kotlin-url-gen 1.x):
To learn more about Cloudinary image transformation options, see Image transformations .