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:
cl_image_tag("multi_page_pdf.jpg", :width=>200, :height=>250, :page=>2, :crop=>"fill")
PHP:
cl_image_tag("multi_page_pdf.jpg", array("width"=>200, "height"=>250, "page"=>2, "crop"=>"fill"))
Python:
CloudinaryImage("multi_page_pdf.jpg").image(width=200, height=250, page=2, crop="fill")
Node.js:
cloudinary.image("multi_page_pdf.jpg", {width: 200, height: 250, page: 2, crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(200).height(250).page(2).crop("fill")).imageTag("multi_page_pdf.jpg")
JS:
cl.imageTag('multi_page_pdf.jpg', {width: 200, height: 250, page: 2, crop: "fill"}).toHtml();
jQuery:
$.cloudinary.image("multi_page_pdf.jpg", {width: 200, height: 250, page: 2, crop: "fill"})
React:
<Image publicId="multi_page_pdf.jpg" >
  <Transformation width="200" height="250" page="2" crop="fill" />
</Image>
Angular:
<cl-image public-id="multi_page_pdf.jpg" >
  <cl-transformation width="200" height="250" page="2" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(250).Page(2).Crop("fill")).BuildImageTag("multi_page_pdf.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(200).height(250).page(2).crop("fill")).generate("multi_page_pdf.jpg")
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:
cl_image_tag("single_page_pdf.pdf")
PHP:
cl_image_tag("single_page_pdf.pdf")
Python:
CloudinaryImage("single_page_pdf.pdf").image()
Node.js:
cloudinary.image("single_page_pdf.pdf")
Java:
cloudinary.url().imageTag("single_page_pdf.pdf")
JS:
cl.imageTag('single_page_pdf.pdf').toHtml();
jQuery:
$.cloudinary.image("single_page_pdf.pdf")
React:
<Image publicId="single_page_pdf.pdf" >

</Image>
Angular:
<cl-image public-id="single_page_pdf.pdf" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("single_page_pdf.pdf")
Android:
MediaManager.get().url().generate("single_page_pdf.pdf")

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

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

</Image>
Angular:
<cl-image public-id="single_page_pdf.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("single_page_pdf.jpg")
Android:
MediaManager.get().url().generate("single_page_pdf.jpg")
Original

Or you can set the format parameter:

Ruby:
cl_image_tag("single_page_pdf", :format => :png)
PHP:
cl_image_tag("single_page_pdf", array("format" => "png"))
Python:
cloudinary.CloudinaryImage("single_page_pdf").image( format = "png")
Node.js:
cloudinary.image("single_page_pdf", { format: 'png' })
Java:
cloudinary.url().format("png").imageTag("single_page_pdf");
jQuery:
$.cloudinary.image("single_page_pdf", { format: 'png' });
.Net:
@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:
cl_image_tag("single_page_pdf.png", :width=>200, :height=>250, :crop=>"fill")
PHP:
cl_image_tag("single_page_pdf.png", array("width"=>200, "height"=>250, "crop"=>"fill"))
Python:
CloudinaryImage("single_page_pdf.png").image(width=200, height=250, crop="fill")
Node.js:
cloudinary.image("single_page_pdf.png", {width: 200, height: 250, crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(200).height(250).crop("fill")).imageTag("single_page_pdf.png")
JS:
cl.imageTag('single_page_pdf.png', {width: 200, height: 250, crop: "fill"}).toHtml();
jQuery:
$.cloudinary.image("single_page_pdf.png", {width: 200, height: 250, crop: "fill"})
React:
<Image publicId="single_page_pdf.png" >
  <Transformation width="200" height="250" crop="fill" />
</Image>
Angular:
<cl-image public-id="single_page_pdf.png" >
  <cl-transformation width="200" height="250" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(250).Crop("fill")).BuildImageTag("single_page_pdf.png")
Android:
MediaManager.get().url().transformation(new Transformation().width(200).height(250).crop("fill")).generate("single_page_pdf.png")
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:
cl_image_tag("single_page_pdf.png", :transformation=>[
  {:width=>200, :height=>250, :effect=>"sepia", :border=>"1px_solid_black", :crop=>"fill"},
  {:overlay=>"text:arial_55_bold:Sample", :angle=>40, :opacity=>50},
  {:overlay=>"cloudinary_icon", :width=>50, :gravity=>"south", :y=>20}
  ])
PHP:
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"=>"text:arial_55_bold:Sample", "angle"=>40, "opacity"=>50),
  array("overlay"=>"cloudinary_icon", "width"=>50, "gravity"=>"south", "y"=>20)
  )))
