URL2PNG Website Screenshots

Cloudinary is a cloud-based service that provides an end-to-end image management solution including uploads, storage, manipulations, optimizations and delivery.

Cloudinary offers a very rich set of image manipulation 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 and process images directly from Facebook, Twitter or Google+.

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 manipulation 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 manipulate them to match your graphic design.

This section covers:

Using URL2PNG

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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/url2png/http://cnn.com
Ruby:
cl_image_tag("http://cnn.com", :type=>"url2png")
PHP:
cl_image_tag("http://cnn.com", array("type"=>"url2png"))
Python:
CloudinaryImage("http://cnn.com").image(type="url2png")
Node.js:
cloudinary.image("http://cnn.com", {type: "url2png"})
Java:
cloudinary.url().type("url2png").imageTag("http://cnn.com");
JS:
cloudinary.imageTag('http://cnn.com', {type: "url2png"}).toHtml();
jQuery:
$.cloudinary.image("http://cnn.com", {type: "url2png"})
React:
<Image publicId="http://cnn.com" type="url2png">

</Image>
Angular:
<cl-image public-id="http://cnn.com" type="url2png">

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Type("url2png").BuildImageTag("http://cnn.com")
Android:
MediaManager.get().url().type("url2png").generate("http://cnn.com");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setType( "url2png").generate("http://cnn.com")!, cloudinary: cloudinary)
1480x3784 PNG (Scaled down)

Signed URLs

Cloudinary's dynamic image manipulation 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 manipulation 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 manipulations 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--zoTi2OJH--: only URLs with a valid signature that matches the requested image manipulation will be approved for on-the-fly image manipulation and delivery.

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/url2png/s--zoTi2OJH--/c_fill,g_north,h_200,w_150/http://cnn.com
Ruby:
cl_image_tag("http://cnn.com", :gravity=>"north", :height=>200, :width=>150, :crop=>"fill", :sign_url=>true, :type=>"url2png")
PHP:
cl_image_tag("http://cnn.com", array("gravity"=>"north", "height"=>200, "width"=>150, "crop"=>"fill", "sign_url"=>true, "type"=>"url2png"))
Python:
CloudinaryImage("http://cnn.com").image(gravity="north", height=200, width=150, crop="fill", sign_url=True, type="url2png")
Node.js:
cloudinary.image("http://cnn.com", {gravity: "north", height: 200, width: 150, crop: "fill", sign_url: true, type: "url2png"})
Java:
cloudinary.url().transformation(new Transformation().gravity("north").height(200).width(150).crop("fill")).signed(true).type("url2png").imageTag("http://cnn.com");
JS:
cloudinary.imageTag('http://cnn.com', {gravity: "north", height: 200, width: 150, crop: "fill", signUrl: true, type: "url2png"}).toHtml();
jQuery:
$.cloudinary.image("http://cnn.com", {gravity: "north", height: 200, width: 150, crop: "fill", type: "url2png"})
React:
<Image publicId="http://cnn.com" signUrl="true" type="url2png">
  <Transformation gravity="north" height="200" width="150" crop="fill" />
</Image>
Angular:
<cl-image public-id="http://cnn.com" sign-url="true" type="url2png">
  <cl-transformation gravity="north" height="200" width="150" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("north").Height(200).Width(150).Crop("fill")).Signed(true).Type("url2png").BuildImageTag("http://cnn.com")
Android:
MediaManager.get().url().transformation(new Transformation().gravity("north").height(200).width(150).crop("fill")).signed(true).type("url2png").generate("http://cnn.com");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setType( "url2png").setTransformation(CLDTransformation().setGravity("north").setHeight(200).setWidth(150).setCrop("fill")).generate("http://cnn.com", signUrl: true)!, cloudinary: cloudinary)
signed URL

For more details regarding signed URLs, see the following blog post: On-the-fly image manipulations secured with signed 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 account settings in the Cloudinary console.

Eager generation

As an alternative to signed URLs, you can eagerly generate and manipulate 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.

RubyPHPPythonNode.jsJavaAll
Ruby:
Cloudinary::Uploader.explicit("http://en.wikipedia.org/wiki/Jpg", 
  :type => "url2png")
PHP:
\Cloudinary\Uploader::explicit(""http://en.wikipedia.org/wiki/Jpg", 
  array("type" => "url2png"));
Python:
cloudinary.uploader.explicit("http://en.wikipedia.org/wiki/Jpg", 
  type = "url2png")
