Product Updates

Curving images

Nov 09, 2017

This cool feature allows you to create curved images or text with the transformation e_distort:arc:[degrees].

For example, this image has been curved to 180 degrees:

Ruby:
Copy to clipboard
cl_image_tag("one_way_sign.png", :effect=>"distort:arc:-180")
PHP v1:
Copy to clipboard
cl_image_tag("one_way_sign.png", array("effect"=>"distort:arc:-180"))
PHP v2:
Copy to clipboard
(new ImageTag('one_way_sign.png'))
  ->reshape(Reshape::distortArc(-180));
Python:
Copy to clipboard
CloudinaryImage("one_way_sign.png").image(effect="distort:arc:-180")
Node.js:
Copy to clipboard
cloudinary.image("one_way_sign.png", {effect: "distort:arc:-180"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("distort:arc:-180")).imageTag("one_way_sign.png");
JS:
Copy to clipboard
cloudinary.imageTag('one_way_sign.png', {effect: "distort:arc:-180"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("one_way_sign.png", {effect: "distort:arc:-180"})
React:
Copy to clipboard
<Image publicId="one_way_sign.png" >
  <Transformation effect="distort:arc:-180" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="one_way_sign.png" >
  <cld-transformation effect="distort:arc:-180" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="one_way_sign.png" >
  <cl-transformation effect="distort:arc:-180">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("distort:arc:-180")).BuildImageTag("one_way_sign.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("distort:arc:-180")).generate("one_way_sign.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("distort:arc:-180")).generate("one_way_sign.png")!, cloudinary: cloudinary)
Curved image

And The Beatles loop with lyrics:

Ruby:
Copy to clipboard
cl_image_tag("the_beatles.jpg", :transformation=>[
  {:width=>400, :height=>400, :gravity=>"auto", :crop=>"fill"},
  {:overlay=>{:font_family=>"Arial", :font_size=>20, :text=>"Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on"}, :color=>"yellow", :effect=>"distort:arc:350"}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("the_beatles.jpg", array("transformation"=>array(
  array("width"=>400, "height"=>400, "gravity"=>"auto", "crop"=>"fill"),
  array("overlay"=>array("font_family"=>"Arial", "font_size"=>20, "text"=>"Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on"), "color"=>"yellow", "effect"=>"distort:arc:350")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('the_beatles.jpg'))
  ->resize(Resize::fill()->width(400)->height(400)->gravity(Gravity::autoGravity()))
  ->overlay(
      Overlay::source(Source::text('Ob-la-di ob-la-da life goes on bra La-la how the life goes on', (new TextStyle('Arial', 20)))
        ->textColor(Color::YELLOW)
        ->transformation((new ImageTransformation())
          ->reshape(Reshape::distortArc(350))
  )));
Python:
Copy to clipboard
CloudinaryImage("the_beatles.jpg").image(transformation=[
  {'width': 400, 'height': 400, 'gravity': "auto", 'crop': "fill"},
  {'overlay': {'font_family': "Arial", 'font_size': 20, 'text': "Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on"}, 'color': "yellow", 'effect': "distort:arc:350"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("the_beatles.jpg", {transformation: [
  {width: 400, height: 400, gravity: "auto", crop: "fill"},
  {overlay: {font_family: "Arial", font_size: 20, text: "Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on"}, color: "yellow", effect: "distort:arc:350"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(400).height(400).gravity("auto").crop("fill").chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(20).text("Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on")).color("yellow").effect("distort:arc:350")).imageTag("the_beatles.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('the_beatles.jpg', {transformation: [
  {width: 400, height: 400, gravity: "auto", crop: "fill"},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(20).text("Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on"), color: "yellow", effect: "distort:arc:350"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("the_beatles.jpg", {transformation: [
  {width: 400, height: 400, gravity: "auto", crop: "fill"},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(20).text("Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on"), color: "yellow", effect: "distort:arc:350"}
  ]})
React:
Copy to clipboard
<Image publicId="the_beatles.jpg" >
  <Transformation width="400" height="400" gravity="auto" crop="fill" />
  <Transformation overlay={{fontFamily: "Arial", fontSize: 20, text: "Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on"}} color="yellow" effect="distort:arc:350" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="the_beatles.jpg" >
  <cld-transformation width="400" height="400" gravity="auto" crop="fill" />
  <cld-transformation :overlay="{fontFamily: 'Arial', fontSize: 20, text: 'Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on'}" color="yellow" effect="distort:arc:350" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="the_beatles.jpg" >
  <cl-transformation width="400" height="400" gravity="auto" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="text:Arial_20:Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on" color="yellow" effect="distort:arc:350">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(400).Height(400).Gravity("auto").Crop("fill").Chain()
  .Overlay(new TextLayer().FontFamily("Arial").FontSize(20).Text("Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on")).Color("yellow").Effect("distort:arc:350")).BuildImageTag("the_beatles.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(400).height(400).gravity("auto").crop("fill").chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(20).text("Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on")).color("yellow").effect("distort:arc:350")).generate("the_beatles.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(400).setHeight(400).setGravity("auto").setCrop("fill").chain()
  .setOverlay("text:Arial_20:Ob-la-di%20ob-la-da%20life%20goes%20on%20bra%20La-la%20how%20the%20life%20goes%20on").setColor("yellow").setEffect("distort:arc:350")).generate("the_beatles.jpg")!, cloudinary: cloudinary)
Curved text

← Back to all product updates