Cloudinary Cookbook recipes about Format

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

cl_video_tag("dog")

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

Extract frames from an animated GIF

Extract frames from an animated GIF, you can choose which frame to deliver, apply any further image manipulations including resizing, cropping, overlays and much more.

Original

1st frame-Default

10th frame

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

URL:

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

Ruby:

cl_image_tag("bored_animation.jpg")

PHP:

cl_image_tag("bored_animation.jpg")

Python:

CloudinaryImage("bored_animation.jpg").image()

Node.js:

cloudinary.image("bored_animation.jpg")

Java:

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

JS:

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

jQuery:

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

React:

<Image publicId="bored_animation.jpg" >

</Image>

Vue.js:

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

</cld-image>

Angular:

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

</cl-image>

.Net:

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

Android:

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

iOS:

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

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

cl_image_tag("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)