Node.js:
cloudinary.uploader.explicit("http://en.wikipedia.org/wiki/Jpg", 
  function(result) { console.log(result) }, 
  { type: "url2png" });
Java:
cloudinary.uploader().explicit("http://en.wikipedia.org/wiki/Jpg", 
  ObjectUtils.asMap("type", "url2png"));

The authenticated API call above generates a screenshot of 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:

https://res.cloudinary.com/demo/image/url2png/w_300,h_350,c_fill,g_north/http://en.wikipedia.org/wiki/jpg
derived from screenshot

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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/url2png/s--aactdJkj--/c_fill,g_north,h_200,w_150/http://en.wikipedia.org/wiki/jpg
Ruby:
cl_image_tag("http://en.wikipedia.org/wiki/jpg", :gravity=>"north", :height=>200, :width=>150, :crop=>"fill", :sign_url=>true, :type=>"url2png")
PHP:
cl_image_tag("http://en.wikipedia.org/wiki/jpg", array("gravity"=>"north", "height"=>200, "width"=>150, "crop"=>"fill", "sign_url"=>true, "type"=>"url2png"))
Python:
CloudinaryImage("http://en.wikipedia.org/wiki/jpg").image(gravity="north", height=200, width=150, crop="fill", sign_url=True, type="url2png")
Node.js:
cloudinary.image("http://en.wikipedia.org/wiki/jpg", {gravity: "north", height: 200, width: 150, crop: "fill", sign_url: true, type: "url2png"})
Java:
cloudinary.url().transformation(new Transformation().gravity("north").height(200).width(150).crop("fill")).signed(true).type("url2png").imageTag("http://en.wikipedia.org/wiki/jpg");
JS:
cloudinary.imageTag('http://en.wikipedia.org/wiki/jpg', {gravity: "north", height: 200, width: 150, crop: "fill", signUrl: true, type: "url2png"}).toHtml();
jQuery:
$.cloudinary.image("http://en.wikipedia.org/wiki/jpg", {gravity: "north", height: 200, width: 150, crop: "fill", type: "url2png"})
React:
<Image publicId="http://en.wikipedia.org/wiki/jpg" signUrl="true" type="url2png">
  <Transformation gravity="north" height="200" width="150" crop="fill" />
</Image>
Angular:
<cl-image public-id="http://en.wikipedia.org/wiki/jpg" sign-url="true" type="url2png">
  <cl-transformation gravity="north" height="200" width="150" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("north").Height(200).Width(150).Crop("fill")).Signed(true).Type("url2png").BuildImageTag("http://en.wikipedia.org/wiki/jpg")
