Convert PDF to JPG

Convert your PDF files to a JPG thumbnail by simply switching the extension of the file to JPG. You can also specify the target thumbnail dimensions using the width and height parameters and any available crop mode. If your PDF file has multiple pages, you can specify the specific page to convert using the page parameter (pg in URLs). For example:

Ruby:
Copy to clipboard
cl_image_tag("multi_page_pdf.jpg", :width=>200, :height=>250, :page=>2, :crop=>"fill")
PHP:
Copy to clipboard
cl_image_tag("multi_page_pdf.jpg", array("width"=>200, "height"=>250, "page"=>2, "crop"=>"fill"))
Python:
Copy to clipboard
CloudinaryImage("multi_page_pdf.jpg").image(width=200, height=250, page=2, crop="fill")
Node.js:
Copy to clipboard
cloudinary.image("multi_page_pdf.jpg", {width: 200, height: 250, page: 2, crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(200).height(250).page(2).crop("fill")).imageTag("multi_page_pdf.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('multi_page_pdf.jpg', {width: 200, height: 250, page: 2, crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("multi_page_pdf.jpg", {width: 200, height: 250, page: 2, crop: "fill"})
React:
Copy to clipboard
<Image publicId="multi_page_pdf.jpg" >
  <Transformation width="200" height="250" page="2" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="multi_page_pdf.jpg" >
  <cld-transformation width="200" height="250" page="2" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="multi_page_pdf.jpg" >
  <cl-transformation width="200" height="250" page="2" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(250).Page(2).Crop("fill")).BuildImageTag("multi_page_pdf.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(200).height(250).page(2).crop("fill")).generate("multi_page_pdf.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(250).setPage(2).setCrop("fill")).generate("multi_page_pdf.jpg")!, cloudinary: cloudinary)
Multi-page

Web applications that manage user data, often allow their users to upload PDF documents. In many cases, you'll want to show a thumbnail of the PDF's cover page for quick identification. You may also want to show thumbnails of the different PDF pages for fast access.

With Cloudinary, you can convert your PDFs (including multi-paged PDFs) to JPGs, PNGs and other image formats.

For example, here's an original PDF file:

Ruby:
Copy to clipboard
cl_image_tag("single_page_pdf.pdf")
PHP:
Copy to clipboard
cl_image_tag("single_page_pdf.pdf")
Python:
Copy to clipboard
CloudinaryImage("single_page_pdf.pdf").image()
Node.js:
Copy to clipboard
cloudinary.image("single_page_pdf.pdf")
Java:
Copy to clipboard
cloudinary.url().imageTag("single_page_pdf.pdf");
JS:
Copy to clipboard
cloudinary.imageTag('single_page_pdf.pdf').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("single_page_pdf.pdf")
React:
Copy to clipboard
<Image publicId="single_page_pdf.pdf" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="single_page_pdf.pdf" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="single_page_pdf.pdf" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("single_page_pdf.pdf")
Android:
Copy to clipboard
MediaManager.get().url().generate("single_page_pdf.pdf");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("single_page_pdf.pdf")!, cloudinary: cloudinary)

Convert this PDF to a JPG by changing the URL's extension from PDF to JPG:

