Cloudinary Blog

Cool Tricks for Resizing Images in JavaScript

Cool Tricks for Resizing Images in JavaScript

Resizing images with JavaScript (JS) creates nifty effects, many of which you cannot do in Cascading Style Sheets (CSS). However, even though you can automate a zoom effect with JS to enable users to zoom in and out of images, limitations abound.

This article shows you how to resize images for a zoom effect with JS and do the same much faster and more effectively in Cloudinary, with which you can also apply many other appealing effects. Examples are scaling with percentage values and scaling widths of up to 140 percent of the original. Be assured that you’ll be impressed.

Here are the topics:

Resizing Images for a Zoom Effect With JS

Resizing images with JS is particularly useful for creating online product galleries, in which users can zoom in or out of images according to the maximum settings you specify with only one click.

The resizing task takes two functions, which you can either insert directly into your HTML source with <script> tags or into a standalone JS file. Those functions work for any <img> tag that you label with the ID zoom_img. See this full demo of the code.

The two functions are as follows:

  • zoomin(), which creates a zoom-in action for scaling up the image size by 100 pixels until the maximum defined size (1000 px.) is reached.

    Copy to clipboard
    function zoomin(){
        var myImg = document.getElementById("zoom_img");
        var currWidth = myImg.clientWidth;
        if(currWidth >= 1000){
            alert("You’re fully zoomed in!");
        } else{
            myImg.style.width = (currWidth + 100) + "px";
        } 
    }
  • zoomout(), which creates a zoom-out action for scaling down the image by 100 pixels until the minimum defined size (50 px.) is reached.

    Copy to clipboard
    function zoomout(){
        var myImg = document.getElementById("zoom_img");
        var currWidth = myImg.clientWidth;
        if(currWidth >= 50){
            alert("That’s as small as it gets.");
        } else{
            myImg.style.width = (currWidth - 100) + "px";
        }
    }

To enable users to call those functions, create an interface (see below) with buttons for the image. Add them above or below the image element in your HTML file.

Copy to clipboard
<button type="button" onclick="zoomin()"><img src="/examples/images/zoom-in.png"> Zoom In</button>

<button type="button" onclick="zoomout()"><img src="/examples/images/zoom-out.png"> Zoom Out</button>

For more details on resizing images with CSS, see Image Resizing: Manually With CSS and Automatically With Cloudinary.

Automating Resizing With JS During Image Uploads

Automating the resizing task is ideal for enabling users to resize images or for resizing them with a built-in mechanism before being stored away. An example of the code in this section is on CodePen.

To start, build the HTML framework into which to load, preview, and transform your images. The following code creates an input to accept images, a button to enable resizing, and two placeholders for your original and resized images.

Copy to clipboard
<input id="imageFile" name="imageFile" type="file" class="imageFile" accept="image/*"/> 
<input type="button" value="Resize Image" 
onclick="resizeImage()"/> 
<br/>
<img src="" id="preview">
<img src="" id="output">

Next, create a function to accept the images:

Note
The code below is in jQuery. Be sure to link or refer to the jQuery library.

Copy to clipboard
$(document).ready(function() {
  $("#imageFile").change(function(event) {
    var files = event.target.files;
    var file = files[0];

    if (file) {
      var reader = new FileReader();
      reader.onload = function(e) {
        document.getElementById("preview").src = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  });
});

Finally, create a resizing function (see below) within which to load the image into the file reader, set the image to be resized, create a canvas for resizing, and output the resized image. Note the boldfaced comments for each of the steps.

Copy to clipboard
function resizeImage() {
 var filesToUploads = document.getElementById("imageFile").files;
  var file = filesToUploads[0];
    if (file) {
      var reader = new FileReader();

// Set the image for the FileReader
      reader.onload = function (e) {
        var img = document.createElement("img");
        img.src = e.target.result;

// Create your canvas
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        var MAX_WIDTH = 500;
        var MAX_HEIGHT = 500;
        var width = img.width;
        var height = img.height;

// Add the resizing logic
        if (width > height) {
          if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
          }
        } else {
          if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
          }
        }

//Specify the resizing result
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);

        dataurl = canvas.toDataURL(file.type);
        document.getElementById("output").src = dataurl;
      };
      reader.readAsDataURL(file);
    }
  }

