Cloudinary Cookbook recipes about Convert

Retrieving the audio track from the video

Heard a nice soundtrack and want to have it in your Cloudinary storage on-the-fly? Simply change the extension to any of our supported audio formats - MP3, OGG, WAV and get only the audio channel -

Audio channel -

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/dog.mp3

Ruby:

cloudinary_url("dog.mp3", :resource_type=>"video")

PHP v1:

Cloudinary::cloudinary_url("dog.mp3", array("resource_type"=>"video"))

PHP v2:

(new VideoTag('dog.mp3'));

Python:

cloudinary.utils.cloudinary_url("dog.mp3", resource_type="video")

Node.js:

cloudinary.url("dog.mp3", {resource_type: "video"})

Java:

cloudinary.url().resourceType("video").generate("dog.mp3")

JS:

cloudinary.url('dog.mp3', {resource_type: 'video'});

jQuery:

$.cloudinary.url("dog.mp3", {resource_type: "video"})

React:

cloudinary.url('dog.mp3', {resource_type: 'video'});

Vue.js:

cloudinary.url('dog.mp3', {resource_type: 'video'});

Angular:

cloudinary.url('dog.mp3', {resource_type: 'video'});

.NET:

cloudinary.Api.UrlVideoUp.BuildUrl("dog.mp3")

Android:

MediaManager.get().url().resourceType("video").generate("dog.mp3");

iOS:

cloudinary.createUrl().setResourceType("video").generate("dog.mp3")

by Maor Gariv Jul 02, 2020

Tags:

Animated gif creation

Easily create and manipulate an animated gif from images. First, choose the images you wish to include in the GIF by tagging them. Then, use the multi API to turn them into animated GIF (the images will be ordered alphabetically within the GIF).

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_400,h_300,c_fill/sample_image.jpg

Ruby:

cl_image_tag("sample_image.jpg", :width=>400, :height=>300, :crop=>"fill")

PHP v1:

cl_image_tag("sample_image.jpg", array("width"=>400, "height"=>300, "crop"=>"fill"))

PHP v2:

(new ImageTag('sample_image.jpg'))
  ->resize(Resize::fill()->width(400)->height(300));

Python:

CloudinaryImage("sample_image.jpg").image(width=400, height=300, crop="fill")

Node.js:

cloudinary.image("sample_image.jpg", {width: 400, height: 300, crop: "fill"})

Java:

cloudinary.url().transformation(new Transformation().width(400).height(300).crop("fill")).imageTag("sample_image.jpg");

JS:

cloudinary.imageTag('sample_image.jpg', {width: 400, height: 300, crop: "fill"}).toHtml();

jQuery:

$.cloudinary.image("sample_image.jpg", {width: 400, height: 300, crop: "fill"})

React:

<Image publicId="sample_image.jpg" >
  <Transformation width="400" height="300" crop="fill" />
</Image>

Vue.js:

<cld-image publicId="sample_image.jpg" >
  <cld-transformation width="400" height="300" crop="fill" />
</cld-image>

Angular:

<cl-image public-id="sample_image.jpg" >
  <cl-transformation width="400" height="300" crop="fill">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Height(300).Crop("fill")).BuildImageTag("sample_image.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(400).height(300).crop("fill")).generate("sample_image.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setHeight(300).setCrop("fill")).generate("sample_image.jpg")!, cloudinary: cloudinary)

by Maor Gariv Jul 02, 2020

Tags:

Waveform creation

You can create a waveform from every uploaded audio or video (which includes an audio channel) file. Simply use the waveform flag (fl_waveform in URLs) and set the file’s extension to any image format you like.

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/dog.mp4

Ruby:

cl_video_tag("dog")

PHP v1:

cl_video_tag("dog")

PHP v2:

(new VideoTag('dog.mp4'));

Python:

CloudinaryVideo("dog").video()

Node.js:

cloudinary.video("dog")

Java:

cloudinary.url().videoTag("dog");

JS:

cloudinary.videoTag('dog').toHtml();

jQuery:

$.cloudinary.video("dog")

React:

<Video publicId="dog" >

</Video>

Vue.js:

<cld-video publicId="dog" >

</cld-video>