Python:
CloudinaryImage("single_page_pdf.png").image(transformation=[
  {"width": 200, "height": 250, "effect": "sepia", "border": "1px_solid_black", "crop": "fill"},
  {"overlay": "text:arial_55_bold:Sample", "angle": 40, "opacity": 50},
  {"overlay": "cloudinary_icon", "width": 50, "gravity": "south", "y": 20}
  ])
Node.js:
cloudinary.image("single_page_pdf.png", {transformation: [
  {width: 200, height: 250, effect: "sepia", border: "1px_solid_black", crop: "fill"},
  {overlay: "text:arial_55_bold:Sample", angle: 40, opacity: 50},
  {overlay: "cloudinary_icon", width: 50, gravity: "south", y: 20}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(200).height(250).effect("sepia").border("1px_solid_black").crop("fill").chain()
  .overlay("text:arial_55_bold:Sample").angle(40).opacity(50).chain()
  .overlay("cloudinary_icon").width(50).gravity("south").y(20)).imageTag("single_page_pdf.png")
JS:
cl.imageTag('single_page_pdf.png', {transformation: [
  {width: 200, height: 250, effect: "sepia", border: "1px_solid_black", crop: "fill"},
  {overlay: "text:arial_55_bold:Sample", angle: 40, opacity: 50},
  {overlay: "cloudinary_icon", width: 50, gravity: "south", y: 20}
  ]}).toHtml();
jQuery:
$.cloudinary.image("single_page_pdf.png", {transformation: [
  {width: 200, height: 250, effect: "sepia", border: "1px_solid_black", crop: "fill"},
  {overlay: "text:arial_55_bold:Sample", angle: 40, opacity: 50},
  {overlay: "cloudinary_icon", width: 50, gravity: "south", y: 20}
  ]})
React:
<Image publicId="single_page_pdf.png" >
  <Transformation width="200" height="250" effect="sepia" border="1px_solid_black" crop="fill" />
  <Transformation overlay="text:arial_55_bold:Sample" angle="40" opacity="50" />
  <Transformation overlay="cloudinary_icon" width="50" gravity="south" y="20" />
</Image>
Angular:
<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:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(200).Height(250).Effect("sepia").Border("1px_solid_black").Crop("fill").Chain()
  .Overlay("text:arial_55_bold:Sample").Angle(40).Opacity(50).Chain()
  .Overlay("cloudinary_icon").Width(50).Gravity("south").Y(20)).BuildImageTag("single_page_pdf.png")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(200).height(250).effect("sepia").border("1px_solid_black").crop("fill").chain()
  .overlay("text:arial_55_bold:Sample").angle(40).opacity(50).chain()
  .overlay("cloudinary_icon").width(50).gravity("south").y(20)).generate("single_page_pdf.png")
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:
cl_image_tag("multi_page_pdf.jpg", :width=>200, :height=>250, :page=>2, :crop=>"fill")
PHP:
cl_image_tag("multi_page_pdf.jpg", array("width"=>200, "height"=>250, "page"=>2, "crop"=>"fill"))
Python:
CloudinaryImage("multi_page_pdf.jpg").image(width=200, height=250, page=2, crop="fill")
Node.js:
cloudinary.image("multi_page_pdf.jpg", {width: 200, height: 250, page: 2, crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(200).height(250).page(2).crop("fill")).imageTag("multi_page_pdf.jpg")
JS:
cl.imageTag('multi_page_pdf.jpg', {width: 200, height: 250, page: 2, crop: "fill"}).toHtml();
jQuery:
$.cloudinary.image("multi_page_pdf.jpg", {width: 200, height: 250, page: 2, crop: "fill"})
React:
<Image publicId="multi_page_pdf.jpg" >
  <Transformation width="200" height="250" page="2" crop="fill" />
</Image>
Angular:
<cl-image public-id="multi_page_pdf.jpg" >
  <cl-transformation width="200" height="250" page="2" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(250).Page(2).Crop("fill")).BuildImageTag("multi_page_pdf.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(200).height(250).page(2).crop("fill")).generate("multi_page_pdf.jpg")
Multi-page

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

by Itay Taragano