> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# URL2PNG Website Screenshots


[Cloudinary](https://cloudinary.com) 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](https://www.url2png.com/) 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**.   
> **INFO**:
>
> By default, delivery URLs that use this add-on either need to be [signed](#signed_urls) or [eagerly generated](eager_and_incoming_transformations#eager_transformations). You can optionally remove this requirement by selecting this add-on in the **Allow unsigned add-on transformations** section of the **Security** page in the Console Settings.
> (For simplicity, most of the examples on this page show eagerly generated URLs without signatures.)#### Getting started

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](https://cloudinary.com/users/register_free) 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](https://console.cloudinary.com/app/settings/addons) page. For more information about add-on registrations, see [Registering for add-ons](cloudinary_add_ons#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](cloudinary_sdks) guide.
  
* If you're new to Cloudinary, you may want to take a look at the [Developer Kickstart](dev_kickstart) for a hands-on, step-by-step introduction to a variety of features.

  

## Using URL2PNG

Generating a screenshot is performed on the fly using dynamic Cloudinary transformation URLs. Set the [delivery type](image_transformations#delivery_types) to `url2png` and the public ID to the URL of the website to capture. 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: 
    
![1480x3784 PNG (Scaled down)](https://res.cloudinary.com/demo/image/url2png/https://cnn.com "width:200")

```nodejs
cloudinary.image("https://cnn.com", {type: "url2png"})
```

```react
new CloudinaryImage("https://cnn.com").setDeliveryType("url2png");
```

```vue
new CloudinaryImage("https://cnn.com").setDeliveryType("url2png");
```

```angular
new CloudinaryImage("https://cnn.com").setDeliveryType("url2png");
```

```js
new CloudinaryImage("https://cnn.com").setDeliveryType("url2png");
```

```python
CloudinaryImage("https://cnn.com").image(type="url2png")
```

```php
(new ImageTag('https://cnn.com'))
	->deliveryType("url2png");
```

```java
cloudinary.url().transformation(new Transformation().type("url2png").imageTag("https://cnn.com");
```

```ruby
cl_image_tag("https://cnn.com", type: "url2png")
```

```csharp
cloudinary.Api.UrlImgUp.Action("url2png").BuildImageTag("https://cnn.com")
```

```dart
cloudinary.image('https://cnn.com').transformation(Transformation()
	.setDeliveryType("url2png"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setType( "url2png").generate("https://cnn.com")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().type("url2png").generate("https://cnn.com");
```

```flutter
cloudinary.image('https://cnn.com').transformation(Transformation()
	.setDeliveryType("url2png"));
```

```kotlin
cloudinary.image {
	publicId("https://cnn.com")
	 deliveryType("url2png") 
}.generate()
```

```jquery
$.cloudinary.image("https://cnn.com", {type: "url2png"})
```

```react_native
new CloudinaryImage("https://cnn.com").setDeliveryType("url2png");
```

### Specifying options

URL2PNG offers various advanced options that you can include in the request, such as `viewport`, `user_agent`, and `delay`. Refer to the [full list of advanced options](https://www.url2png.com/docs) in the URL2PNG documentation.

To use these options, construct the public ID as follows:

`<Website URL>/url2png/<option1=value1>|<option2=value2>|...|<optionn=valuen>`

For example, to generate a screenshot of `https://cloudinary.com/documentation/image_transformations` with:

* `viewport` set to `640x1135`
* `user_agent` set to `Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_1 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Version/11.0 Mobile/15C153 Safari/604.1`
* `fullpage` set to `false`

specify the public ID as:

`https://cloudinary.com/documentation/image_transformations/url2png/viewport=640x1136|user_agent=Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_1 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Version/11.0 Mobile/15C153 Safari/604.1|fullpage=false`

The full delivery URL is then created as follows:

![PNG of image transformations page](https://res.cloudinary.com/demo/image/url2png/https://cloudinary.com/documentation/image_transformations/url2png/viewport=640x1136%7Cuser_agent=Mozilla/5.0%20(iPhone;%20CPU%20iPhone%20OS%2011_2_1%20like%20Mac%20OS%20X)

```nodejs
cloudinary.image("https://cloudinary.com/documentation/image_transformations/url2png/viewport=640x1136|user_agent=Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_1 like Mac OS X", {type: "url2png"})
```

```react
new CloudinaryImage(
  "https://cloudinary.com/documentation/image_transformations/url2png/viewport=640x1136|user_agent=Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_1 like Mac OS X"
).setDeliveryType("url2png");
```

```vue
new CloudinaryImage(
  "https://cloudinary.com/documentation/image_transformations/url2png/viewport=640x1136|user_agent=Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_1 like Mac OS X"
).setDeliveryType("url2png");
```

```angular
new CloudinaryImage(
  "https://cloudinary.com/documentation/image_transformations/url2png/viewport=640x1136|user_agent=Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_1 like Mac OS X"
).setDeliveryType("url2png");
```

```js
new CloudinaryImage(
  "https://cloudinary.com/documentation/image_transformations/url2png/viewport=640x1136|user_agent=Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_1 like Mac OS X"
).setDeliveryType("url2png");
```

```python
CloudinaryImage("https://cloudinary.com/documentation/image_transformations/url2png/viewport=640x1136|user_agent=Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_1 like Mac OS X").image(type="url2png")
```

```php
(new ImageTag('https://cloudinary.com/documentation/image_transformations/url2png/viewport=640x1136|user_agent=Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_1 like Mac OS X'))
	->deliveryType("url2png");
```

```java
cloudinary.url().transformation(new Transformation().type("url2png").imageTag("https://cloudinary.com/documentation/image_transformations/url2png/viewport=640x1136|user_agent=Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_1 like Mac OS X");
```

```ruby
cl_image_tag("https://cloudinary.com/documentation/image_transformations/url2png/viewport=640x1136|user_agent=Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_1 like Mac OS X", type: "url2png")
```

```csharp
cloudinary.Api.UrlImgUp.Action("url2png").BuildImageTag("https://cloudinary.com/documentation/image_transformations/url2png/viewport=640x1136|user_agent=Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_1 like Mac OS X")
```

```dart
cloudinary.image('https://cloudinary.com/documentation/image_transformations/url2png/viewport=640x1136|user_agent=Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_1 like Mac OS X').transformation(Transformation()
	.setDeliveryType("url2png"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setType( "url2png").generate("https://cloudinary.com/documentation/image_transformations/url2png/viewport=640x1136|user_agent=Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_1 like Mac OS X")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().type("url2png").generate("https://cloudinary.com/documentation/image_transformations/url2png/viewport=640x1136|user_agent=Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_1 like Mac OS X");
```

```flutter
cloudinary.image('https://cloudinary.com/documentation/image_transformations/url2png/viewport=640x1136|user_agent=Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_1 like Mac OS X').transformation(Transformation()
	.setDeliveryType("url2png"));
```

```kotlin
cloudinary.image {
	publicId("https://cloudinary.com/documentation/image_transformations/url2png/viewport=640x1136|user_agent=Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_1 like Mac OS X")
	 deliveryType("url2png") 
}.generate()
```

```jquery
$.cloudinary.image("https://cloudinary.com/documentation/image_transformations/url2png/viewport=640x1136|user_agent=Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_1 like Mac OS X", {type: "url2png"})
```

```react_native
new CloudinaryImage(
  "https://cloudinary.com/documentation/image_transformations/url2png/viewport=640x1136|user_agent=Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_1 like Mac OS X"
).setDeliveryType("url2png");
```%20AppleWebKit/604.4.7%20(KHTML,%20like%20Gecko)%20Version/11.0%20Mobile/15C153%20Safari/604.1%7Cfullpage=false "width:200")

## Signed URLs

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 either [eagerly generated](#eager_generation) or signed using Cloudinary's authenticated API.
    
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 shows how to generates an image tag with a signed Cloudinary URL by setting the `sign_url` SDK 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.      
    
![signed URL](https://res.cloudinary.com/demo/image/url2png/s--yKpRnGEi--/c_fill,g_north,h_200,w_150/https://cnn.com)

```nodejs
cloudinary.image("https://cnn.com", {gravity: "north", height: 200, width: 150, crop: "fill", sign_url: true, type: "url2png"})
```

```react
new CloudinaryImage("https://cnn.com")
  .resize(
    fill()
      .width(150)
      .height(200)
      .gravity(compass("north"))
  )
  .setSignature("yKpRnGEi")
  .setDeliveryType("url2png");
```

```vue
new CloudinaryImage("https://cnn.com")
  .resize(
    fill()
      .width(150)
      .height(200)
      .gravity(compass("north"))
  )
  .setSignature("yKpRnGEi")
  .setDeliveryType("url2png");
```

```angular
new CloudinaryImage("https://cnn.com")
  .resize(
    fill()
      .width(150)
      .height(200)
      .gravity(compass("north"))
  )
  .setSignature("yKpRnGEi")
  .setDeliveryType("url2png");
```

```js
new CloudinaryImage("https://cnn.com")
  .resize(
    fill()
      .width(150)
      .height(200)
      .gravity(compass("north"))
  )
  .setSignature("yKpRnGEi")
  .setDeliveryType("url2png");
```

```python
CloudinaryImage("https://cnn.com").image(gravity="north", height=200, width=150, crop="fill", sign_url=True, type="url2png")
```

```php
(new ImageTag('https://cnn.com'))
	->resize(Resize::fill()->width(150)
->height(200)
	->gravity(
	Gravity::compass(
	Compass::north()))
	)
	->sign()
	->deliveryType("url2png");
```

```java
cloudinary.url().transformation(new Transformation().gravity("north").height(200).width(150).crop("fill")).signed(true).type("url2png").imageTag("https://cnn.com");
```

```ruby
cl_image_tag("https://cnn.com", gravity: "north", height: 200, width: 150, crop: "fill", sign_url: true, type: "url2png")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("north").Height(200).Width(150).Crop("fill")).Signed(true).Action("url2png").BuildImageTag("https://cnn.com")
```

```dart
cloudinary.image('https://cnn.com').transformation(Transformation()
	.resize(Resize.fill().width(150)
.height(200)
	.gravity(
	Gravity.compass(
	Compass.north()))
	)
	.setSignature("yKpRnGEi")
	.setDeliveryType("url2png"));
```

```swift
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
MediaManager.get().url().transformation(new Transformation().gravity("north").height(200).width(150).crop("fill")).signed(true).type("url2png").generate("https://cnn.com");
```

```flutter
cloudinary.image('https://cnn.com').transformation(Transformation()
	.resize(Resize.fill().width(150)
.height(200)
	.gravity(
	Gravity.compass(
	Compass.north()))
	)
	.setSignature("yKpRnGEi")
	.setDeliveryType("url2png"));
```

```kotlin
cloudinary.image {
	publicId("https://cnn.com")
	 resize(Resize.fill() { width(150)
 height(200)
	 gravity(
	Gravity.compass(
	Compass.north()))
	 })
	 signature()
	 deliveryType("url2png") 
}.generate()
```

```jquery
$.cloudinary.image("https://cnn.com", {gravity: "north", height: 200, width: 150, crop: "fill", type: "url2png"})
```

```react_native
new CloudinaryImage("https://cnn.com")
  .resize(
    fill()
      .width(150)
      .height(200)
      .gravity(compass("north"))
  )
  .setSignature("yKpRnGEi")
  .setDeliveryType("url2png");
```

For more details on signed URLs, see [Signed delivery URLs](control_access_to_media#enforcement_mechanism_signed_delivery_urls).

> **NOTE**:
>
> 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** page in the Console Settings.

## Eager generation

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.   

```multi
|ruby
Cloudinary::Uploader.explicit("https://en.wikipedia.org/wiki/Jpg", 
  type: "url2png")

|php_2
$cloudinary->uploadApi()->explicit("https://en.wikipedia.org/wiki/Jpg", 
  ["type" => "url2png"]);

|python
cloudinary.uploader.explicit("https://en.wikipedia.org/wiki/Jpg", 
  type = "url2png")

|nodejs
cloudinary.v2.uploader
.explicit("https://en.wikipedia.org/wiki/Jpg", 
  { type: "url2png" })
.then(result=>console.log(result)); 

|java
cloudinary.uploader().explicit("https://en.wikipedia.org/wiki/Jpg", 
  ObjectUtils.asMap("type", "url2png"));

|csharp
var explicitParams = new ExplicitParams("https://en.wikipedia.org/wiki/Jpg"){
  Type = "url2png"};
var explicitResult = cloudinary.Explicit(explicitParams); 

|go
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&timestamp=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:

![derived from screenshot](https://res.cloudinary.com/demo/image/url2png/c_fill,g_north,h_350,w_300/https://en.wikipedia.org/wiki/jpg "with_code: false")

      

## Create website screenshots

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:
      
![150x200 thumbnail](https://res.cloudinary.com/demo/image/url2png/s--pCCYde_e--/c_fill,g_north,h_200,w_150/https://en.wikipedia.org/wiki/jpg)

```nodejs
cloudinary.image("https://en.wikipedia.org/wiki/jpg", {gravity: "north", height: 200, width: 150, crop: "fill", sign_url: true, type: "url2png"})
```

```react
new CloudinaryImage("https://en.wikipedia.org/wiki/jpg")
  .resize(
    fill()
      .width(150)
      .height(200)
      .gravity(compass("north"))
  )
  .setSignature("pCCYde_e")
  .setDeliveryType("url2png");
```

```vue
new CloudinaryImage("https://en.wikipedia.org/wiki/jpg")
  .resize(
    fill()
      .width(150)
      .height(200)
      .gravity(compass("north"))
  )
  .setSignature("pCCYde_e")
  .setDeliveryType("url2png");
```

```angular
new CloudinaryImage("https://en.wikipedia.org/wiki/jpg")
  .resize(
    fill()
      .width(150)
      .height(200)
      .gravity(compass("north"))
  )
  .setSignature("pCCYde_e")
  .setDeliveryType("url2png");
```

```js
new CloudinaryImage("https://en.wikipedia.org/wiki/jpg")
  .resize(
    fill()
      .width(150)
      .height(200)
      .gravity(compass("north"))
  )
  .setSignature("pCCYde_e")
  .setDeliveryType("url2png");
```

```python
CloudinaryImage("https://en.wikipedia.org/wiki/jpg").image(gravity="north", height=200, width=150, crop="fill", sign_url=True, type="url2png")
```

```php
(new ImageTag('https://en.wikipedia.org/wiki/jpg'))
	->resize(Resize::fill()->width(150)
->height(200)
	->gravity(
	Gravity::compass(
	Compass::north()))
	)
	->sign()
	->deliveryType("url2png");
```

```java
cloudinary.url().transformation(new Transformation().gravity("north").height(200).width(150).crop("fill")).signed(true).type("url2png").imageTag("https://en.wikipedia.org/wiki/jpg");
```

```ruby
cl_image_tag("https://en.wikipedia.org/wiki/jpg", gravity: "north", height: 200, width: 150, crop: "fill", sign_url: true, type: "url2png")
```

```csharp
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")
```

```dart
cloudinary.image('https://en.wikipedia.org/wiki/jpg').transformation(Transformation()
	.resize(Resize.fill().width(150)
.height(200)
	.gravity(
	Gravity.compass(
	Compass.north()))
	)
	.setSignature("pCCYde_e")
	.setDeliveryType("url2png"));
```

```swift
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
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");
```

```flutter
cloudinary.image('https://en.wikipedia.org/wiki/jpg').transformation(Transformation()
	.resize(Resize.fill().width(150)
.height(200)
	.gravity(
	Gravity.compass(
	Compass.north()))
	)
	.setSignature("pCCYde_e")
	.setDeliveryType("url2png"));
```

```kotlin
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()
```

```jquery
$.cloudinary.image("https://en.wikipedia.org/wiki/jpg", {gravity: "north", height: 200, width: 150, crop: "fill", type: "url2png"})
```

```react_native
new CloudinaryImage("https://en.wikipedia.org/wiki/jpg")
  .resize(
    fill()
      .width(150)
      .height(200)
      .gravity(compass("north"))
  )
  .setSignature("pCCYde_e")
  .setDeliveryType("url2png");
```

## Further image transformations

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:

![combined resized and overlaid screenshot](https://res.cloudinary.com/demo/image/url2png/bo_2px_solid_rgb:999/c_fill,g_north,h_400,w_400/r_50/f_auto/co_rgb:ccc,e_shadow:20/l_url2png_logo/a_30/co_rgb:ec9800,e_colorize/fl_layer_apply/https://en.wikipedia.org/wiki/jpg)

```nodejs
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"}
  ]})
```

```react
new CloudinaryImage("https://en.wikipedia.org/wiki/jpg")
  .border(solid(2, "#999"))
  .resize(
    fill()
      .width(400)
      .height(400)
      .gravity(compass("north"))
  )
  .roundCorners(byRadius(50))
  .delivery(format(auto()))
  .effect(
    shadow()
      .strength(20)
      .color("#ccc")
  )
  .overlay(
    source(
      image("url2png_logo").transformation(
        new Transformation()
          .rotate(byAngle(30))
          .effect(colorize().color("#ec9800"))
      )
    )
  )
  .setDeliveryType("url2png");
```

```vue
new CloudinaryImage("https://en.wikipedia.org/wiki/jpg")
  .border(solid(2, "#999"))
  .resize(
    fill()
      .width(400)
      .height(400)
      .gravity(compass("north"))
  )
  .roundCorners(byRadius(50))
  .delivery(format(auto()))
  .effect(
    shadow()
      .strength(20)
      .color("#ccc")
  )
  .overlay(
    source(
      image("url2png_logo").transformation(
        new Transformation()
          .rotate(byAngle(30))
          .effect(colorize().color("#ec9800"))
      )
    )
  )
  .setDeliveryType("url2png");
```

```angular
new CloudinaryImage("https://en.wikipedia.org/wiki/jpg")
  .border(solid(2, "#999"))
  .resize(
    fill()
      .width(400)
      .height(400)
      .gravity(compass("north"))
  )
  .roundCorners(byRadius(50))
  .delivery(format(auto()))
  .effect(
    shadow()
      .strength(20)
      .color("#ccc")
  )
  .overlay(
    source(
      image("url2png_logo").transformation(
        new Transformation()
          .rotate(byAngle(30))
          .effect(colorize().color("#ec9800"))
      )
    )
  )
  .setDeliveryType("url2png");
```

```js
new CloudinaryImage("https://en.wikipedia.org/wiki/jpg")
  .border(solid(2, "#999"))
  .resize(
    fill()
      .width(400)
      .height(400)
      .gravity(compass("north"))
  )
  .roundCorners(byRadius(50))
  .delivery(format(auto()))
  .effect(
    shadow()
      .strength(20)
      .color("#ccc")
  )
  .overlay(
    source(
      image("url2png_logo").transformation(
        new Transformation()
          .rotate(byAngle(30))
          .effect(colorize().color("#ec9800"))
      )
    )
  )
  .setDeliveryType("url2png");
```

```python
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"}
  ])
```

```php
(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");
```

```java
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");
```

```ruby
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"}
  ])
```

```csharp
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")
```

```dart
cloudinary.image('https://en.wikipedia.org/wiki/jpg').transformation(Transformation()
	.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"))
	))
	))
	.setDeliveryType("url2png"));