Angular:

<cl-video public-id="dog" >

</cl-video>

.NET:

cloudinary.Api.UrlVideoUp.BuildVideoTag("dog")

Android:

MediaManager.get().url().resourceType("video").generate("dog.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").generate("dog.mp4")

by Maor Gariv Jul 02, 2020

Tags:

Converting an image format

Convert your images to any other format either by simply changing the extension of the file, or by setting the format parameter. You can either covert the image's format while uploading or upload the image as is and dynamically convert its format on delivery.

GIF

Circle cropped PNG

Low quality JPG

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/nice_beach.gif

Ruby:

cl_image_tag("nice_beach.gif")

PHP v1:

cl_image_tag("nice_beach.gif")

PHP v2:

(new ImageTag('nice_beach.gif'));

Python:

CloudinaryImage("nice_beach.gif").image()

Node.js:

cloudinary.image("nice_beach.gif")

Java:

cloudinary.url().imageTag("nice_beach.gif");

JS:

cloudinary.imageTag('nice_beach.gif').toHtml();

jQuery:

$.cloudinary.image("nice_beach.gif")

React:

<Image publicId="nice_beach.gif" >

</Image>

Vue.js:

<cld-image publicId="nice_beach.gif" >

</cld-image>

Angular:

<cl-image public-id="nice_beach.gif" >

</cl-image>

.NET:

cloudinary.Api.UrlImgUp.BuildImageTag("nice_beach.gif")

Android:

MediaManager.get().url().generate("nice_beach.gif");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("nice_beach.gif")!, cloudinary: cloudinary)

by Itay Taragano Jun 15, 2014

Tags:

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: Multi-page

PDF thumbnail

With overlays

Multi-page

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_200,h_250,c_fill,pg_2/multi_page_pdf.jpg

Ruby:

cl_image_tag("multi_page_pdf.jpg", :width=>200, :height=>250, :page=>2, :crop=>"fill")

PHP v1:

cl_image_tag("multi_page_pdf.jpg", array("width"=>200, "height"=>250, "page"=>2, "crop"=>"fill"))

PHP v2:

(new ImageTag('multi_page_pdf.jpg'))
  ->resize(Resize::fill()->width(200)->height(250))
  ->extract(Extract::getPage()->byNumber(2));

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:

cloudinary.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>

Vue.js:

<cld-image publicId="multi_page_pdf.jpg" >
  <cld-transformation width="200" height="250" page="2" crop="fill" />
</cld-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");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(250).setPage(2).setCrop("fill")).generate("multi_page_pdf.jpg")!, cloudinary: cloudinary)

by Itay Taragano Jun 11, 2014

Tags:

Streamlining the Process of Product Image Creation

Whether you've just launched a Shopify site for your latest product, or you're a multibillion dollar retailer with expansive design teams, you probably have significant room to improve and make more efficient the process of how raw photographs are transformed into compelling images on your website’s product pages.

Photo with Background Removed

Processed Product Photo

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/wood_chair_orig.jpg

Ruby:

cl_image_tag("wood_chair_orig.jpg")

PHP v1:

cl_image_tag("wood_chair_orig.jpg")

PHP v2:

(new ImageTag('wood_chair_orig.jpg'));

Python:

CloudinaryImage("wood_chair_orig.jpg").image()

Node.js:

cloudinary.image("wood_chair_orig.jpg")

Java:

cloudinary.url().imageTag("wood_chair_orig.jpg");

JS:

cloudinary.imageTag('wood_chair_orig.jpg').toHtml();

jQuery:

$.cloudinary.image("wood_chair_orig.jpg")

React:

<Image publicId="wood_chair_orig.jpg" >

</Image>

Vue.js:

<cld-image publicId="wood_chair_orig.jpg" >

</cld-image>

Angular:

<cl-image public-id="wood_chair_orig.jpg" >

</cl-image>

.NET:

cloudinary.Api.UrlImgUp.BuildImageTag("wood_chair_orig.jpg")

Android:

MediaManager.get().url().generate("wood_chair_orig.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("wood_chair_orig.jpg")!, cloudinary: cloudinary)

by Josh Slivken May 01, 2018

Tags: