{"id":21360,"date":"2016-03-10T13:24:04","date_gmt":"2016-03-10T13:24:04","guid":{"rendered":"http:\/\/painless_image_and_video_manipulation_with_javascript"},"modified":"2024-06-01T10:28:07","modified_gmt":"2024-06-01T17:28:07","slug":"painless_image_and_video_manipulation_with_javascript","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/painless_image_and_video_manipulation_with_javascript","title":{"rendered":"Automated JavaScript Image Transformation and Management"},"content":{"rendered":"

TL;DR<\/h3>\n

Cloudinary\u2019s JavaScript library accelerates web development by providing automated JavaScript image transformation and management with a few lines of code. The newly released version streamlines the library by providing a much requested jQuery-free core library. At the same time it is fully backward compatible with previous versions. The new library is further enhanced with classes and a chainable API, making the implementation of Cloudinary functionality in your application easier (and more enjoyable!).<\/p>\n

Overview<\/h3>\n

Virtually all websites incorporate images and videos in their web pages. With the proliferation of web platforms, devices and rising user expectations, handling media is an increasingly complex task. Services such as Cloudinary alleviate the pain by relieving the developer from having to manually transform images, respond to device and layout constraints, and manage storage and availability concerns.<\/p>\n

A typical mistake made by novice developers is to provide full size images on the web page. This guaranties that the page will look great on the highest resolution, but at a large cost to download and response times – not to mention bandwidth costs.<\/p>\n

The easiest solution – using JavaScript image transformation software to create a smaller resolution version of each image – is quickly revealed to be an exponentially difficult task. For one thing, you have to code your web page to display the right image file. Furthermore, you have to keep track of all files related to the same source image. And any change in layout may require rescaling and re-cropping.<\/p>\n

Rinse and repeat for each and every image.<\/p>\n

Cloudinary\u2019s JavaScript library <\/a>essentially eliminates this nightmare.<\/p>\n

Cloudinary\u2019s strength is largely due to its ability to transform images using a simply coded URL. For example, adding c_scale,w_500<\/code> to the URL will scale the image to a width of – you guessed it – 500 pixels. The image is automatically scaled and cached on a CDN, ready to be served.<\/p>\n

Cloudinary\u2019s JavaScript API <\/a>\u00a0provides the functionality required to programmatically declare the required transformations and generate Cloudinary resource URLs. For example, the aforementioned transformation can be expressed using the following configuration object: {crop: \u201cscale\u201d, width: 500}<\/code>.<\/p>\n

Creating the imageURL (which will also generate a new image) is simple and intuitive:<\/p>\n

cl<\/span>.url<\/span>( \"elephants<\/span>.jpg<\/span>\", {crop<\/span>: \"scale\"<\/span>, width: 500<\/span>});\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
You can also generate the entire image tag:<\/p>\n
cl.image( \"elephants.jpg\", {crop: \"scale\", width: 500});\n\/\/ <img<\/span> src<\/span>=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/c_scale,w_500\/elephants.jpg\"<\/span> width<\/span>=\"500\"<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
For more artistic results:<\/p>\n
var<\/span> artistic = Transformation.new<\/span>()\n       .crop(\"scale\"<\/span>)\n       .width(500<\/span>)\n       .radius(\"max\"<\/span>)\n       .effect(\"oil_paint:50\"<\/span>);\n\ncl.image(\"elephants.jpg\"<\/span>, artistic);\n\/\/ <img src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/c_scale,e_oil_paint:50,r_max,w_500\/elephants.jpg\" ><\/span>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
cl.image(\"horses.jpg\", artistic);\n\/\/ <img<\/span> src<\/span>=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/c_scale,e_oil_paint:50,r_max,w_500\/horses.jpg\"<\/span> ><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
See what I mean?<\/p>\n
In addition, the SDK provides the functionality required to upload images from the browser directly to the cloud<\/a>, and apply responsive<\/a> behavior to the displayed images. For more information on the available SDKs and media transformation options, see Cloudinary\u2019s documentation<\/a>.<\/p>\n
Main Features<\/h2>\n
The Cloudinary JavaScript library functionality is represented using several classes.<\/p>\n
The main class, Cloudinary, provides an API for:<\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\"Oil<\/a><\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\"Oil<\/a><\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\"Scaled<\/a><\/p>\n