```

```swift
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
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");
```

```flutter
cloudinary.image('https://en.wikipedia.org/wiki/jpg').transformation(Transformation()
	.addTransformation("bo_2px_solid_rgb:999/c_fill,g_north,h_400,w_400/r_50/f_auto/co_rgb:ccc,e_shadow:20/l_url2png_logo/a_30/co_rgb:ec9800,e_colorize/fl_layer_apply")
	.setDeliveryType("url2png"));
```

```kotlin
cloudinary.image {
	publicId("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(Transformation {
	 rotate(Rotate.byAngle(30))
	 effect(Effect.colorize() {
	 color(Color.rgb("ec9800"))
	 }) })
	 }))
	 deliveryType("url2png") 
}.generate()
```

```jquery
$.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_native
new CloudinaryImage("https://en.wikipedia.org/wiki/jpg")
  .border(solid(2, "#999"))
  .resize(
    fill()
      .width(400)
      .height(400)
      .gravity(compass("north"))
  )
  .roundCorners(byRadius(50))
  .delivery(format(auto()))
  .effect(
    shadow()
      .strength(20)
      .color("#ccc")
  )
  .overlay(
    source(
      image("url2png_logo").transformation(
        new Transformation()
          .rotate(byAngle(30))
          .effect(colorize().color("#ec9800"))
      )
    )
  )
  .setDeliveryType("url2png");
```

To learn more about Cloudinary image transformation options, see [Image transformations](image_transformations).