Ruby:
Copy to clipboard
cl_image_tag("single_page_pdf.jpg")
PHP:
Copy to clipboard
cl_image_tag("single_page_pdf.jpg")
Python:
Copy to clipboard
CloudinaryImage("single_page_pdf.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("single_page_pdf.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("single_page_pdf.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('single_page_pdf.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("single_page_pdf.jpg")
React:
Copy to clipboard
<Image publicId="single_page_pdf.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="single_page_pdf.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="single_page_pdf.jpg" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("single_page_pdf.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("single_page_pdf.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("single_page_pdf.jpg")!, cloudinary: cloudinary)
Original

Or you can set the format parameter:

Ruby:
Copy to clipboard
cl_image_tag("single_page_pdf", :format => :png)
PHP:
Copy to clipboard
cl_image_tag("single_page_pdf", array("format" => "png"))
Python:
Copy to clipboard
cloudinary.CloudinaryImage("single_page_pdf").image( format = "png")
Node.js:
Copy to clipboard
cloudinary.image("single_page_pdf", { format: 'png' })
Java:
Copy to clipboard
cloudinary.url().format("png").imageTag("single_page_pdf");
jQuery:
Copy to clipboard
$.cloudinary.image("single_page_pdf", { format: 'png' });
.Net:
Copy to clipboard
@Model.Cloudinary.Api.UrlImgUp.Format("png").BuildImageTag("single_page_pdf")

To generate thumbnails from your PDF file, you can simply use Cloudinary’s resize and crop transformations, as you would for regular images. Here's an example of a PDF image converted to a 200x250 pixels PNG:

Ruby:
Copy to clipboard
cl_image_tag("single_page_pdf.png", :width=>200, :height=>250, :crop=>"fill")
PHP:
Copy to clipboard
cl_image_tag("single_page_pdf.png", array("width"=>200, "height"=>250, "crop"=>"fill"))
Python:
Copy to clipboard
CloudinaryImage("single_page_pdf.png").image(width=200, height=250, crop="fill")
Node.js:
Copy to clipboard
cloudinary.image("single_page_pdf.png", {width: 200, height: 250, crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(200).height(250).crop("fill")).imageTag("single_page_pdf.png");
JS:
Copy to clipboard
cloudinary.imageTag('single_page_pdf.png', {width: 200, height: 250, crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("single_page_pdf.png", {width: 200, height: 250, crop: "fill"})
React:
Copy to clipboard
<Image publicId="single_page_pdf.png" >
  <Transformation width="200" height="250" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="single_page_pdf.png" >
  <cld-transformation width="200" height="250" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="single_page_pdf.png" >
  <cl-transformation width="200" height="250" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(250).Crop("fill")).BuildImageTag("single_page_pdf.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(200).height(250).crop("fill")).generate("single_page_pdf.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(250).setCrop("fill")).generate("single_page_pdf.png")!, cloudinary: cloudinary)
PDF thumbnail

Cloudinary's transformations and image manipulations can also be applied on the generated thumbnails. For example: Here's the same thumbnail, while adding a sepia effect, adding a border, and include both a text overlay and a watermark:

Ruby:
Copy to clipboard
cl_image_tag("single_page_pdf.png", :transformation=>[
  {:width=>200, :height=>250, :effect=>"sepia", :border=>"1px_solid_black", :crop=>"fill"},
  {:overlay=>{:font_family=>"arial", :font_size=>55, :font_weight=>"bold", :text=>"Sample"}, :angle=>40, :opacity=>50},
  {:overlay=>"cloudinary_icon", :width=>50, :gravity=>"south", :y=>20}
  ])
PHP:
Copy to clipboard
cl_image_tag("single_page_pdf.png", array("transformation"=>array(
  array("width"=>200, "height"=>250, "effect"=>"sepia", "border"=>"1px_solid_black", "crop"=>"fill"),
  array("overlay"=>array("font_family"=>"arial", "font_size"=>55, "font_weight"=>"bold", "text"=>"Sample"), "angle"=>40, "opacity"=>50),
  array("overlay"=>"cloudinary_icon", "width"=>50, "gravity"=>"south", "y"=>20)
  )))
Python:
Copy to clipboard
CloudinaryImage("single_page_pdf.png").image(transformation=[
  {'width': 200, 'height': 250, 'effect': "sepia", 'border': "1px_solid_black", 'crop': "fill"},
  {'overlay': {'font_family': "arial", 'font_size': 55, 'font_weight': "bold", 'text': "Sample"}, 'angle': 40, 'opacity': 50},
  {'overlay': "cloudinary_icon", 'width': 50, 'gravity': "south", 'y': 20}
  ])
Node.js:
Copy to clipboard
cloudinary.image("single_page_pdf.png", {transformation: [
  {width: 200, height: 250, effect: "sepia", border: "1px_solid_black", crop: "fill"},
  {overlay: {font_family: "arial", font_size: 55, font_weight: "bold", text: "Sample"}, angle: 40, opacity: 50},
  {overlay: "cloudinary_icon", width: 50, gravity: "south", y: 20}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(200).height(250).effect("sepia").border("1px_solid_black").crop("fill").chain()
  .overlay(new TextLayer().fontFamily("arial").fontSize(55).fontWeight("bold").text("Sample")).angle(40).opacity(50).chain()
  .overlay(new Layer().publicId("cloudinary_icon")).width(50).gravity("south").y(20)).imageTag("single_page_pdf.png");
JS:
Copy to clipboard
cloudinary.imageTag('single_page_pdf.png', {transformation: [
  {width: 200, height: 250, effect: "sepia", border: "1px_solid_black", crop: "fill"},
  {overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(55).fontWeight("bold").text("Sample"), angle: 40, opacity: 50},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), width: 50, gravity: "south", y: 20}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("single_page_pdf.png", {transformation: [
  {width: 200, height: 250, effect: "sepia", border: "1px_solid_black", crop: "fill"},
  {overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(55).fontWeight("bold").text("Sample"), angle: 40, opacity: 50},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), width: 50, gravity: "south", y: 20}
  ]})
React:
Copy to clipboard
<Image publicId="single_page_pdf.png" >
  <Transformation width="200" height="250" effect="sepia" border="1px_solid_black" crop="fill" />
  <Transformation overlay={{fontFamily: "arial", fontSize: 55, fontWeight: "bold", text: "Sample"}} angle="40" opacity="50" />
  <Transformation overlay="cloudinary_icon" width="50" gravity="south" y="20" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="single_page_pdf.png" >
  <cld-transformation width="200" height="250" effect="sepia" border="1px_solid_black" crop="fill" />
  <cld-transformation overlay={{fontFamily: "arial", fontSize: 55, fontWeight: "bold", text: "Sample"}} angle="40" opacity="50" />
  <cld-transformation overlay="cloudinary_icon" width="50" gravity="south" y="20" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="single_page_pdf.png" >
  <cl-transformation width="200" height="250" effect="sepia" border="1px_solid_black" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="text:arial_55_bold:Sample" angle="40" opacity="50">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon" width="50" gravity="south" y="20">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(200).Height(250).Effect("sepia").Border("1px_solid_black").Crop("fill").Chain()
  .Overlay(new TextLayer().FontFamily("arial").FontSize(55).FontWeight("bold").Text("Sample")).Angle(40).Opacity(50).Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon")).Width(50).Gravity("south").Y(20)).BuildImageTag("single_page_pdf.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(200).height(250).effect("sepia").border("1px_solid_black").crop("fill").chain()
  .overlay(new TextLayer().fontFamily("arial").fontSize(55).fontWeight("bold").text("Sample")).angle(40).opacity(50).chain()
  .overlay(new Layer().publicId("cloudinary_icon")).width(50).gravity("south").y(20)).generate("single_page_pdf.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(200).setHeight(250).setEffect("sepia").setBorder("1px_solid_black").setCrop("fill").chain()
  .setOverlay("text:arial_55_bold:Sample").setAngle(40).setOpacity(50).chain()
  .setOverlay("cloudinary_icon").setWidth(50).setGravity("south").setY(20)).generate("single_page_pdf.png")!, cloudinary: cloudinary)
With overlays

You can also generate an image of a specific page from a multi-page PDF.
This can be done by specifying the page parameter (pg in URLs):

Ruby:
Copy to clipboard
cl_image_tag("multi_page_pdf.jpg", :width=>200, :height=>250, :page=>2, :crop=>"fill")
PHP:
Copy to clipboard
cl_image_tag("multi_page_pdf.jpg", array("width"=>200, "height"=>250, "page"=>2, "crop"=>"fill"))
Python:
Copy to clipboard
CloudinaryImage("multi_page_pdf.jpg").image(width=200, height=250, page=2, crop="fill")
Node.js:
Copy to clipboard
cloudinary.image("multi_page_pdf.jpg", {width: 200, height: 250, page: 2, crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(200).height(250).page(2).crop("fill")).imageTag("multi_page_pdf.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('multi_page_pdf.jpg', {width: 200, height: 250, page: 2, crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("multi_page_pdf.jpg", {width: 200, height: 250, page: 2, crop: "fill"})
React:
Copy to clipboard
<Image publicId="multi_page_pdf.jpg" >
  <Transformation width="200" height="250" page="2" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="multi_page_pdf.jpg" >
  <cld-transformation width="200" height="250" page="2" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="multi_page_pdf.jpg" >
  <cl-transformation width="200" height="250" page="2" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(250).Page(2).Crop("fill")).BuildImageTag("multi_page_pdf.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(200).height(250).page(2).crop("fill")).generate("multi_page_pdf.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(250).setPage(2).setCrop("fill")).generate("multi_page_pdf.jpg")!, cloudinary: cloudinary)
Multi-page

Click here for more information about PDF manipulation and delivery by Cloudinary.

NOTE: PDFs must be uploaded as an image resource_type.

by Itay Taragano