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:
And The Beatles loop with lyrics:
URL:
Ruby:
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:
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:
(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:
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:
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:
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:
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:
$.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:
<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:
<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:
<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:
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:
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:
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)