Android:
MediaManager.get().url().transformation(new Transformation().gravity("north").height(200).width(150).crop("fill")).signed(true).type("url2png").generate("http://en.wikipedia.org/wiki/jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setType( "url2png").setTransformation(CLDTransformation().setGravity("north").setHeight(200).setWidth(150).setCrop("fill")).generate("http://en.wikipedia.org/wiki/jpg", signUrl: true)!, cloudinary: cloudinary)
150x200 thumbnail

Further image manipulations

Screenshot creation using the URL2PNG Cloudinary add-on can be mixed with any of Cloudinary's rich set of image manipulation capabilities.

For example, the following code first crops a screenshot to 400x200 while rounding its corners, adding a gray border and converting the image format to JPG. A light shadow is then added to the thumbnails, and finally, an uploaded image named url2png_logo is added as an overlay. The overlay image is rotated and colorized:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/url2png/c_fill,r_50,w_400,h_400,g_north,f_jpg,bo_2px_solid_rgb:999/e_shadow:20,co_rgb:ccc/a_30,co_rgb:ec9800,e_colorize,l_url2png_logo/http://en.wikipedia.org/wiki/jpg
Ruby:
cl_image_tag("http://en.wikipedia.org/wiki/jpg", :type=>"url2png", :transformation=>[
  {:radius=>50, :width=>400, :height=>400, :gravity=>"north", :border=>"2px_solid_rgb:999", :crop=>"fill", :fetch_format=>"jpg"},
  {:effect=>"shadow:20", :color=>"#ccc"},
  {:angle=>30, :color=>"#ec9800", :effect=>"colorize", :overlay=>"url2png_logo"}
  ])
PHP:
cl_image_tag("http://en.wikipedia.org/wiki/jpg", array("type"=>"url2png", "transformation"=>array(
  array("radius"=>50, "width"=>400, "height"=>400, "gravity"=>"north", "border"=>"2px_solid_rgb:999", "crop"=>"fill", "fetch_format"=>"jpg"),
  array("effect"=>"shadow:20", "color"=>"#ccc"),
  array("angle"=>30, "color"=>"#ec9800", "effect"=>"colorize", "overlay"=>"url2png_logo")
  )))
Python:
CloudinaryImage("http://en.wikipedia.org/wiki/jpg").image(type="url2png", transformation=[
  {"radius": 50, "width": 400, "height": 400, "gravity": "north", "border": "2px_solid_rgb:999", "crop": "fill", "fetch_format": "jpg"},
  {"effect": "shadow:20", "color": "#ccc"},
  {"angle": 30, "color": "#ec9800", "effect": "colorize", "overlay": "url2png_logo"}
  ])
Node.js:
cloudinary.image("http://en.wikipedia.org/wiki/jpg", {type: "url2png", transformation: [
  {radius: 50, width: 400, height: 400, gravity: "north", border: "2px_solid_rgb:999", crop: "fill", fetch_format: "jpg"},
  {effect: "shadow:20", color: "#ccc"},
  {angle: 30, color: "#ec9800", effect: "colorize", overlay: "url2png_logo"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .radius(50).width(400).height(400).gravity("north").border("2px_solid_rgb:999").crop("fill").fetchFormat("jpg").chain()
  .effect("shadow:20").color("#ccc").chain()
  .angle(30).color("#ec9800").effect("colorize").overlay("url2png_logo")).type("url2png").imageTag("http://en.wikipedia.org/wiki/jpg");
JS:
cloudinary.imageTag('http://en.wikipedia.org/wiki/jpg', {type: "url2png", transformation: [
  {radius: 50, width: 400, height: 400, gravity: "north", border: "2px_solid_rgb:999", crop: "fill", fetchFormat: "jpg"},
  {effect: "shadow:20", color: "#ccc"},
  {angle: 30, color: "#ec9800", effect: "colorize", overlay: "url2png_logo"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("http://en.wikipedia.org/wiki/jpg", {type: "url2png", transformation: [
  {radius: 50, width: 400, height: 400, gravity: "north", border: "2px_solid_rgb:999", crop: "fill", fetch_format: "jpg"},
  {effect: "shadow:20", color: "#ccc"},
  {angle: 30, color: "#ec9800", effect: "colorize", overlay: "url2png_logo"}
  ]})
React:
<Image publicId="http://en.wikipedia.org/wiki/jpg" type="url2png">
  <Transformation radius="50" width="400" height="400" gravity="north" border="2px_solid_rgb:999" crop="fill" fetchFormat="jpg" />
  <Transformation effect="shadow:20" color="#ccc" />
  <Transformation angle="30" color="#ec9800" effect="colorize" overlay="url2png_logo" />
</Image>
Angular:
<cl-image public-id="http://en.wikipedia.org/wiki/jpg" type="url2png">
  <cl-transformation radius="50" width="400" height="400" gravity="north" border="2px_solid_rgb:999" crop="fill" fetch-format="jpg">
  </cl-transformation>
  <cl-transformation effect="shadow:20" color="#ccc">
  </cl-transformation>
  <cl-transformation angle="30" color="#ec9800" effect="colorize" overlay="url2png_logo">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Radius(50).Width(400).Height(400).Gravity("north").Border("2px_solid_rgb:999").Crop("fill").FetchFormat("jpg").Chain()
  .Effect("shadow:20").Color("#ccc").Chain()
  .Angle(30).Color("#ec9800").Effect("colorize").Overlay("url2png_logo")).Type("url2png").BuildImageTag("http://en.wikipedia.org/wiki/jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .radius(50).width(400).height(400).gravity("north").border("2px_solid_rgb:999").crop("fill").fetchFormat("jpg").chain()
  .effect("shadow:20").color("#ccc").chain()
  .angle(30).color("#ec9800").effect("colorize").overlay("url2png_logo")).type("url2png").generate("http://en.wikipedia.org/wiki/jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setType( "url2png").setTransformation(CLDTransformation()
  .setRadius(50).setWidth(400).setHeight(400).setGravity("north").setBorder("2px_solid_rgb:999").setCrop("fill").setFetchFormat("jpg").chain()
  .setEffect("shadow:20").setColor("#ccc").chain()
  .setAngle(30).setColor("#ec9800").setEffect("colorize").setOverlay("url2png_logo")).generate("http://en.wikipedia.org/wiki/jpg")!, cloudinary: cloudinary)
combined resized and overlayed screenshot

For a full list of additional Cloudinary's image manipulation options, see image transformations.