Resizing and Rescaling Images Effectively and Speedily With Cloudinary

A cloud-based service for managing images and videos, Cloudinary offers a generous free-forever subscription plan. While on that platform, you can upload your images, apply built-in effects, filters, and modifications, including automated image rotations that are difficult or impossible to produce with CSS and JS.

Also with Cloudinary, you can easily transform images programmatically with SDKs or URL parameters. Cloudinary applies changes dynamically, leaving your original images intact. That means you can modify images on the fly as your site design evolves and as you support more devices and screen sizes—a huge convenience and time saver.

Below are three faster and easier ways in which to resize images with Cloudinary. All you need to do is add parameters to the URL.

Automating Smart Cropping

With Cloudinary, you can automatically crop images to the right size through content-aware AI. During the process, you can automatically select faces, individual features, or areas of interest by applying the gravity filter (g).

The g_auto settings in this example automatically crop the most interesting area, as determined by AI:

auto gravity

Copy to clipboard
cloudinary.imageTag('veducate/skater_2_-_800.jpg', {width: 300, height: 300, gravity: "auto", crop: "crop"}).toHtml();

You can also specify areas to preserve with smart cropping. A use case is to ensure that the model doesn’t take center stage in product images. This example specifies the backpack as the area of focus:

Ruby:
Copy to clipboard
cl_image_tag("veducate/spencer-backman-482079-unsplash.jpg", :gravity=>"auto:classic", :height=>175, :width=>175, :crop=>"thumb")
PHP:
Copy to clipboard
cl_image_tag("veducate/spencer-backman-482079-unsplash.jpg", array("gravity"=>"auto:classic", "height"=>175, "width"=>175, "crop"=>"thumb"))
Python:
Copy to clipboard
CloudinaryImage("veducate/spencer-backman-482079-unsplash.jpg").image(gravity="auto:classic", height=175, width=175, crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("veducate/spencer-backman-482079-unsplash.jpg", {gravity: "auto:classic", height: 175, width: 175, crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("auto:classic").height(175).width(175).crop("thumb")).imageTag("veducate/spencer-backman-482079-unsplash.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('veducate/spencer-backman-482079-unsplash.jpg', {gravity: "auto:classic", height: 175, width: 175, crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("veducate/spencer-backman-482079-unsplash.jpg", {gravity: "auto:classic", height: 175, width: 175, crop: "thumb"})
React:
Copy to clipboard
<Image publicId="veducate/spencer-backman-482079-unsplash.jpg" >
  <Transformation gravity="auto:classic" height="175" width="175" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="veducate/spencer-backman-482079-unsplash.jpg" >
  <cld-transformation gravity="auto:classic" height="175" width="175" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="veducate/spencer-backman-482079-unsplash.jpg" >
  <cl-transformation gravity="auto:classic" height="175" width="175" crop="thumb">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("auto:classic").Height(175).Width(175).Crop("thumb")).BuildImageTag("veducate/spencer-backman-482079-unsplash.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("auto:classic").height(175).width(175).crop("thumb")).generate("veducate/spencer-backman-482079-unsplash.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("auto:classic").setHeight(175).setWidth(175).setCrop("thumb")).generate("veducate/spencer-backman-482079-unsplash.jpg")!, cloudinary: cloudinary)
g_auto:classic Transformation Applied to It
g_auto:classic
Ruby:
Copy to clipboard
cl_image_tag("veducate/spencer-backman-482079-unsplash.jpg", :gravity=>"auto:backpack", :height=>175, :width=>175, :crop=>"thumb")
PHP:
Copy to clipboard
cl_image_tag("veducate/spencer-backman-482079-unsplash.jpg", array("gravity"=>"auto:backpack", "height"=>175, "width"=>175, "crop"=>"thumb"))
Python:
Copy to clipboard
CloudinaryImage("veducate/spencer-backman-482079-unsplash.jpg").image(gravity="auto:backpack", height=175, width=175, crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("veducate/spencer-backman-482079-unsplash.jpg", {gravity: "auto:backpack", height: 175, width: 175, crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("auto:backpack").height(175).width(175).crop("thumb")).imageTag("veducate/spencer-backman-482079-unsplash.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('veducate/spencer-backman-482079-unsplash.jpg', {gravity: "auto:backpack", height: 175, width: 175, crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("veducate/spencer-backman-482079-unsplash.jpg", {gravity: "auto:backpack", height: 175, width: 175, crop: "thumb"})
React:
Copy to clipboard
<Image publicId="veducate/spencer-backman-482079-unsplash.jpg" >
  <Transformation gravity="auto:backpack" height="175" width="175" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="veducate/spencer-backman-482079-unsplash.jpg" >
  <cld-transformation gravity="auto:backpack" height="175" width="175" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="veducate/spencer-backman-482079-unsplash.jpg" >
  <cl-transformation gravity="auto:backpack" height="175" width="175" crop="thumb">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("auto:backpack").Height(175).Width(175).Crop("thumb")).BuildImageTag("veducate/spencer-backman-482079-unsplash.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("auto:backpack").height(175).width(175).crop("thumb")).generate("veducate/spencer-backman-482079-unsplash.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("auto:backpack").setHeight(175).setWidth(175).setCrop("thumb")).generate("veducate/spencer-backman-482079-unsplash.jpg")!, cloudinary: cloudinary)
backback
g_auto:backpack

Copy to clipboard
cloudinary.imageTag('veducate/spencer-backman-482079-unsplash.jpg', {width: 175, height: 175, gravity: "auto:backpack", crop: "thumb"}).toHtml();

Creating Photo Collages

Photo collages are fun. By combining the overlay (o) and crop (c) parameters, you can collect images in any order and embellish them with text or filters.

The example below adds images to the collage with the desired size (w and h attributes), position (x and y attributes), crop mode (c attribute), and angle of rotation (`av attribute).

Ruby:
Copy to clipboard
cl_image_tag("yellow_tulip.jpg", :transformation=>[
  {:width=>220, :height=>140, :crop=>"fill"},
  {:overlay=>"brown_sheep", :width=>220, :height=>140, :x=>220, :crop=>"fill"},
  {:overlay=>"horses", :width=>220, :height=>140, :y=>140, :x=>-110, :crop=>"fill"},
  {:overlay=>"white_chicken", :width=>220, :height=>140, :y=>70, :x=>110, :crop=>"fill"},
  {:overlay=>"butterfly.png", :height=>200, :x=>-10, :angle=>10}
  ])
PHP:
Copy to clipboard
cl_image_tag("yellow_tulip.jpg", array("transformation"=>array(
  array("width"=>220, "height"=>140, "crop"=>"fill"),
  array("overlay"=>"brown_sheep", "width"=>220, "height"=>140, "x"=>220, "crop"=>"fill"),
  array("overlay"=>"horses", "width"=>220, "height"=>140, "y"=>140, "x"=>-110, "crop"=>"fill"),
  array("overlay"=>"white_chicken", "width"=>220, "height"=>140, "y"=>70, "x"=>110, "crop"=>"fill"),
  array("overlay"=>"butterfly.png", "height"=>200, "x"=>-10, "angle"=>10)
  )))
Python:
Copy to clipboard
CloudinaryImage("yellow_tulip.jpg").image(transformation=[
  {'width': 220, 'height': 140, 'crop': "fill"},
  {'overlay': "brown_sheep", 'width': 220, 'height': 140, 'x': 220, 'crop': "fill"},
  {'overlay': "horses", 'width': 220, 'height': 140, 'y': 140, 'x': -110, 'crop': "fill"},
  {'overlay': "white_chicken", 'width': 220, 'height': 140, 'y': 70, 'x': 110, 'crop': "fill"},
  {'overlay': "butterfly.png", 'height': 200, 'x': -10, 'angle': 10}
  ])
Node.js:
Copy to clipboard
cloudinary.image("yellow_tulip.jpg", {transformation: [
  {width: 220, height: 140, crop: "fill"},
  {overlay: "brown_sheep", width: 220, height: 140, x: 220, crop: "fill"},
  {overlay: "horses", width: 220, height: 140, y: 140, x: -110, crop: "fill"},
  {overlay: "white_chicken", width: 220, height: 140, y: 70, x: 110, crop: "fill"},
  {overlay: "butterfly.png", height: 200, x: -10, angle: 10}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(220).height(140).crop("fill").chain()
  .overlay(new Layer().publicId("brown_sheep")).width(220).height(140).x(220).crop("fill").chain()
  .overlay(new Layer().publicId("horses")).width(220).height(140).y(140).x(-110).crop("fill").chain()
  .overlay(new Layer().publicId("white_chicken")).width(220).height(140).y(70).x(110).crop("fill").chain()
  .overlay(new Layer().publicId("butterfly.png")).height(200).x(-10).angle(10)).imageTag("yellow_tulip.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('yellow_tulip.jpg', {transformation: [
  {width: 220, height: 140, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, x: 220, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, y: 140, x: -110, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, y: 70, x: 110, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("butterfly.png"), height: 200, x: -10, angle: 10}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("yellow_tulip.jpg", {transformation: [
  {width: 220, height: 140, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, x: 220, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, y: 140, x: -110, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, y: 70, x: 110, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("butterfly.png"), height: 200, x: -10, angle: 10}
  ]})
React:
Copy to clipboard
<Image publicId="yellow_tulip.jpg" >
  <Transformation width="220" height="140" crop="fill" />
  <Transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill" />
  <Transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill" />
  <Transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill" />
  <Transformation overlay="butterfly.png" height="200" x="-10" angle="10" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="yellow_tulip.jpg" >
  <cld-transformation width="220" height="140" crop="fill" />
  <cld-transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill" />
  <cld-transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill" />
  <cld-transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill" />
  <cld-transformation overlay="butterfly.png" height="200" x="-10" angle="10" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="yellow_tulip.jpg" >
  <cl-transformation width="220" height="140" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="butterfly.png" height="200" x="-10" angle="10">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(220).Height(140).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("brown_sheep")).Width(220).Height(140).X(220).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("horses")).Width(220).Height(140).Y(140).X(-110).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("white_chicken")).Width(220).Height(140).Y(70).X(110).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("butterfly.png")).Height(200).X(-10).Angle(10)).BuildImageTag("yellow_tulip.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(220).height(140).crop("fill").chain()
  .overlay(new Layer().publicId("brown_sheep")).width(220).height(140).x(220).crop("fill").chain()
  .overlay(new Layer().publicId("horses")).width(220).height(140).y(140).x(-110).crop("fill").chain()
  .overlay(new Layer().publicId("white_chicken")).width(220).height(140).y(70).x(110).crop("fill").chain()
  .overlay(new Layer().publicId("butterfly.png")).height(200).x(-10).angle(10)).generate("yellow_tulip.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(220).setHeight(140).setCrop("fill").chain()
  .setOverlay("brown_sheep").setWidth(220).setHeight(140).setX(220).setCrop("fill").chain()
  .setOverlay("horses").setWidth(220).setHeight(140).setY(140).setX(-110).setCrop("fill").chain()
  .setOverlay("white_chicken").setWidth(220).setHeight(140).setY(70).setX(110).setCrop("fill").chain()
  .setOverlay("butterfly.png").setHeight(200).setX(-10).setAngle(10)).generate("yellow_tulip.jpg")!, cloudinary: cloudinary)
collage

Copy to clipboard
cloudinary.imageTag('yellow_tulip.jpg', {transformation: [
  {width: 220, height: 140, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, crop: "fill", x: 220},
  {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, crop: "fill", y: 140, x: -110},
  {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, crop: "fill", y: 70, x: 110},
  {overlay: new cloudinary.Layer().publicId("butterfly"), height: 200, x: -10, angle: 10}
  ]}).toHtml();

Cropping With Custom Shapes

By cropping images into custom shapes, you can fit them in any space. Simply apply the overlay parameter as a mask and the flag (f in the URL) parameter.

To set things up, specify the final image size, define the mask and the related function, and specify the source image, like this:

Ruby:
Copy to clipboard
cl_image_tag("pasta.png", :transformation=>[
  {:width=>173, :height=>200, :crop=>"fill"},
  {:overlay=>"hexagon_sample", :flags=>"cutter"}
  ])
PHP:
Copy to clipboard
cl_image_tag("pasta.png", array("transformation"=>array(
  array("width"=>173, "height"=>200, "crop"=>"fill"),
  array("overlay"=>"hexagon_sample", "flags"=>"cutter")
  )))
Python:
Copy to clipboard
CloudinaryImage("pasta.png").image(transformation=[
  {'width': 173, 'height': 200, 'crop': "fill"},
  {'overlay': "hexagon_sample", 'flags': "cutter"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("pasta.png", {transformation: [
  {width: 173, height: 200, crop: "fill"},
  {overlay: "hexagon_sample", flags: "cutter"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(173).height(200).crop("fill").chain()
  .overlay(new Layer().publicId("hexagon_sample")).flags("cutter")).imageTag("pasta.png");
JS:
Copy to clipboard
cloudinary.imageTag('pasta.png', {transformation: [
  {width: 173, height: 200, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("hexagon_sample"), flags: "cutter"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("pasta.png", {transformation: [
  {width: 173, height: 200, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("hexagon_sample"), flags: "cutter"}
  ]})
React:
Copy to clipboard
<Image publicId="pasta.png" >
  <Transformation width="173" height="200" crop="fill" />
  <Transformation overlay="hexagon_sample" flags="cutter" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="pasta.png" >
  <cld-transformation width="173" height="200" crop="fill" />
  <cld-transformation overlay="hexagon_sample" flags="cutter" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="pasta.png" >
  <cl-transformation width="173" height="200" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="hexagon_sample" flags="cutter">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(173).Height(200).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("hexagon_sample")).Flags("cutter")).BuildImageTag("pasta.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(173).height(200).crop("fill").chain()
  .overlay(new Layer().publicId("hexagon_sample")).flags("cutter")).generate("pasta.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(173).setHeight(200).setCrop("fill").chain()
  .setOverlay("hexagon_sample").setFlags("cutter")).generate("pasta.png")!, cloudinary: cloudinary)
hexagon

Copy to clipboard
cloudinary.imageTag('pasta.png', {transformation: [
  {width: 173, height: "200", crop: fill},
  {overlay: new cloudinary.Layer().publicId("hexagon_sample"), flags: cutter},
  ]}).toHtml();

Adding the relative parameter matches the mask to the proportions you desire, as in this example:

Ruby:
Copy to clipboard
cl_image_tag("pasta.png", :overlay=>"hexagon_sample", :flags=>["cutter", "relative"], :width=>1.0, :height=>1.0)
PHP:
Copy to clipboard
cl_image_tag("pasta.png", array("overlay"=>"hexagon_sample", "flags"=>array("cutter", "relative"), "width"=>1.0, "height"=>1.0))
Python:
Copy to clipboard
CloudinaryImage("pasta.png").image(overlay="hexagon_sample", flags=["cutter", "relative"], width=1.0, height=1.0)
Node.js:
Copy to clipboard
cloudinary.image("pasta.png", {overlay: "hexagon_sample", flags: ["cutter", "relative"], width: "1.0", height: "1.0"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("hexagon_sample")).flags("cutter", "relative").width(1.0).height(1.0)).imageTag("pasta.png");
JS:
Copy to clipboard
cloudinary.imageTag('pasta.png', {overlay: new cloudinary.Layer().publicId("hexagon_sample"), flags: ["cutter", "relative"], width: "1.0", height: "1.0"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("pasta.png", {overlay: new cloudinary.Layer().publicId("hexagon_sample"), flags: ["cutter", "relative"], width: "1.0", height: "1.0"})
React:
Copy to clipboard
<Image publicId="pasta.png" >
  <Transformation overlay="hexagon_sample" flags={["cutter", "relative"]} width="1.0" height="1.0" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="pasta.png" >
  <cld-transformation overlay="hexagon_sample" flags={["cutter", "relative"]} width="1.0" height="1.0" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="pasta.png" >
  <cl-transformation overlay="hexagon_sample" flags={{["cutter", "relative"]}} width="1.0" height="1.0">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("hexagon_sample")).Flags("cutter", "relative").Width(1.0).Height(1.0)).BuildImageTag("pasta.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("hexagon_sample")).flags("cutter", "relative").width(1.0).height(1.0)).generate("pasta.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("hexagon_sample").setFlags("cutter", "relative").setWidth(1.0).setHeight(1.0)).generate("pasta.png")!, cloudinary: cloudinary)
relative

Copy to clipboard
cloudinary.imageTag('pasta.png', {transformation: [
  {overlay: new cloudinary.Layer().publicId("hexagon_sample"), flags: cutter:relative, width: 1.0, height: 1.0}
  ]}).toHtml();

Learning More About Cloudinary

Besides the capability for image resizing, Cloudinary offers a multitude of robust tools for web developers, including the following:

  • Automated image uploads. You can upload images at scale anywhere from a browser, mobile app, or application back-end directly to the cloud.
  • Generous image storage. Cloudinary accords you up to 25 GB free managed, secure, and cloud-based storage space with multiregion backup, revision history, and disaster recovery.
  • Seamless asset management. You can efficiently manage your image library on Cloudinary by performing tasks like searching, organizing, and tagging files; controlling access; and monitoring usage and performance.
  • Effective image transformation. You can transform, enhance, transcode, crop, scale, and enhance images with a URL-based API or with SDKs that support all popular programming languages.
  • Automated image optimization. Cloudinary automatically selects the optimal quality and encoding settings for images, adapts the settings to any resolution or pixel density, and scales or crops images to focus on the important regions.
  • Responsive images. Cloudinary automatically scales images in an art-directed manner, cropping them to fit different resolutions and viewports.
  • Reliable and fast image delivery. Cloudinary delivers images through Content Delivery Networks (CDNs)—Akamai, Fastly, and CloudFront—with no integration or management on your part.

Do give Cloudinary a try. To start, sign up for a free account.

Checking Out the Details of CSS Image Transformations

Want to learn more about CSS image transformations? These articles are an excellent resource:

Recent Blog Posts

Transitioning JPEG-Based to JPEG XL-Based Images for Web Platforms

When the JPEG codec was being developed in the late 1980s, no standardized, lossy image-compression formats existed. JPEG became ready at exactly the right time in 1992, when the World Wide Web and digital cameras were about to become a thing. The introduction of HTML’s <img> tag in 1995 ensured the recognition of JPEG as the web format—at least for photographs. During the 1990s, digital cameras replaced analog ones and, given the limited memory capacities of that era, JPEG became the standard format for photography, especially for consumer-grade cameras.

Read more

Amplify Your Jamstack With Video

By Alex Patterson
Amplify Your Jamstack With Cloudinary Video

As defined by Amazon Web Services (AWS), Amplify is a set of products and tools with which mobile and front-end web developers can build and deploy AWS-powered, secure, and scalable full-stack apps. Also, you can efficiently configure their back ends, connect them to your app with just a few lines of code, and deploy static web apps in only three steps. Historically, because of their performance issues, managing images and videos is a daunting challenge for developers. Even though you can easily load media to an S3 bucket with AWS Amplify, transforming, compressing, and responsively delivering them is labor intensive and time consuming.

Read more
Cloudinary Helps Move James Hardie’s Experience Online

While COVID has affected most businesses, it has been particularly hard on those that sell products for the physical ‘brick and mortar’ world. One company that literally fits that bill is our Australian customer James Hardie, the largest global manufacturer of fibre cement products used in both domestic and commercial construction. These are materials that its buyers ideally want to see up close, in detail. When customers have questions, they expect personal service.

Read more
How to Build an Enhanced Gravatar Service, Part 2

Part 1 of this post defines the capabilities of an enhanced Gravatar service, which I named Clavatar, and describes the following initial steps for building it:

This post, part 2 of the series, explains how to make Clavatar work like Gravatar and to develop Clavatar’s capabilities of enabling requests for various versions of the images related to user accounts.

Read more