前端开发者可能想将多图像合并成单图像举例说,当创建并添加水印照片时,添加形状或徽章,准备内容打印(例如贴上标识T恤或杯子,加字幕等
多图像可同时叠加一加二加二然而,由于底层图像和叠加图像互不相容并发,更不用说图形设计,你可能需要执行进一步的图像变换(例如:变大小、裁剪、换色、造型更好云台从这里插手
云化图像叠加特征帮助用户易组合多图像支持图像和文本使用即时变换URL在此博客文章中,我们将展示你如何分离变换、处理和变换底层图像和叠加图像,然后动态生成出可嵌入网站的生成图像
假设你网站销售个性化馈赠用户可用文件上传照片自定义添加文本 网站自定义裁剪 变换照片自选文本举个例子,一对情侣可能想把照片放在咖啡杯上需要调整并变换咖啡杯底层图像 和双组叠加图片图像安装后,可添加文本并按需执行进一步的变换
上传云端供进一步变换和交付
可使用云性图象叠加叠加参数(或)I级面向 URLs)回归例子中, 咖啡杯最终版会像一对叠加图片:
<\/Image>","codeSnippet":"
![]()
\n\t
\n\t
\n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation().resize(scale().width(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(18)\n )\n );","codeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation().resize(scale().width(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(18)\n )\n );","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":"
<\/cld-image>","codeSnippet":"
\n\t
\n\t
\n<\/cld-image>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation().resize(scale().width(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(18)\n )\n );","codeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation().resize(scale().width(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(18)\n )\n );","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":"
<\/cl-transformation>
<\/cl-transformation> <\/cl-image>","codeSnippet":"
\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n<\/cl-image>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation().resize(scale().width(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(18)\n )\n );","codeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation().resize(scale().width(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(18)\n )\n );","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('coffee_cup.jpg', {transformation: [ {width: 400, height: 250, gravity: \"south\", crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"nice_couple\"), width: 90, gravity: \"center\", y: 18, x: -20} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('coffee_cup.jpg', {transformation: [\n {width: 400, height: 250, gravity: \"south\", crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"nice_couple\"), width: 90, gravity: \"center\", y: 18, x: -20}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"coffee_cup.jpg\").image(transformation=[ {'width': 400, 'height': 250, 'gravity': \"south\", 'crop': \"fill\"}, {'overlay': \"nice_couple\", 'width': 90, 'gravity': \"center\", 'y': 18, 'x': -20} ])","codeSnippet":"CloudinaryImage(\"coffee_cup.jpg\").image(transformation=[\n {'width': 400, 'height': 250, 'gravity': \"south\", 'crop': \"fill\"},\n {'overlay': \"nice_couple\", 'width': 90, 'gravity': \"center\", 'y': 18, 'x': -20}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('coffee_cup.jpg'))\n\t->resize(Resize::fill()->width(400)\n->height(250)\n\t->gravity(\n\tGravity::compass(\n\tCompass::south()))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"nice_couple\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(90)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::center()))\n->offsetX(-20)\n->offsetY(18))\n\t);","codeSnippet":"(new ImageTag('coffee_cup.jpg'))\n\t->resize(Resize::fill()->width(400)\n->height(250)\n\t->gravity(\n\tGravity::compass(\n\tCompass::south()))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"nice_couple\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(90)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::center()))\n->offsetX(-20)\n->offsetY(18))\n\t);","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"coffee_cup.jpg\", array(\"transformation\"=>array( array(\"width\"=>400, \"height\"=>250, \"gravity\"=>\"south\", \"crop\"=>\"fill\"), array(\"overlay\"=>\"nice_couple\", \"width\"=>90, \"gravity\"=>\"center\", \"y\"=>18, \"x\"=>-20) )))","codeSnippet":"cl_image_tag(\"coffee_cup.jpg\", array(\"transformation\"=>array(\n array(\"width\"=>400, \"height\"=>250, \"gravity\"=>\"south\", \"crop\"=>\"fill\"),\n array(\"overlay\"=>\"nice_couple\", \"width\"=>90, \"gravity\"=>\"center\", \"y\"=>18, \"x\"=>-20)\n )))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().width(400).height(250).gravity(\"south\").crop(\"fill\").chain() .overlay(new Layer().publicId(\"nice_couple\")).width(90).gravity(\"center\").y(18).x(-20)).imageTag(\"coffee_cup.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .width(400).height(250).gravity(\"south\").crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"nice_couple\")).width(90).gravity(\"center\").y(18).x(-20)).imageTag(\"coffee_cup.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"coffee_cup.jpg\", :transformation=>[ {:width=>400, :height=>250, :gravity=>\"south\", :crop=>\"fill\"}, {:overlay=>\"nice_couple\", :width=>90, :gravity=>\"center\", :y=>18, :x=>-20} ])","codeSnippet":"cl_image_tag(\"coffee_cup.jpg\", :transformation=>[\n {:width=>400, :height=>250, :gravity=>\"south\", :crop=>\"fill\"},\n {:overlay=>\"nice_couple\", :width=>90, :gravity=>\"center\", :y=>18, :x=>-20}\n ])","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Height(250).Gravity(\"south\").Crop(\"fill\").Chain() .Overlay(new Layer().PublicId(\"nice_couple\")).Width(90).Gravity(\"center\").Y(18).X(-20)).BuildImageTag(\"coffee_cup.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .Width(400).Height(250).Gravity(\"south\").Crop(\"fill\").Chain()\n .Overlay(new Layer().PublicId(\"nice_couple\")).Width(90).Gravity(\"center\").Y(18).X(-20)).BuildImageTag(\"coffee_cup.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('coffee_cup.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(400)\n.height(250)\n\t.gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"nice_couple\")\n\t.transformation(new Transformation()\n\t.resize(Resize.scale().width(90)))\n\t)\n\t.position(Position()\n\t.gravity(\n\tGravity.compass(\n\tCompass.center()))\n.offsetX(-20)\n.offsetY(18))\n\t));","codeSnippet":"cloudinary.image('coffee_cup.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(400)\n.height(250)\n\t.gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"nice_couple\")\n\t.transformation(new Transformation()\n\t.resize(Resize.scale().width(90)))\n\t)\n\t.position(Position()\n\t.gravity(\n\tGravity.compass(\n\tCompass.center()))\n.offsetX(-20)\n.offsetY(18))\n\t));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setHeight(250).setGravity(\"south\").setCrop(\"fill\").chain() .setOverlay(\"nice_couple\").setWidth(90).setGravity(\"center\").setY(18).setX(-20)).generate(\"coffee_cup.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setWidth(400).setHeight(250).setGravity(\"south\").setCrop(\"fill\").chain()\n .setOverlay(\"nice_couple\").setWidth(90).setGravity(\"center\").setY(18).setX(-20)).generate(\"coffee_cup.jpg\")!, cloudinary: cloudinary)","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().width(400).height(250).gravity(\"south\").crop(\"fill\").chain() .overlay(new Layer().publicId(\"nice_couple\")).width(90).gravity(\"center\").y(18).x(-20)).generate(\"coffee_cup.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .width(400).height(250).gravity(\"south\").crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"nice_couple\")).width(90).gravity(\"center\").y(18).x(-20)).generate(\"coffee_cup.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('coffee_cup.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(400)\n.height(250)\n\t.gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"nice_couple\")\n\t.transformation(new Transformation()\n\t.resize(Resize.scale().width(90)))\n\t)\n\t.position(Position()\n\t.gravity(\n\tGravity.compass(\n\tCompass.center()))\n.offsetX(-20)\n.offsetY(18))\n\t));","codeSnippet":"cloudinary.image('coffee_cup.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(400)\n.height(250)\n\t.gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"nice_couple\")\n\t.transformation(new Transformation()\n\t.resize(Resize.scale().width(90)))\n\t)\n\t.position(Position()\n\t.gravity(\n\tGravity.compass(\n\tCompass.center()))\n.offsetX(-20)\n.offsetY(18))\n\t));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"coffee_cup.jpg\")\n\t resize(Resize.fill() { width(400)\n height(250)\n\t gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"nice_couple\") {\n\t transformation(Transformation {\n\t resize(Resize.scale() { width(90) }) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.center()))\n offsetX(-20)\n offsetY(18) })\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"coffee_cup.jpg\")\n\t resize(Resize.fill() { width(400)\n height(250)\n\t gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"nice_couple\") {\n\t transformation(Transformation {\n\t resize(Resize.scale() { width(90) }) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.center()))\n offsetX(-20)\n offsetY(18) })\n\t }) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.image(\"coffee_cup.jpg\", {transformation: [ {width: 400, height: 250, gravity: \"south\", crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"nice_couple\"), width: 90, gravity: \"center\", y: 18, x: -20} ]})","codeSnippet":"$.cloudinary.image(\"coffee_cup.jpg\", {transformation: [\n {width: 400, height: 250, gravity: \"south\", crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"nice_couple\"), width: 90, gravity: \"center\", y: 18, x: -20}\n ]})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation().resize(scale().width(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(18)\n )\n );","codeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation().resize(scale().width(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(18)\n )\n );","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.aaaalireno.com\/demo\/image\/upload\/w_400,h_250,c_fill,g_south\/l_nice_couple,w_90,g_center,y_18,x_-20\/coffee_cup.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"width":"400","height":"250","crop_mode":"fill","gravity":"south"},{"overlay":"nice_couple","width":"90","gravity":"center","y":"18","x":"-20"}],"transformation_string":"w_400,h_250,c_fill,g_south\/l_nice_couple,w_90,g_center,y_18,x_-20","url_suffix":"","version":"","secure":true,"public_id":"coffee_cup.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
变换指令使用动态URL执行图像变换云端库帮助建立这些URL可应用多链变换法用斜线拆分/图像URL
为了更好地变换图像叠加,你可以设置标志参数切换层位应用或fl_laya应用并转告云端所有链式变换直到标注,应用到叠加图像上,而不是嵌入图像上
使用咖啡杯示例,下面你可以看到我们如何应用多变并存图像和叠加嵌入式图像裁剪填充400x250矩形并用脸部检测裁剪双对叠图色饱和度提高50%并应用 vignette效果最后,生成图像已重排到100像素宽度,转换成圆形并配置20像素从封装图像中心偏移
<\/Image>","codeSnippet":"
![]()
\n\t
\n\t
\n\t
\n\t
\n\t
\n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n );","codeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n );","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":"
<\/cld-image>","codeSnippet":"
\n\t
\n\t
\n\t
\n\t
\n\t
\n<\/cld-image>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n );","codeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n );","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":"
<\/cl-transformation>
<\/cl-transformation>
<\/cl-transformation>
<\/cl-transformation>
<\/cl-transformation> <\/cl-image>","codeSnippet":"
\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n<\/cl-image>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n );","codeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n );","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('coffee_cup.jpg', {transformation: [ {width: 400, height: 250, gravity: \"south\", crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"nice_couple\"), width: \"1.3\", height: \"1.3\", gravity: \"faces\", flags: \"region_relative\", crop: \"crop\"}, {effect: \"saturation:50\"}, {effect: \"vignette\"}, {flags: \"layer_apply\", width: 100, radius: \"max\", gravity: \"center\", y: 20, x: -20, crop: \"scale\"} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('coffee_cup.jpg', {transformation: [\n {width: 400, height: 250, gravity: \"south\", crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"nice_couple\"), width: \"1.3\", height: \"1.3\", gravity: \"faces\", flags: \"region_relative\", crop: \"crop\"},\n {effect: \"saturation:50\"},\n {effect: \"vignette\"},\n {flags: \"layer_apply\", width: 100, radius: \"max\", gravity: \"center\", y: 20, x: -20, crop: \"scale\"}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"coffee_cup.jpg\").image(transformation=[ {'width': 400, 'height': 250, 'gravity': \"south\", 'crop': \"fill\"}, {'overlay': \"nice_couple\", 'width': \"1.3\", 'height': \"1.3\", 'gravity': \"faces\", 'flags': \"region_relative\", 'crop': \"crop\"}, {'effect': \"saturation:50\"}, {'effect': \"vignette\"}, {'flags': \"layer_apply\", 'width': 100, 'radius': \"max\", 'gravity': \"center\", 'y': 20, 'x': -20, 'crop': \"scale\"} ])","codeSnippet":"CloudinaryImage(\"coffee_cup.jpg\").image(transformation=[\n {'width': 400, 'height': 250, 'gravity': \"south\", 'crop': \"fill\"},\n {'overlay': \"nice_couple\", 'width': \"1.3\", 'height': \"1.3\", 'gravity': \"faces\", 'flags': \"region_relative\", 'crop': \"crop\"},\n {'effect': \"saturation:50\"},\n {'effect': \"vignette\"},\n {'flags': \"layer_apply\", 'width': 100, 'radius': \"max\", 'gravity': \"center\", 'y': 20, 'x': -20, 'crop': \"scale\"}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('coffee_cup.jpg'))\n\t->resize(Resize::fill()->width(400)\n->height(250)\n\t->gravity(\n\tGravity::compass(\n\tCompass::south()))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"nice_couple\")\n\t->transformation((new Transformation())\n\t->resize(Resize::crop()->width(1.3)\n->height(1.3)\n\t->gravity(\n\tGravity::focusOn(\n\tFocusOn::faces()))\n\t->regionRelative()\n\t)\n\t->adjust(Adjust::saturation()->level(50))\n\t->effect(Effect::vignette())\n\t->resize(Resize::scale()->width(100))\n\t->roundCorners(RoundCorners::max()))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::center()))\n->offsetX(-20)\n->offsetY(20))\n\t);","codeSnippet":"(new ImageTag('coffee_cup.jpg'))\n\t->resize(Resize::fill()->width(400)\n->height(250)\n\t->gravity(\n\tGravity::compass(\n\tCompass::south()))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"nice_couple\")\n\t->transformation((new Transformation())\n\t->resize(Resize::crop()->width(1.3)\n->height(1.3)\n\t->gravity(\n\tGravity::focusOn(\n\tFocusOn::faces()))\n\t->regionRelative()\n\t)\n\t->adjust(Adjust::saturation()->level(50))\n\t->effect(Effect::vignette())\n\t->resize(Resize::scale()->width(100))\n\t->roundCorners(RoundCorners::max()))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::center()))\n->offsetX(-20)\n->offsetY(20))\n\t);","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"coffee_cup.jpg\", array(\"transformation\"=>array( array(\"width\"=>400, \"height\"=>250, \"gravity\"=>\"south\", \"crop\"=>\"fill\"), array(\"overlay\"=>\"nice_couple\", \"width\"=>\"1.3\", \"height\"=>\"1.3\", \"gravity\"=>\"faces\", \"flags\"=>\"region_relative\", \"crop\"=>\"crop\"), array(\"effect\"=>\"saturation:50\"), array(\"effect\"=>\"vignette\"), array(\"flags\"=>\"layer_apply\", \"width\"=>100, \"radius\"=>\"max\", \"gravity\"=>\"center\", \"y\"=>20, \"x\"=>-20, \"crop\"=>\"scale\") )))","codeSnippet":"cl_image_tag(\"coffee_cup.jpg\", array(\"transformation\"=>array(\n array(\"width\"=>400, \"height\"=>250, \"gravity\"=>\"south\", \"crop\"=>\"fill\"),\n array(\"overlay\"=>\"nice_couple\", \"width\"=>\"1.3\", \"height\"=>\"1.3\", \"gravity\"=>\"faces\", \"flags\"=>\"region_relative\", \"crop\"=>\"crop\"),\n array(\"effect\"=>\"saturation:50\"),\n array(\"effect\"=>\"vignette\"),\n array(\"flags\"=>\"layer_apply\", \"width\"=>100, \"radius\"=>\"max\", \"gravity\"=>\"center\", \"y\"=>20, \"x\"=>-20, \"crop\"=>\"scale\")\n )))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().width(400).height(250).gravity(\"south\").crop(\"fill\").chain() .overlay(new Layer().publicId(\"nice_couple\")).width(1.3).height(1.3).gravity(\"faces\").flags(\"region_relative\").crop(\"crop\").chain() .effect(\"saturation:50\").chain() .effect(\"vignette\").chain() .flags(\"layer_apply\").width(100).radius(\"max\").gravity(\"center\").y(20).x(-20).crop(\"scale\")).imageTag(\"coffee_cup.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .width(400).height(250).gravity(\"south\").crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"nice_couple\")).width(1.3).height(1.3).gravity(\"faces\").flags(\"region_relative\").crop(\"crop\").chain()\n .effect(\"saturation:50\").chain()\n .effect(\"vignette\").chain()\n .flags(\"layer_apply\").width(100).radius(\"max\").gravity(\"center\").y(20).x(-20).crop(\"scale\")).imageTag(\"coffee_cup.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"coffee_cup.jpg\", :transformation=>[ {:width=>400, :height=>250, :gravity=>\"south\", :crop=>\"fill\"}, {:overlay=>\"nice_couple\", :width=>1.3, :height=>1.3, :gravity=>\"faces\", :flags=>\"region_relative\", :crop=>\"crop\"}, {:effect=>\"saturation:50\"}, {:effect=>\"vignette\"}, {:flags=>\"layer_apply\", :width=>100, :radius=>\"max\", :gravity=>\"center\", :y=>20, :x=>-20, :crop=>\"scale\"} ])","codeSnippet":"cl_image_tag(\"coffee_cup.jpg\", :transformation=>[\n {:width=>400, :height=>250, :gravity=>\"south\", :crop=>\"fill\"},\n {:overlay=>\"nice_couple\", :width=>1.3, :height=>1.3, :gravity=>\"faces\", :flags=>\"region_relative\", :crop=>\"crop\"},\n {:effect=>\"saturation:50\"},\n {:effect=>\"vignette\"},\n {:flags=>\"layer_apply\", :width=>100, :radius=>\"max\", :gravity=>\"center\", :y=>20, :x=>-20, :crop=>\"scale\"}\n ])","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Height(250).Gravity(\"south\").Crop(\"fill\").Chain() .Overlay(new Layer().PublicId(\"nice_couple\")).Width(1.3).Height(1.3).Gravity(\"faces\").Flags(\"region_relative\").Crop(\"crop\").Chain() .Effect(\"saturation:50\").Chain() .Effect(\"vignette\").Chain() .Flags(\"layer_apply\").Width(100).Radius(\"max\").Gravity(\"center\").Y(20).X(-20).Crop(\"scale\")).BuildImageTag(\"coffee_cup.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .Width(400).Height(250).Gravity(\"south\").Crop(\"fill\").Chain()\n .Overlay(new Layer().PublicId(\"nice_couple\")).Width(1.3).Height(1.3).Gravity(\"faces\").Flags(\"region_relative\").Crop(\"crop\").Chain()\n .Effect(\"saturation:50\").Chain()\n .Effect(\"vignette\").Chain()\n .Flags(\"layer_apply\").Width(100).Radius(\"max\").Gravity(\"center\").Y(20).X(-20).Crop(\"scale\")).BuildImageTag(\"coffee_cup.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('coffee_cup.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(400)\n.height(250)\n\t.gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"nice_couple\")\n\t.transformation(new Transformation()\n\t.resize(Resize.crop().width(1.3)\n.height(1.3)\n\t.gravity(\n\tGravity.focusOn(\n\tFocusOn.faces()))\n\t.regionRelative()\n\t)\n\t.adjust(Adjust.saturation().level(50))\n\t.effect(Effect.vignette())\n\t.resize(Resize.scale().width(100))\n\t.roundCorners(RoundCorners.max()))\n\t)\n\t.position(Position()\n\t.gravity(\n\tGravity.compass(\n\tCompass.center()))\n.offsetX(-20)\n.offsetY(20))\n\t));","codeSnippet":"cloudinary.image('coffee_cup.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(400)\n.height(250)\n\t.gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"nice_couple\")\n\t.transformation(new Transformation()\n\t.resize(Resize.crop().width(1.3)\n.height(1.3)\n\t.gravity(\n\tGravity.focusOn(\n\tFocusOn.faces()))\n\t.regionRelative()\n\t)\n\t.adjust(Adjust.saturation().level(50))\n\t.effect(Effect.vignette())\n\t.resize(Resize.scale().width(100))\n\t.roundCorners(RoundCorners.max()))\n\t)\n\t.position(Position()\n\t.gravity(\n\tGravity.compass(\n\tCompass.center()))\n.offsetX(-20)\n.offsetY(20))\n\t));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setHeight(250).setGravity(\"south\").setCrop(\"fill\").chain() .setOverlay(\"nice_couple\").setWidth(1.3).setHeight(1.3).setGravity(\"faces\").setFlags(\"region_relative\").setCrop(\"crop\").chain() .setEffect(\"saturation:50\").chain() .setEffect(\"vignette\").chain() .setFlags(\"layer_apply\").setWidth(100).setRadius(\"max\").setGravity(\"center\").setY(20).setX(-20).setCrop(\"scale\")).generate(\"coffee_cup.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setWidth(400).setHeight(250).setGravity(\"south\").setCrop(\"fill\").chain()\n .setOverlay(\"nice_couple\").setWidth(1.3).setHeight(1.3).setGravity(\"faces\").setFlags(\"region_relative\").setCrop(\"crop\").chain()\n .setEffect(\"saturation:50\").chain()\n .setEffect(\"vignette\").chain()\n .setFlags(\"layer_apply\").setWidth(100).setRadius(\"max\").setGravity(\"center\").setY(20).setX(-20).setCrop(\"scale\")).generate(\"coffee_cup.jpg\")!, cloudinary: cloudinary)","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().width(400).height(250).gravity(\"south\").crop(\"fill\").chain() .overlay(new Layer().publicId(\"nice_couple\")).width(1.3).height(1.3).gravity(\"faces\").flags(\"region_relative\").crop(\"crop\").chain() .effect(\"saturation:50\").chain() .effect(\"vignette\").chain() .flags(\"layer_apply\").width(100).radius(\"max\").gravity(\"center\").y(20).x(-20).crop(\"scale\")).generate(\"coffee_cup.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .width(400).height(250).gravity(\"south\").crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"nice_couple\")).width(1.3).height(1.3).gravity(\"faces\").flags(\"region_relative\").crop(\"crop\").chain()\n .effect(\"saturation:50\").chain()\n .effect(\"vignette\").chain()\n .flags(\"layer_apply\").width(100).radius(\"max\").gravity(\"center\").y(20).x(-20).crop(\"scale\")).generate(\"coffee_cup.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('coffee_cup.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(400)\n.height(250)\n\t.gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"nice_couple\")\n\t.transformation(new Transformation()\n\t.addTransformation())\n\t)\n\t.position(Position()\n\t.gravity(\n\tGravity.compass(\n\tCompass.center()))\n.offsetX(-20)\n.offsetY(20))\n\t));","codeSnippet":"cloudinary.image('coffee_cup.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(400)\n.height(250)\n\t.gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"nice_couple\")\n\t.transformation(new Transformation()\n\t.addTransformation())\n\t)\n\t.position(Position()\n\t.gravity(\n\tGravity.compass(\n\tCompass.center()))\n.offsetX(-20)\n.offsetY(20))\n\t));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"coffee_cup.jpg\")\n\t resize(Resize.fill() { width(400)\n height(250)\n\t gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"nice_couple\") {\n\t transformation(Transformation {\n\t resize(Resize.crop() { width(1.3F)\n height(1.3F)\n\t gravity(\n\tGravity.focusOn(\n\tFocusOn.faces()))\n\t regionRelative()\n\t })\n\t adjust(Adjust.saturation() { level(50) })\n\t effect(Effect.vignette())\n\t resize(Resize.scale() { width(100) })\n\t roundCorners(RoundCorners.max()) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.center()))\n offsetX(-20)\n offsetY(20) })\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"coffee_cup.jpg\")\n\t resize(Resize.fill() { width(400)\n height(250)\n\t gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"nice_couple\") {\n\t transformation(Transformation {\n\t resize(Resize.crop() { width(1.3F)\n height(1.3F)\n\t gravity(\n\tGravity.focusOn(\n\tFocusOn.faces()))\n\t regionRelative()\n\t })\n\t adjust(Adjust.saturation() { level(50) })\n\t effect(Effect.vignette())\n\t resize(Resize.scale() { width(100) })\n\t roundCorners(RoundCorners.max()) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.center()))\n offsetX(-20)\n offsetY(20) })\n\t }) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.image(\"coffee_cup.jpg\", {transformation: [ {width: 400, height: 250, gravity: \"south\", crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"nice_couple\"), width: \"1.3\", height: \"1.3\", gravity: \"faces\", flags: \"region_relative\", crop: \"crop\"}, {effect: \"saturation:50\"}, {effect: \"vignette\"}, {flags: \"layer_apply\", width: 100, radius: \"max\", gravity: \"center\", y: 20, x: -20, crop: \"scale\"} ]})","codeSnippet":"$.cloudinary.image(\"coffee_cup.jpg\", {transformation: [\n {width: 400, height: 250, gravity: \"south\", crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"nice_couple\"), width: \"1.3\", height: \"1.3\", gravity: \"faces\", flags: \"region_relative\", crop: \"crop\"},\n {effect: \"saturation:50\"},\n {effect: \"vignette\"},\n {flags: \"layer_apply\", width: 100, radius: \"max\", gravity: \"center\", y: 20, x: -20, crop: \"scale\"}\n ]})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n );","codeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n );","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.aaaalireno.com\/demo\/image\/upload\/w_400,h_250,c_fill,g_south\/l_nice_couple,w_1.3,h_1.3,g_faces,c_crop,fl_region_relative\/e_saturation:50\/e_vignette\/fl_layer_apply,w_100,r_max,g_center,y_20,x_-20\/coffee_cup.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"width":"400","height":"250","crop_mode":"fill","gravity":"south"},{"overlay":"nice_couple","width":"1.3","height":"1.3","gravity":"faces","crop_mode":"crop","flags":"region_relative"},{"effect":"saturation:50"},{"effect":"vignette"},{"flags":"layer_apply","width":"100","radius":"max","gravity":"center","y":"20","x":"-20"}],"transformation_string":"w_400,h_250,c_fill,g_south\/l_nice_couple,w_1.3,h_1.3,g_faces,c_crop,fl_region_relative\/e_saturation:50\/e_vignette\/fl_layer_apply,w_100,r_max,g_center,y_20,x_-20","url_suffix":"","version":"","secure":true,"public_id":"coffee_cup.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
深入了解云化图像变换能力
云形除能变换单图像叠加外,还允许增变多叠加通过链绑另一叠加设置标志参数切换层位应用或fl_laya应用并应用多项图像变换.添加另一叠加式像转换图片以适应现有底层和叠加式图像一样简单在咖啡杯示例中,我们添加气球作为附加叠加并实现下列变换:重裁为30像素宽度,将hue水平改变为粉红色并旋转五度
<\/Image>","codeSnippet":"
![]()
\n\t
\n\t
\n\t
\n\t
\n\t
\n\t
\n\t
\n\t
\n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n )\n .overlay(\n source(\n image(\"balloon\").transformation(\n new Transformation()\n .resize(scale().width(30))\n .rotate(byAngle(5))\n .adjust(hue().level(-20))\n )\n ).position(new Position().offsetX(30).offsetY(5))\n );","codeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n )\n .overlay(\n source(\n image(\"balloon\").transformation(\n new Transformation()\n .resize(scale().width(30))\n .rotate(byAngle(5))\n .adjust(hue().level(-20))\n )\n ).position(new Position().offsetX(30).offsetY(5))\n );","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":"
<\/cld-image>","codeSnippet":"
\n\t
\n\t
\n\t
\n\t
\n\t
\n\t
\n\t
\n\t
\n<\/cld-image>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n )\n .overlay(\n source(\n image(\"balloon\").transformation(\n new Transformation()\n .resize(scale().width(30))\n .rotate(byAngle(5))\n .adjust(hue().level(-20))\n )\n ).position(new Position().offsetX(30).offsetY(5))\n );","codeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n )\n .overlay(\n source(\n image(\"balloon\").transformation(\n new Transformation()\n .resize(scale().width(30))\n .rotate(byAngle(5))\n .adjust(hue().level(-20))\n )\n ).position(new Position().offsetX(30).offsetY(5))\n );","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":"
<\/cl-transformation>
<\/cl-transformation>
<\/cl-transformation>
<\/cl-transformation>
<\/cl-transformation>
<\/cl-transformation>
<\/cl-transformation>
<\/cl-transformation> <\/cl-image>","codeSnippet":"
\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n<\/cl-image>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n )\n .overlay(\n source(\n image(\"balloon\").transformation(\n new Transformation()\n .resize(scale().width(30))\n .rotate(byAngle(5))\n .adjust(hue().level(-20))\n )\n ).position(new Position().offsetX(30).offsetY(5))\n );","codeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n )\n .overlay(\n source(\n image(\"balloon\").transformation(\n new Transformation()\n .resize(scale().width(30))\n .rotate(byAngle(5))\n .adjust(hue().level(-20))\n )\n ).position(new Position().offsetX(30).offsetY(5))\n );","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('coffee_cup.jpg', {transformation: [ {width: 400, height: 250, gravity: \"south\", crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"nice_couple\"), width: \"1.3\", height: \"1.3\", gravity: \"faces\", flags: \"region_relative\", crop: \"crop\"}, {effect: \"saturation:50\"}, {effect: \"vignette\"}, {flags: \"layer_apply\", width: 100, radius: \"max\", gravity: \"center\", y: 20, x: -20, crop: \"scale\"}, {overlay: new cloudinary.Layer().publicId(\"balloon\"), width: 30}, {effect: \"hue:-20\", angle: 5}, {flags: \"layer_apply\", x: 30, y: 5} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('coffee_cup.jpg', {transformation: [\n {width: 400, height: 250, gravity: \"south\", crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"nice_couple\"), width: \"1.3\", height: \"1.3\", gravity: \"faces\", flags: \"region_relative\", crop: \"crop\"},\n {effect: \"saturation:50\"},\n {effect: \"vignette\"},\n {flags: \"layer_apply\", width: 100, radius: \"max\", gravity: \"center\", y: 20, x: -20, crop: \"scale\"},\n {overlay: new cloudinary.Layer().publicId(\"balloon\"), width: 30},\n {effect: \"hue:-20\", angle: 5},\n {flags: \"layer_apply\", x: 30, y: 5}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"coffee_cup.jpg\").image(transformation=[ {'width': 400, 'height': 250, 'gravity': \"south\", 'crop': \"fill\"}, {'overlay': \"nice_couple\", 'width': \"1.3\", 'height': \"1.3\", 'gravity': \"faces\", 'flags': \"region_relative\", 'crop': \"crop\"}, {'effect': \"saturation:50\"}, {'effect': \"vignette\"}, {'flags': \"layer_apply\", 'width': 100, 'radius': \"max\", 'gravity': \"center\", 'y': 20, 'x': -20, 'crop': \"scale\"}, {'overlay': \"balloon\", 'width': 30}, {'effect': \"hue:-20\", 'angle': 5}, {'flags': \"layer_apply\", 'x': 30, 'y': 5} ])","codeSnippet":"CloudinaryImage(\"coffee_cup.jpg\").image(transformation=[\n {'width': 400, 'height': 250, 'gravity': \"south\", 'crop': \"fill\"},\n {'overlay': \"nice_couple\", 'width': \"1.3\", 'height': \"1.3\", 'gravity': \"faces\", 'flags': \"region_relative\", 'crop': \"crop\"},\n {'effect': \"saturation:50\"},\n {'effect': \"vignette\"},\n {'flags': \"layer_apply\", 'width': 100, 'radius': \"max\", 'gravity': \"center\", 'y': 20, 'x': -20, 'crop': \"scale\"},\n {'overlay': \"balloon\", 'width': 30},\n {'effect': \"hue:-20\", 'angle': 5},\n {'flags': \"layer_apply\", 'x': 30, 'y': 5}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('coffee_cup.jpg'))\n\t->resize(Resize::fill()->width(400)\n->height(250)\n\t->gravity(\n\tGravity::compass(\n\tCompass::south()))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"nice_couple\")\n\t->transformation((new Transformation())\n\t->resize(Resize::crop()->width(1.3)\n->height(1.3)\n\t->gravity(\n\tGravity::focusOn(\n\tFocusOn::faces()))\n\t->regionRelative()\n\t)\n\t->adjust(Adjust::saturation()->level(50))\n\t->effect(Effect::vignette())\n\t->resize(Resize::scale()->width(100))\n\t->roundCorners(RoundCorners::max()))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::center()))\n->offsetX(-20)\n->offsetY(20))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"balloon\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(30))\n\t->rotate(Rotate::byAngle(5))\n\t->adjust(Adjust::hue()->level(-20)))\n\t)\n\t->position((new Position())->offsetX(30)\n->offsetY(5))\n\t);","codeSnippet":"(new ImageTag('coffee_cup.jpg'))\n\t->resize(Resize::fill()->width(400)\n->height(250)\n\t->gravity(\n\tGravity::compass(\n\tCompass::south()))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"nice_couple\")\n\t->transformation((new Transformation())\n\t->resize(Resize::crop()->width(1.3)\n->height(1.3)\n\t->gravity(\n\tGravity::focusOn(\n\tFocusOn::faces()))\n\t->regionRelative()\n\t)\n\t->adjust(Adjust::saturation()->level(50))\n\t->effect(Effect::vignette())\n\t->resize(Resize::scale()->width(100))\n\t->roundCorners(RoundCorners::max()))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::center()))\n->offsetX(-20)\n->offsetY(20))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"balloon\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(30))\n\t->rotate(Rotate::byAngle(5))\n\t->adjust(Adjust::hue()->level(-20)))\n\t)\n\t->position((new Position())->offsetX(30)\n->offsetY(5))\n\t);","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"coffee_cup.jpg\", array(\"transformation\"=>array( array(\"width\"=>400, \"height\"=>250, \"gravity\"=>\"south\", \"crop\"=>\"fill\"), array(\"overlay\"=>\"nice_couple\", \"width\"=>\"1.3\", \"height\"=>\"1.3\", \"gravity\"=>\"faces\", \"flags\"=>\"region_relative\", \"crop\"=>\"crop\"), array(\"effect\"=>\"saturation:50\"), array(\"effect\"=>\"vignette\"), array(\"flags\"=>\"layer_apply\", \"width\"=>100, \"radius\"=>\"max\", \"gravity\"=>\"center\", \"y\"=>20, \"x\"=>-20, \"crop\"=>\"scale\"), array(\"overlay\"=>\"balloon\", \"width\"=>30), array(\"effect\"=>\"hue:-20\", \"angle\"=>5), array(\"flags\"=>\"layer_apply\", \"x\"=>30, \"y\"=>5) )))","codeSnippet":"cl_image_tag(\"coffee_cup.jpg\", array(\"transformation\"=>array(\n array(\"width\"=>400, \"height\"=>250, \"gravity\"=>\"south\", \"crop\"=>\"fill\"),\n array(\"overlay\"=>\"nice_couple\", \"width\"=>\"1.3\", \"height\"=>\"1.3\", \"gravity\"=>\"faces\", \"flags\"=>\"region_relative\", \"crop\"=>\"crop\"),\n array(\"effect\"=>\"saturation:50\"),\n array(\"effect\"=>\"vignette\"),\n array(\"flags\"=>\"layer_apply\", \"width\"=>100, \"radius\"=>\"max\", \"gravity\"=>\"center\", \"y\"=>20, \"x\"=>-20, \"crop\"=>\"scale\"),\n array(\"overlay\"=>\"balloon\", \"width\"=>30),\n array(\"effect\"=>\"hue:-20\", \"angle\"=>5),\n array(\"flags\"=>\"layer_apply\", \"x\"=>30, \"y\"=>5)\n )))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().width(400).height(250).gravity(\"south\").crop(\"fill\").chain() .overlay(new Layer().publicId(\"nice_couple\")).width(1.3).height(1.3).gravity(\"faces\").flags(\"region_relative\").crop(\"crop\").chain() .effect(\"saturation:50\").chain() .effect(\"vignette\").chain() .flags(\"layer_apply\").width(100).radius(\"max\").gravity(\"center\").y(20).x(-20).crop(\"scale\").chain() .overlay(new Layer().publicId(\"balloon\")).width(30).chain() .effect(\"hue:-20\").angle(5).chain() .flags(\"layer_apply\").x(30).y(5)).imageTag(\"coffee_cup.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .width(400).height(250).gravity(\"south\").crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"nice_couple\")).width(1.3).height(1.3).gravity(\"faces\").flags(\"region_relative\").crop(\"crop\").chain()\n .effect(\"saturation:50\").chain()\n .effect(\"vignette\").chain()\n .flags(\"layer_apply\").width(100).radius(\"max\").gravity(\"center\").y(20).x(-20).crop(\"scale\").chain()\n .overlay(new Layer().publicId(\"balloon\")).width(30).chain()\n .effect(\"hue:-20\").angle(5).chain()\n .flags(\"layer_apply\").x(30).y(5)).imageTag(\"coffee_cup.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"coffee_cup.jpg\", :transformation=>[ {:width=>400, :height=>250, :gravity=>\"south\", :crop=>\"fill\"}, {:overlay=>\"nice_couple\", :width=>1.3, :height=>1.3, :gravity=>\"faces\", :flags=>\"region_relative\", :crop=>\"crop\"}, {:effect=>\"saturation:50\"}, {:effect=>\"vignette\"}, {:flags=>\"layer_apply\", :width=>100, :radius=>\"max\", :gravity=>\"center\", :y=>20, :x=>-20, :crop=>\"scale\"}, {:overlay=>\"balloon\", :width=>30}, {:effect=>\"hue:-20\", :angle=>5}, {:flags=>\"layer_apply\", :x=>30, :y=>5} ])","codeSnippet":"cl_image_tag(\"coffee_cup.jpg\", :transformation=>[\n {:width=>400, :height=>250, :gravity=>\"south\", :crop=>\"fill\"},\n {:overlay=>\"nice_couple\", :width=>1.3, :height=>1.3, :gravity=>\"faces\", :flags=>\"region_relative\", :crop=>\"crop\"},\n {:effect=>\"saturation:50\"},\n {:effect=>\"vignette\"},\n {:flags=>\"layer_apply\", :width=>100, :radius=>\"max\", :gravity=>\"center\", :y=>20, :x=>-20, :crop=>\"scale\"},\n {:overlay=>\"balloon\", :width=>30},\n {:effect=>\"hue:-20\", :angle=>5},\n {:flags=>\"layer_apply\", :x=>30, :y=>5}\n ])","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Height(250).Gravity(\"south\").Crop(\"fill\").Chain() .Overlay(new Layer().PublicId(\"nice_couple\")).Width(1.3).Height(1.3).Gravity(\"faces\").Flags(\"region_relative\").Crop(\"crop\").Chain() .Effect(\"saturation:50\").Chain() .Effect(\"vignette\").Chain() .Flags(\"layer_apply\").Width(100).Radius(\"max\").Gravity(\"center\").Y(20).X(-20).Crop(\"scale\").Chain() .Overlay(new Layer().PublicId(\"balloon\")).Width(30).Chain() .Effect(\"hue:-20\").Angle(5).Chain() .Flags(\"layer_apply\").X(30).Y(5)).BuildImageTag(\"coffee_cup.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .Width(400).Height(250).Gravity(\"south\").Crop(\"fill\").Chain()\n .Overlay(new Layer().PublicId(\"nice_couple\")).Width(1.3).Height(1.3).Gravity(\"faces\").Flags(\"region_relative\").Crop(\"crop\").Chain()\n .Effect(\"saturation:50\").Chain()\n .Effect(\"vignette\").Chain()\n .Flags(\"layer_apply\").Width(100).Radius(\"max\").Gravity(\"center\").Y(20).X(-20).Crop(\"scale\").Chain()\n .Overlay(new Layer().PublicId(\"balloon\")).Width(30).Chain()\n .Effect(\"hue:-20\").Angle(5).Chain()\n .Flags(\"layer_apply\").X(30).Y(5)).BuildImageTag(\"coffee_cup.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('coffee_cup.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(400)\n.height(250)\n\t.gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"nice_couple\")\n\t.transformation(new Transformation()\n\t.resize(Resize.crop().width(1.3)\n.height(1.3)\n\t.gravity(\n\tGravity.focusOn(\n\tFocusOn.faces()))\n\t.regionRelative()\n\t)\n\t.adjust(Adjust.saturation().level(50))\n\t.effect(Effect.vignette())\n\t.resize(Resize.scale().width(100))\n\t.roundCorners(RoundCorners.max()))\n\t)\n\t.position(Position()\n\t.gravity(\n\tGravity.compass(\n\tCompass.center()))\n.offsetX(-20)\n.offsetY(20))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"balloon\")\n\t.transformation(new Transformation()\n\t.resize(Resize.scale().width(30))\n\t.rotate(Rotate.byAngle(5))\n\t.adjust(Adjust.hue().level(-20)))\n\t)\n\t.position(Position().offsetX(30)\n.offsetY(5))\n\t));","codeSnippet":"cloudinary.image('coffee_cup.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(400)\n.height(250)\n\t.gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"nice_couple\")\n\t.transformation(new Transformation()\n\t.resize(Resize.crop().width(1.3)\n.height(1.3)\n\t.gravity(\n\tGravity.focusOn(\n\tFocusOn.faces()))\n\t.regionRelative()\n\t)\n\t.adjust(Adjust.saturation().level(50))\n\t.effect(Effect.vignette())\n\t.resize(Resize.scale().width(100))\n\t.roundCorners(RoundCorners.max()))\n\t)\n\t.position(Position()\n\t.gravity(\n\tGravity.compass(\n\tCompass.center()))\n.offsetX(-20)\n.offsetY(20))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"balloon\")\n\t.transformation(new Transformation()\n\t.resize(Resize.scale().width(30))\n\t.rotate(Rotate.byAngle(5))\n\t.adjust(Adjust.hue().level(-20)))\n\t)\n\t.position(Position().offsetX(30)\n.offsetY(5))\n\t));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setHeight(250).setGravity(\"south\").setCrop(\"fill\").chain() .setOverlay(\"nice_couple\").setWidth(1.3).setHeight(1.3).setGravity(\"faces\").setFlags(\"region_relative\").setCrop(\"crop\").chain() .setEffect(\"saturation:50\").chain() .setEffect(\"vignette\").chain() .setFlags(\"layer_apply\").setWidth(100).setRadius(\"max\").setGravity(\"center\").setY(20).setX(-20).setCrop(\"scale\").chain() .setOverlay(\"balloon\").setWidth(30).chain() .setEffect(\"hue:-20\").setAngle(5).chain() .setFlags(\"layer_apply\").setX(30).setY(5)).generate(\"coffee_cup.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setWidth(400).setHeight(250).setGravity(\"south\").setCrop(\"fill\").chain()\n .setOverlay(\"nice_couple\").setWidth(1.3).setHeight(1.3).setGravity(\"faces\").setFlags(\"region_relative\").setCrop(\"crop\").chain()\n .setEffect(\"saturation:50\").chain()\n .setEffect(\"vignette\").chain()\n .setFlags(\"layer_apply\").setWidth(100).setRadius(\"max\").setGravity(\"center\").setY(20).setX(-20).setCrop(\"scale\").chain()\n .setOverlay(\"balloon\").setWidth(30).chain()\n .setEffect(\"hue:-20\").setAngle(5).chain()\n .setFlags(\"layer_apply\").setX(30).setY(5)).generate(\"coffee_cup.jpg\")!, cloudinary: cloudinary)","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().width(400).height(250).gravity(\"south\").crop(\"fill\").chain() .overlay(new Layer().publicId(\"nice_couple\")).width(1.3).height(1.3).gravity(\"faces\").flags(\"region_relative\").crop(\"crop\").chain() .effect(\"saturation:50\").chain() .effect(\"vignette\").chain() .flags(\"layer_apply\").width(100).radius(\"max\").gravity(\"center\").y(20).x(-20).crop(\"scale\").chain() .overlay(new Layer().publicId(\"balloon\")).width(30).chain() .effect(\"hue:-20\").angle(5).chain() .flags(\"layer_apply\").x(30).y(5)).generate(\"coffee_cup.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .width(400).height(250).gravity(\"south\").crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"nice_couple\")).width(1.3).height(1.3).gravity(\"faces\").flags(\"region_relative\").crop(\"crop\").chain()\n .effect(\"saturation:50\").chain()\n .effect(\"vignette\").chain()\n .flags(\"layer_apply\").width(100).radius(\"max\").gravity(\"center\").y(20).x(-20).crop(\"scale\").chain()\n .overlay(new Layer().publicId(\"balloon\")).width(30).chain()\n .effect(\"hue:-20\").angle(5).chain()\n .flags(\"layer_apply\").x(30).y(5)).generate(\"coffee_cup.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('coffee_cup.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(400)\n.height(250)\n\t.gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"nice_couple\")\n\t.transformation(new Transformation()\n\t.addTransformation())\n\t)\n\t.position(Position()\n\t.gravity(\n\tGravity.compass(\n\tCompass.center()))\n.offsetX(-20)\n.offsetY(20))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"balloon\")\n\t.transformation(new Transformation()\n\t.resize(Resize.scale().width(30))\n\t.rotate(Rotate.byAngle(5))\n\t.adjust(Adjust.hue().level(-20)))\n\t)\n\t.position(Position().offsetX(30)\n.offsetY(5))\n\t));","codeSnippet":"cloudinary.image('coffee_cup.jpg').transformation(Transformation()\n\t.resize(Resize.fill().width(400)\n.height(250)\n\t.gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"nice_couple\")\n\t.transformation(new Transformation()\n\t.addTransformation())\n\t)\n\t.position(Position()\n\t.gravity(\n\tGravity.compass(\n\tCompass.center()))\n.offsetX(-20)\n.offsetY(20))\n\t)\n\t.overlay(Overlay.source(\n\tSource.image(\"balloon\")\n\t.transformation(new Transformation()\n\t.resize(Resize.scale().width(30))\n\t.rotate(Rotate.byAngle(5))\n\t.adjust(Adjust.hue().level(-20)))\n\t)\n\t.position(Position().offsetX(30)\n.offsetY(5))\n\t));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"coffee_cup.jpg\")\n\t resize(Resize.fill() { width(400)\n height(250)\n\t gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"nice_couple\") {\n\t transformation(Transformation {\n\t resize(Resize.crop() { width(1.3F)\n height(1.3F)\n\t gravity(\n\tGravity.focusOn(\n\tFocusOn.faces()))\n\t regionRelative()\n\t })\n\t adjust(Adjust.saturation() { level(50) })\n\t effect(Effect.vignette())\n\t resize(Resize.scale() { width(100) })\n\t roundCorners(RoundCorners.max()) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.center()))\n offsetX(-20)\n offsetY(20) })\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"balloon\") {\n\t transformation(Transformation {\n\t resize(Resize.scale() { width(30) })\n\t rotate(Rotate.byAngle(5))\n\t adjust(Adjust.hue() { level(-20) }) })\n\t }) {\n\t position(Position() { offsetX(30)\n offsetY(5) })\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"coffee_cup.jpg\")\n\t resize(Resize.fill() { width(400)\n height(250)\n\t gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"nice_couple\") {\n\t transformation(Transformation {\n\t resize(Resize.crop() { width(1.3F)\n height(1.3F)\n\t gravity(\n\tGravity.focusOn(\n\tFocusOn.faces()))\n\t regionRelative()\n\t })\n\t adjust(Adjust.saturation() { level(50) })\n\t effect(Effect.vignette())\n\t resize(Resize.scale() { width(100) })\n\t roundCorners(RoundCorners.max()) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.center()))\n offsetX(-20)\n offsetY(20) })\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"balloon\") {\n\t transformation(Transformation {\n\t resize(Resize.scale() { width(30) })\n\t rotate(Rotate.byAngle(5))\n\t adjust(Adjust.hue() { level(-20) }) })\n\t }) {\n\t position(Position() { offsetX(30)\n offsetY(5) })\n\t }) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.image(\"coffee_cup.jpg\", {transformation: [ {width: 400, height: 250, gravity: \"south\", crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"nice_couple\"), width: \"1.3\", height: \"1.3\", gravity: \"faces\", flags: \"region_relative\", crop: \"crop\"}, {effect: \"saturation:50\"}, {effect: \"vignette\"}, {flags: \"layer_apply\", width: 100, radius: \"max\", gravity: \"center\", y: 20, x: -20, crop: \"scale\"}, {overlay: new cloudinary.Layer().publicId(\"balloon\"), width: 30}, {effect: \"hue:-20\", angle: 5}, {flags: \"layer_apply\", x: 30, y: 5} ]})","codeSnippet":"$.cloudinary.image(\"coffee_cup.jpg\", {transformation: [\n {width: 400, height: 250, gravity: \"south\", crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"nice_couple\"), width: \"1.3\", height: \"1.3\", gravity: \"faces\", flags: \"region_relative\", crop: \"crop\"},\n {effect: \"saturation:50\"},\n {effect: \"vignette\"},\n {flags: \"layer_apply\", width: 100, radius: \"max\", gravity: \"center\", y: 20, x: -20, crop: \"scale\"},\n {overlay: new cloudinary.Layer().publicId(\"balloon\"), width: 30},\n {effect: \"hue:-20\", angle: 5},\n {flags: \"layer_apply\", x: 30, y: 5}\n ]})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n )\n .overlay(\n source(\n image(\"balloon\").transformation(\n new Transformation()\n .resize(scale().width(30))\n .rotate(byAngle(5))\n .adjust(hue().level(-20))\n )\n ).position(new Position().offsetX(30).offsetY(5))\n );","codeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n )\n .overlay(\n source(\n image(\"balloon\").transformation(\n new Transformation()\n .resize(scale().width(30))\n .rotate(byAngle(5))\n .adjust(hue().level(-20))\n )\n ).position(new Position().offsetX(30).offsetY(5))\n );","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.aaaalireno.com\/demo\/image\/upload\/w_400,h_250,c_fill,g_south\/l_nice_couple,w_1.3,h_1.3,g_faces,c_crop,fl_region_relative\/e_saturation:50\/e_vignette\/fl_layer_apply,w_100,r_max,g_center,y_20,x_-20\/l_balloon,w_30\/e_hue:-20,a_5\/fl_layer_apply,x_30,y_5\/coffee_cup.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"width":"400","height":"250","crop_mode":"fill","gravity":"south"},{"overlay":"nice_couple","width":"1.3","height":"1.3","gravity":"faces","crop_mode":"crop","flags":"region_relative"},{"effect":"saturation:50"},{"effect":"vignette"},{"flags":"layer_apply","width":"100","radius":"max","gravity":"center","y":"20","x":"-20"},{"overlay":"balloon","width":"30"},{"effect":"hue:-20","angle":"5"},{"flags":"layer_apply","x":"30","y":"5"}],"transformation_string":"w_400,h_250,c_fill,g_south\/l_nice_couple,w_1.3,h_1.3,g_faces,c_crop,fl_region_relative\/e_saturation:50\/e_vignette\/fl_layer_apply,w_100,r_max,g_center,y_20,x_-20\/l_balloon,w_30\/e_hue:-20,a_5\/fl_layer_apply,x_30,y_5","url_suffix":"","version":"","secure":true,"public_id":"coffee_cup.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
云化支持添加动态文本叠加中任意样式定制文本何况文本叠加可进一步转换,就像图像叠加回归实例后,我们现在添加了文本叠加法,用色化效果并旋转
<\/Image>","codeSnippet":"
![]()
\n\t
\n\t
\n\t
\n\t
\n\t
\n\t
\n\t
\n\t
\n\t
\n\t
\n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n )\n .overlay(\n source(\n image(\"balloon\").transformation(\n new Transformation()\n .resize(scale().width(30))\n .rotate(byAngle(5))\n .adjust(hue().level(-20))\n )\n ).position(new Position().offsetX(30).offsetY(5))\n )\n .overlay(\n source(\n text(\"Love\", new TextStyle(\"Cookie\", 40).fontWeight(\"bold\"))\n .textColor(\"#f08\")\n .transformation(\n new Transformation().effect(colorize()).rotate(byAngle(20))\n )\n ).position(new Position().offsetX(-45).offsetY(44))\n );","codeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n )\n .overlay(\n source(\n image(\"balloon\").transformation(\n new Transformation()\n .resize(scale().width(30))\n .rotate(byAngle(5))\n .adjust(hue().level(-20))\n )\n ).position(new Position().offsetX(30).offsetY(5))\n )\n .overlay(\n source(\n text(\"Love\", new TextStyle(\"Cookie\", 40).fontWeight(\"bold\"))\n .textColor(\"#f08\")\n .transformation(\n new Transformation().effect(colorize()).rotate(byAngle(20))\n )\n ).position(new Position().offsetX(-45).offsetY(44))\n );","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":"
<\/cld-image>","codeSnippet":"
\n\t
\n\t
\n\t
\n\t
\n\t
\n\t
\n\t
\n\t
\n\t
\n\t
\n<\/cld-image>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n )\n .overlay(\n source(\n image(\"balloon\").transformation(\n new Transformation()\n .resize(scale().width(30))\n .rotate(byAngle(5))\n .adjust(hue().level(-20))\n )\n ).position(new Position().offsetX(30).offsetY(5))\n )\n .overlay(\n source(\n text(\"Love\", new TextStyle(\"Cookie\", 40).fontWeight(\"bold\"))\n .textColor(\"#f08\")\n .transformation(\n new Transformation().effect(colorize()).rotate(byAngle(20))\n )\n ).position(new Position().offsetX(-45).offsetY(44))\n );","codeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n )\n .overlay(\n source(\n image(\"balloon\").transformation(\n new Transformation()\n .resize(scale().width(30))\n .rotate(byAngle(5))\n .adjust(hue().level(-20))\n )\n ).position(new Position().offsetX(30).offsetY(5))\n )\n .overlay(\n source(\n text(\"Love\", new TextStyle(\"Cookie\", 40).fontWeight(\"bold\"))\n .textColor(\"#f08\")\n .transformation(\n new Transformation().effect(colorize()).rotate(byAngle(20))\n )\n ).position(new Position().offsetX(-45).offsetY(44))\n );","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":"
<\/cl-transformation>
<\/cl-transformation>
<\/cl-transformation>
<\/cl-transformation>
<\/cl-transformation>
<\/cl-transformation>
<\/cl-transformation>
<\/cl-transformation>
<\/cl-transformation>
<\/cl-transformation> <\/cl-image>","codeSnippet":"
\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n<\/cl-image>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n )\n .overlay(\n source(\n image(\"balloon\").transformation(\n new Transformation()\n .resize(scale().width(30))\n .rotate(byAngle(5))\n .adjust(hue().level(-20))\n )\n ).position(new Position().offsetX(30).offsetY(5))\n )\n .overlay(\n source(\n text(\"Love\", new TextStyle(\"Cookie\", 40).fontWeight(\"bold\"))\n .textColor(\"#f08\")\n .transformation(\n new Transformation().effect(colorize()).rotate(byAngle(20))\n )\n ).position(new Position().offsetX(-45).offsetY(44))\n );","codeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n )\n .overlay(\n source(\n image(\"balloon\").transformation(\n new Transformation()\n .resize(scale().width(30))\n .rotate(byAngle(5))\n .adjust(hue().level(-20))\n )\n ).position(new Position().offsetX(30).offsetY(5))\n )\n .overlay(\n source(\n text(\"Love\", new TextStyle(\"Cookie\", 40).fontWeight(\"bold\"))\n .textColor(\"#f08\")\n .transformation(\n new Transformation().effect(colorize()).rotate(byAngle(20))\n )\n ).position(new Position().offsetX(-45).offsetY(44))\n );","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('coffee_cup.jpg', {transformation: [ {width: 400, height: 250, gravity: \"south\", crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"nice_couple\"), width: \"1.3\", height: \"1.3\", gravity: \"faces\", flags: \"region_relative\", crop: \"crop\"}, {effect: \"saturation:50\"}, {effect: \"vignette\"}, {flags: \"layer_apply\", width: 100, radius: \"max\", gravity: \"center\", y: 20, x: -20, crop: \"scale\"}, {overlay: new cloudinary.Layer().publicId(\"balloon\"), width: 30}, {effect: \"hue:-20\", angle: 5}, {flags: \"layer_apply\", x: 30, y: 5}, {overlay: new cloudinary.TextLayer().fontFamily(\"Cookie\").fontSize(40).fontWeight(\"bold\").text(\"Love\"), effect: \"colorize\", color: \"#f08\"}, {angle: 20, flags: \"layer_apply\", x: -45, y: 44} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('coffee_cup.jpg', {transformation: [\n {width: 400, height: 250, gravity: \"south\", crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"nice_couple\"), width: \"1.3\", height: \"1.3\", gravity: \"faces\", flags: \"region_relative\", crop: \"crop\"},\n {effect: \"saturation:50\"},\n {effect: \"vignette\"},\n {flags: \"layer_apply\", width: 100, radius: \"max\", gravity: \"center\", y: 20, x: -20, crop: \"scale\"},\n {overlay: new cloudinary.Layer().publicId(\"balloon\"), width: 30},\n {effect: \"hue:-20\", angle: 5},\n {flags: \"layer_apply\", x: 30, y: 5},\n {overlay: new cloudinary.TextLayer().fontFamily(\"Cookie\").fontSize(40).fontWeight(\"bold\").text(\"Love\"), effect: \"colorize\", color: \"#f08\"},\n {angle: 20, flags: \"layer_apply\", x: -45, y: 44}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"coffee_cup.jpg\").image(transformation=[ {'width': 400, 'height': 250, 'gravity': \"south\", 'crop': \"fill\"}, {'overlay': \"nice_couple\", 'width': \"1.3\", 'height': \"1.3\", 'gravity': \"faces\", 'flags': \"region_relative\", 'crop': \"crop\"}, {'effect': \"saturation:50\"}, {'effect': \"vignette\"}, {'flags': \"layer_apply\", 'width': 100, 'radius': \"max\", 'gravity': \"center\", 'y': 20, 'x': -20, 'crop': \"scale\"}, {'overlay': \"balloon\", 'width': 30}, {'effect': \"hue:-20\", 'angle': 5}, {'flags': \"layer_apply\", 'x': 30, 'y': 5}, {'overlay': {'font_family': \"Cookie\", 'font_size': 40, 'font_weight': \"bold\", 'text': \"Love\"}, 'effect': \"colorize\", 'color': \"#f08\"}, {'angle': 20, 'flags': \"layer_apply\", 'x': -45, 'y': 44} ])","codeSnippet":"CloudinaryImage(\"coffee_cup.jpg\").image(transformation=[\n {'width': 400, 'height': 250, 'gravity': \"south\", 'crop': \"fill\"},\n {'overlay': \"nice_couple\", 'width': \"1.3\", 'height': \"1.3\", 'gravity': \"faces\", 'flags': \"region_relative\", 'crop': \"crop\"},\n {'effect': \"saturation:50\"},\n {'effect': \"vignette\"},\n {'flags': \"layer_apply\", 'width': 100, 'radius': \"max\", 'gravity': \"center\", 'y': 20, 'x': -20, 'crop': \"scale\"},\n {'overlay': \"balloon\", 'width': 30},\n {'effect': \"hue:-20\", 'angle': 5},\n {'flags': \"layer_apply\", 'x': 30, 'y': 5},\n {'overlay': {'font_family': \"Cookie\", 'font_size': 40, 'font_weight': \"bold\", 'text': \"Love\"}, 'effect': \"colorize\", 'color': \"#f08\"},\n {'angle': 20, 'flags': \"layer_apply\", 'x': -45, 'y': 44}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('coffee_cup.jpg'))\n\t->resize(Resize::fill()->width(400)\n->height(250)\n\t->gravity(\n\tGravity::compass(\n\tCompass::south()))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"nice_couple\")\n\t->transformation((new Transformation())\n\t->resize(Resize::crop()->width(1.3)\n->height(1.3)\n\t->gravity(\n\tGravity::focusOn(\n\tFocusOn::faces()))\n\t->regionRelative()\n\t)\n\t->adjust(Adjust::saturation()->level(50))\n\t->effect(Effect::vignette())\n\t->resize(Resize::scale()->width(100))\n\t->roundCorners(RoundCorners::max()))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::center()))\n->offsetX(-20)\n->offsetY(20))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"balloon\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(30))\n\t->rotate(Rotate::byAngle(5))\n\t->adjust(Adjust::hue()->level(-20)))\n\t)\n\t->position((new Position())->offsetX(30)\n->offsetY(5))\n\t)\n\t->overlay(Overlay::source(\n\tSource::text(\"Love\",(new TextStyle(\"Cookie\",40))\n\t->fontWeight(\n\tFontWeight::bold())\n\t)\n\t->textColor(Color::rgb(\"f08\"))\n\t->transformation((new Transformation())\n\t->effect(Effect::colorize())\n\t->rotate(Rotate::byAngle(20)))\n\t)\n\t->position((new Position())->offsetX(-45)\n->offsetY(44))\n\t);","codeSnippet":"(new ImageTag('coffee_cup.jpg'))\n\t->resize(Resize::fill()->width(400)\n->height(250)\n\t->gravity(\n\tGravity::compass(\n\tCompass::south()))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"nice_couple\")\n\t->transformation((new Transformation())\n\t->resize(Resize::crop()->width(1.3)\n->height(1.3)\n\t->gravity(\n\tGravity::focusOn(\n\tFocusOn::faces()))\n\t->regionRelative()\n\t)\n\t->adjust(Adjust::saturation()->level(50))\n\t->effect(Effect::vignette())\n\t->resize(Resize::scale()->width(100))\n\t->roundCorners(RoundCorners::max()))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::center()))\n->offsetX(-20)\n->offsetY(20))\n\t)\n\t->overlay(Overlay::source(\n\tSource::image(\"balloon\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(30))\n\t->rotate(Rotate::byAngle(5))\n\t->adjust(Adjust::hue()->level(-20)))\n\t)\n\t->position((new Position())->offsetX(30)\n->offsetY(5))\n\t)\n\t->overlay(Overlay::source(\n\tSource::text(\"Love\",(new TextStyle(\"Cookie\",40))\n\t->fontWeight(\n\tFontWeight::bold())\n\t)\n\t->textColor(Color::rgb(\"f08\"))\n\t->transformation((new Transformation())\n\t->effect(Effect::colorize())\n\t->rotate(Rotate::byAngle(20)))\n\t)\n\t->position((new Position())->offsetX(-45)\n->offsetY(44))\n\t);","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"coffee_cup.jpg\", array(\"transformation\"=>array( array(\"width\"=>400, \"height\"=>250, \"gravity\"=>\"south\", \"crop\"=>\"fill\"), array(\"overlay\"=>\"nice_couple\", \"width\"=>\"1.3\", \"height\"=>\"1.3\", \"gravity\"=>\"faces\", \"flags\"=>\"region_relative\", \"crop\"=>\"crop\"), array(\"effect\"=>\"saturation:50\"), array(\"effect\"=>\"vignette\"), array(\"flags\"=>\"layer_apply\", \"width\"=>100, \"radius\"=>\"max\", \"gravity\"=>\"center\", \"y\"=>20, \"x\"=>-20, \"crop\"=>\"scale\"), array(\"overlay\"=>\"balloon\", \"width\"=>30), array(\"effect\"=>\"hue:-20\", \"angle\"=>5), array(\"flags\"=>\"layer_apply\", \"x\"=>30, \"y\"=>5), array(\"overlay\"=>array(\"font_family\"=>\"Cookie\", \"font_size\"=>40, \"font_weight\"=>\"bold\", \"text\"=>\"Love\"), \"effect\"=>\"colorize\", \"color\"=>\"#f08\"), array(\"angle\"=>20, \"flags\"=>\"layer_apply\", \"x\"=>-45, \"y\"=>44) )))","codeSnippet":"cl_image_tag(\"coffee_cup.jpg\", array(\"transformation\"=>array(\n array(\"width\"=>400, \"height\"=>250, \"gravity\"=>\"south\", \"crop\"=>\"fill\"),\n array(\"overlay\"=>\"nice_couple\", \"width\"=>\"1.3\", \"height\"=>\"1.3\", \"gravity\"=>\"faces\", \"flags\"=>\"region_relative\", \"crop\"=>\"crop\"),\n array(\"effect\"=>\"saturation:50\"),\n array(\"effect\"=>\"vignette\"),\n array(\"flags\"=>\"layer_apply\", \"width\"=>100, \"radius\"=>\"max\", \"gravity\"=>\"center\", \"y\"=>20, \"x\"=>-20, \"crop\"=>\"scale\"),\n array(\"overlay\"=>\"balloon\", \"width\"=>30),\n array(\"effect\"=>\"hue:-20\", \"angle\"=>5),\n array(\"flags\"=>\"layer_apply\", \"x\"=>30, \"y\"=>5),\n array(\"overlay\"=>array(\"font_family\"=>\"Cookie\", \"font_size\"=>40, \"font_weight\"=>\"bold\", \"text\"=>\"Love\"), \"effect\"=>\"colorize\", \"color\"=>\"#f08\"),\n array(\"angle\"=>20, \"flags\"=>\"layer_apply\", \"x\"=>-45, \"y\"=>44)\n )))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().width(400).height(250).gravity(\"south\").crop(\"fill\").chain() .overlay(new Layer().publicId(\"nice_couple\")).width(1.3).height(1.3).gravity(\"faces\").flags(\"region_relative\").crop(\"crop\").chain() .effect(\"saturation:50\").chain() .effect(\"vignette\").chain() .flags(\"layer_apply\").width(100).radius(\"max\").gravity(\"center\").y(20).x(-20).crop(\"scale\").chain() .overlay(new Layer().publicId(\"balloon\")).width(30).chain() .effect(\"hue:-20\").angle(5).chain() .flags(\"layer_apply\").x(30).y(5).chain() .overlay(new TextLayer().fontFamily(\"Cookie\").fontSize(40).fontWeight(\"bold\").text(\"Love\")).effect(\"colorize\").color(\"#f08\").chain() .angle(20).flags(\"layer_apply\").x(-45).y(44)).imageTag(\"coffee_cup.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .width(400).height(250).gravity(\"south\").crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"nice_couple\")).width(1.3).height(1.3).gravity(\"faces\").flags(\"region_relative\").crop(\"crop\").chain()\n .effect(\"saturation:50\").chain()\n .effect(\"vignette\").chain()\n .flags(\"layer_apply\").width(100).radius(\"max\").gravity(\"center\").y(20).x(-20).crop(\"scale\").chain()\n .overlay(new Layer().publicId(\"balloon\")).width(30).chain()\n .effect(\"hue:-20\").angle(5).chain()\n .flags(\"layer_apply\").x(30).y(5).chain()\n .overlay(new TextLayer().fontFamily(\"Cookie\").fontSize(40).fontWeight(\"bold\").text(\"Love\")).effect(\"colorize\").color(\"#f08\").chain()\n .angle(20).flags(\"layer_apply\").x(-45).y(44)).imageTag(\"coffee_cup.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"coffee_cup.jpg\", :transformation=>[ {:width=>400, :height=>250, :gravity=>\"south\", :crop=>\"fill\"}, {:overlay=>\"nice_couple\", :width=>1.3, :height=>1.3, :gravity=>\"faces\", :flags=>\"region_relative\", :crop=>\"crop\"}, {:effect=>\"saturation:50\"}, {:effect=>\"vignette\"}, {:flags=>\"layer_apply\", :width=>100, :radius=>\"max\", :gravity=>\"center\", :y=>20, :x=>-20, :crop=>\"scale\"}, {:overlay=>\"balloon\", :width=>30}, {:effect=>\"hue:-20\", :angle=>5}, {:flags=>\"layer_apply\", :x=>30, :y=>5}, {:overlay=>{:font_family=>\"Cookie\", :font_size=>40, :font_weight=>\"bold\", :text=>\"Love\"}, :effect=>\"colorize\", :color=>\"#f08\"}, {:angle=>20, :flags=>\"layer_apply\", :x=>-45, :y=>44} ])","codeSnippet":"cl_image_tag(\"coffee_cup.jpg\", :transformation=>[\n {:width=>400, :height=>250, :gravity=>\"south\", :crop=>\"fill\"},\n {:overlay=>\"nice_couple\", :width=>1.3, :height=>1.3, :gravity=>\"faces\", :flags=>\"region_relative\", :crop=>\"crop\"},\n {:effect=>\"saturation:50\"},\n {:effect=>\"vignette\"},\n {:flags=>\"layer_apply\", :width=>100, :radius=>\"max\", :gravity=>\"center\", :y=>20, :x=>-20, :crop=>\"scale\"},\n {:overlay=>\"balloon\", :width=>30},\n {:effect=>\"hue:-20\", :angle=>5},\n {:flags=>\"layer_apply\", :x=>30, :y=>5},\n {:overlay=>{:font_family=>\"Cookie\", :font_size=>40, :font_weight=>\"bold\", :text=>\"Love\"}, :effect=>\"colorize\", :color=>\"#f08\"},\n {:angle=>20, :flags=>\"layer_apply\", :x=>-45, :y=>44}\n ])","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Height(250).Gravity(\"south\").Crop(\"fill\").Chain() .Overlay(new Layer().PublicId(\"nice_couple\")).Width(1.3).Height(1.3).Gravity(\"faces\").Flags(\"region_relative\").Crop(\"crop\").Chain() .Effect(\"saturation:50\").Chain() .Effect(\"vignette\").Chain() .Flags(\"layer_apply\").Width(100).Radius(\"max\").Gravity(\"center\").Y(20).X(-20).Crop(\"scale\").Chain() .Overlay(new Layer().PublicId(\"balloon\")).Width(30).Chain() .Effect(\"hue:-20\").Angle(5).Chain() .Flags(\"layer_apply\").X(30).Y(5).Chain() .Overlay(new TextLayer().FontFamily(\"Cookie\").FontSize(40).FontWeight(\"bold\").Text(\"Love\")).Effect(\"colorize\").Color(\"#f08\").Chain() .Angle(20).Flags(\"layer_apply\").X(-45).Y(44)).BuildImageTag(\"coffee_cup.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .Width(400).Height(250).Gravity(\"south\").Crop(\"fill\").Chain()\n .Overlay(new Layer().PublicId(\"nice_couple\")).Width(1.3).Height(1.3).Gravity(\"faces\").Flags(\"region_relative\").Crop(\"crop\").Chain()\n .Effect(\"saturation:50\").Chain()\n .Effect(\"vignette\").Chain()\n .Flags(\"layer_apply\").Width(100).Radius(\"max\").Gravity(\"center\").Y(20).X(-20).Crop(\"scale\").Chain()\n .Overlay(new Layer().PublicId(\"balloon\")).Width(30).Chain()\n .Effect(\"hue:-20\").Angle(5).Chain()\n .Flags(\"layer_apply\").X(30).Y(5).Chain()\n .Overlay(new TextLayer().FontFamily(\"Cookie\").FontSize(40).FontWeight(\"bold\").Text(\"Love\")).Effect(\"colorize\").Color(\"#f08\").Chain()\n .Angle(20).Flags(\"layer_apply\").X(-45).Y(44)).BuildImageTag(\"coffee_cup.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('coffee_cup.jpg').transformation(Transformation()\n\t.addTransformation(\"w_400,h_250,c_fill,g_south\/l_nice_couple,w_1.3,h_1.3,g_faces,c_crop,fl_region_relative\/e_saturation:50\/e_vignette\/fl_layer_apply,w_100,r_max,g_center,y_20,x_-20\/l_balloon,w_30\/e_hue:-20,a_5\/fl_layer_apply,x_30,y_5\/l_text:Cookie_40_bold:Love,e_colorize,co_rgb:f08\/a_20,fl_layer_apply,x_-45,y_44\"));","codeSnippet":"cloudinary.image('coffee_cup.jpg').transformation(Transformation()\n\t.addTransformation(\"w_400,h_250,c_fill,g_south\/l_nice_couple,w_1.3,h_1.3,g_faces,c_crop,fl_region_relative\/e_saturation:50\/e_vignette\/fl_layer_apply,w_100,r_max,g_center,y_20,x_-20\/l_balloon,w_30\/e_hue:-20,a_5\/fl_layer_apply,x_30,y_5\/l_text:Cookie_40_bold:Love,e_colorize,co_rgb:f08\/a_20,fl_layer_apply,x_-45,y_44\"));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setHeight(250).setGravity(\"south\").setCrop(\"fill\").chain() .setOverlay(\"nice_couple\").setWidth(1.3).setHeight(1.3).setGravity(\"faces\").setFlags(\"region_relative\").setCrop(\"crop\").chain() .setEffect(\"saturation:50\").chain() .setEffect(\"vignette\").chain() .setFlags(\"layer_apply\").setWidth(100).setRadius(\"max\").setGravity(\"center\").setY(20).setX(-20).setCrop(\"scale\").chain() .setOverlay(\"balloon\").setWidth(30).chain() .setEffect(\"hue:-20\").setAngle(5).chain() .setFlags(\"layer_apply\").setX(30).setY(5).chain() .setOverlay(\"text:Cookie_40_bold:Love\").setEffect(\"colorize\").setColor(\"#f08\").chain() .setAngle(20).setFlags(\"layer_apply\").setX(-45).setY(44)).generate(\"coffee_cup.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setWidth(400).setHeight(250).setGravity(\"south\").setCrop(\"fill\").chain()\n .setOverlay(\"nice_couple\").setWidth(1.3).setHeight(1.3).setGravity(\"faces\").setFlags(\"region_relative\").setCrop(\"crop\").chain()\n .setEffect(\"saturation:50\").chain()\n .setEffect(\"vignette\").chain()\n .setFlags(\"layer_apply\").setWidth(100).setRadius(\"max\").setGravity(\"center\").setY(20).setX(-20).setCrop(\"scale\").chain()\n .setOverlay(\"balloon\").setWidth(30).chain()\n .setEffect(\"hue:-20\").setAngle(5).chain()\n .setFlags(\"layer_apply\").setX(30).setY(5).chain()\n .setOverlay(\"text:Cookie_40_bold:Love\").setEffect(\"colorize\").setColor(\"#f08\").chain()\n .setAngle(20).setFlags(\"layer_apply\").setX(-45).setY(44)).generate(\"coffee_cup.jpg\")!, cloudinary: cloudinary)","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().width(400).height(250).gravity(\"south\").crop(\"fill\").chain() .overlay(new Layer().publicId(\"nice_couple\")).width(1.3).height(1.3).gravity(\"faces\").flags(\"region_relative\").crop(\"crop\").chain() .effect(\"saturation:50\").chain() .effect(\"vignette\").chain() .flags(\"layer_apply\").width(100).radius(\"max\").gravity(\"center\").y(20).x(-20).crop(\"scale\").chain() .overlay(new Layer().publicId(\"balloon\")).width(30).chain() .effect(\"hue:-20\").angle(5).chain() .flags(\"layer_apply\").x(30).y(5).chain() .overlay(new TextLayer().fontFamily(\"Cookie\").fontSize(40).fontWeight(\"bold\").text(\"Love\")).effect(\"colorize\").color(\"#f08\").chain() .angle(20).flags(\"layer_apply\").x(-45).y(44)).generate(\"coffee_cup.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .width(400).height(250).gravity(\"south\").crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"nice_couple\")).width(1.3).height(1.3).gravity(\"faces\").flags(\"region_relative\").crop(\"crop\").chain()\n .effect(\"saturation:50\").chain()\n .effect(\"vignette\").chain()\n .flags(\"layer_apply\").width(100).radius(\"max\").gravity(\"center\").y(20).x(-20).crop(\"scale\").chain()\n .overlay(new Layer().publicId(\"balloon\")).width(30).chain()\n .effect(\"hue:-20\").angle(5).chain()\n .flags(\"layer_apply\").x(30).y(5).chain()\n .overlay(new TextLayer().fontFamily(\"Cookie\").fontSize(40).fontWeight(\"bold\").text(\"Love\")).effect(\"colorize\").color(\"#f08\").chain()\n .angle(20).flags(\"layer_apply\").x(-45).y(44)).generate(\"coffee_cup.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('coffee_cup.jpg').transformation(Transformation()\n\t.addTransformation(\"w_400,h_250,c_fill,g_south\/l_nice_couple,w_1.3,h_1.3,g_faces,c_crop,fl_region_relative\/e_saturation:50\/e_vignette\/fl_layer_apply,w_100,r_max,g_center,y_20,x_-20\/l_balloon,w_30\/e_hue:-20,a_5\/fl_layer_apply,x_30,y_5\/l_text:Cookie_40_bold:Love,e_colorize,co_rgb:f08\/a_20,fl_layer_apply,x_-45,y_44\"));","codeSnippet":"cloudinary.image('coffee_cup.jpg').transformation(Transformation()\n\t.addTransformation(\"w_400,h_250,c_fill,g_south\/l_nice_couple,w_1.3,h_1.3,g_faces,c_crop,fl_region_relative\/e_saturation:50\/e_vignette\/fl_layer_apply,w_100,r_max,g_center,y_20,x_-20\/l_balloon,w_30\/e_hue:-20,a_5\/fl_layer_apply,x_30,y_5\/l_text:Cookie_40_bold:Love,e_colorize,co_rgb:f08\/a_20,fl_layer_apply,x_-45,y_44\"));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"coffee_cup.jpg\")\n\t resize(Resize.fill() { width(400)\n height(250)\n\t gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"nice_couple\") {\n\t transformation(Transformation {\n\t resize(Resize.crop() { width(1.3F)\n height(1.3F)\n\t gravity(\n\tGravity.focusOn(\n\tFocusOn.faces()))\n\t regionRelative()\n\t })\n\t adjust(Adjust.saturation() { level(50) })\n\t effect(Effect.vignette())\n\t resize(Resize.scale() { width(100) })\n\t roundCorners(RoundCorners.max()) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.center()))\n offsetX(-20)\n offsetY(20) })\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"balloon\") {\n\t transformation(Transformation {\n\t resize(Resize.scale() { width(30) })\n\t rotate(Rotate.byAngle(5))\n\t adjust(Adjust.hue() { level(-20) }) })\n\t }) {\n\t position(Position() { offsetX(30)\n offsetY(5) })\n\t })\n\t overlay(Overlay.source(\n\tSource.text(\"Love\",TextStyle(\"Cookie\",40) {\n\t fontWeight(\n\tFontWeight.bold())\n\t }) {\n\t textColor(Color.rgb(\"f08\"))\n\t transformation(Transformation {\n\t effect(Effect.colorize())\n\t rotate(Rotate.byAngle(20)) })\n\t }) {\n\t position(Position() { offsetX(-45)\n offsetY(44) })\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"coffee_cup.jpg\")\n\t resize(Resize.fill() { width(400)\n height(250)\n\t gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"nice_couple\") {\n\t transformation(Transformation {\n\t resize(Resize.crop() { width(1.3F)\n height(1.3F)\n\t gravity(\n\tGravity.focusOn(\n\tFocusOn.faces()))\n\t regionRelative()\n\t })\n\t adjust(Adjust.saturation() { level(50) })\n\t effect(Effect.vignette())\n\t resize(Resize.scale() { width(100) })\n\t roundCorners(RoundCorners.max()) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.center()))\n offsetX(-20)\n offsetY(20) })\n\t })\n\t overlay(Overlay.source(\n\tSource.image(\"balloon\") {\n\t transformation(Transformation {\n\t resize(Resize.scale() { width(30) })\n\t rotate(Rotate.byAngle(5))\n\t adjust(Adjust.hue() { level(-20) }) })\n\t }) {\n\t position(Position() { offsetX(30)\n offsetY(5) })\n\t })\n\t overlay(Overlay.source(\n\tSource.text(\"Love\",TextStyle(\"Cookie\",40) {\n\t fontWeight(\n\tFontWeight.bold())\n\t }) {\n\t textColor(Color.rgb(\"f08\"))\n\t transformation(Transformation {\n\t effect(Effect.colorize())\n\t rotate(Rotate.byAngle(20)) })\n\t }) {\n\t position(Position() { offsetX(-45)\n offsetY(44) })\n\t }) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.image(\"coffee_cup.jpg\", {transformation: [ {width: 400, height: 250, gravity: \"south\", crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"nice_couple\"), width: \"1.3\", height: \"1.3\", gravity: \"faces\", flags: \"region_relative\", crop: \"crop\"}, {effect: \"saturation:50\"}, {effect: \"vignette\"}, {flags: \"layer_apply\", width: 100, radius: \"max\", gravity: \"center\", y: 20, x: -20, crop: \"scale\"}, {overlay: new cloudinary.Layer().publicId(\"balloon\"), width: 30}, {effect: \"hue:-20\", angle: 5}, {flags: \"layer_apply\", x: 30, y: 5}, {overlay: new cloudinary.TextLayer().fontFamily(\"Cookie\").fontSize(40).fontWeight(\"bold\").text(\"Love\"), effect: \"colorize\", color: \"#f08\"}, {angle: 20, flags: \"layer_apply\", x: -45, y: 44} ]})","codeSnippet":"$.cloudinary.image(\"coffee_cup.jpg\", {transformation: [\n {width: 400, height: 250, gravity: \"south\", crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"nice_couple\"), width: \"1.3\", height: \"1.3\", gravity: \"faces\", flags: \"region_relative\", crop: \"crop\"},\n {effect: \"saturation:50\"},\n {effect: \"vignette\"},\n {flags: \"layer_apply\", width: 100, radius: \"max\", gravity: \"center\", y: 20, x: -20, crop: \"scale\"},\n {overlay: new cloudinary.Layer().publicId(\"balloon\"), width: 30},\n {effect: \"hue:-20\", angle: 5},\n {flags: \"layer_apply\", x: 30, y: 5},\n {overlay: new cloudinary.TextLayer().fontFamily(\"Cookie\").fontSize(40).fontWeight(\"bold\").text(\"Love\"), effect: \"colorize\", color: \"#f08\"},\n {angle: 20, flags: \"layer_apply\", x: -45, y: 44}\n ]})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n )\n .overlay(\n source(\n image(\"balloon\").transformation(\n new Transformation()\n .resize(scale().width(30))\n .rotate(byAngle(5))\n .adjust(hue().level(-20))\n )\n ).position(new Position().offsetX(30).offsetY(5))\n )\n .overlay(\n source(\n text(\"Love\", new TextStyle(\"Cookie\", 40).fontWeight(\"bold\"))\n .textColor(\"#f08\")\n .transformation(\n new Transformation().effect(colorize()).rotate(byAngle(20))\n )\n ).position(new Position().offsetX(-45).offsetY(44))\n );","codeSnippet":"new CloudinaryImage(\"coffee_cup.jpg\")\n .resize(\n fill()\n .width(400)\n .height(250)\n .gravity(compass(\"south\"))\n )\n .overlay(\n source(\n image(\"nice_couple\").transformation(\n new Transformation()\n .resize(\n crop()\n .width(1.3)\n .height(1.3)\n .gravity(focusOn(faces()))\n .regionRelative()\n )\n .adjust(saturation().level(50))\n .effect(vignette())\n .resize(scale().width(100))\n .roundCorners(max())\n )\n ).position(\n new Position()\n .gravity(compass(\"center\"))\n .offsetX(-20)\n .offsetY(20)\n )\n )\n .overlay(\n source(\n image(\"balloon\").transformation(\n new Transformation()\n .resize(scale().width(30))\n .rotate(byAngle(5))\n .adjust(hue().level(-20))\n )\n ).position(new Position().offsetX(30).offsetY(5))\n )\n .overlay(\n source(\n text(\"Love\", new TextStyle(\"Cookie\", 40).fontWeight(\"bold\"))\n .textColor(\"#f08\")\n .transformation(\n new Transformation().effect(colorize()).rotate(byAngle(20))\n )\n ).position(new Position().offsetX(-45).offsetY(44))\n );","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.aaaalireno.com\/demo\/image\/upload\/w_400,h_250,c_fill,g_south\/l_nice_couple,w_1.3,h_1.3,g_faces,c_crop,fl_region_relative\/e_saturation:50\/e_vignette\/fl_layer_apply,w_100,r_max,g_center,y_20,x_-20\/l_balloon,w_30\/e_hue:-20,a_5\/fl_layer_apply,x_30,y_5\/l_text:Cookie_40_bold:Love,e_colorize,co_rgb:f08\/a_20,fl_layer_apply,x_-45,y_44\/coffee_cup.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"width":"400","height":"250","crop_mode":"fill","gravity":"south"},{"overlay":"nice_couple","width":"1.3","height":"1.3","gravity":"faces","crop_mode":"crop","flags":"region_relative"},{"effect":"saturation:50"},{"effect":"vignette"},{"flags":"layer_apply","width":"100","radius":"max","gravity":"center","y":"20","x":"-20"},{"overlay":"balloon","width":"30"},{"effect":"hue:-20","angle":"5"},{"flags":"layer_apply","x":"30","y":"5"},{"overlay":"text:Cookie_40_bold:Love","effect":"colorize","color":"rgb:f08"},{"angle":"20","flags":"layer_apply","x":"-45","y":"44"}],"transformation_string":"w_400,h_250,c_fill,g_south\/l_nice_couple,w_1.3,h_1.3,g_faces,c_crop,fl_region_relative\/e_saturation:50\/e_vignette\/fl_layer_apply,w_100,r_max,g_center,y_20,x_-20\/l_balloon,w_30\/e_hue:-20,a_5\/fl_layer_apply,x_30,y_5\/l_text:Cookie_40_bold:Love,e_colorize,co_rgb:f08\/a_20,fl_layer_apply,x_-45,y_44","url_suffix":"","version":"","secure":true,"public_id":"coffee_cup.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
云性强能允许你变换并生成复杂综合图像 匹配图形设计需求可使用云式动态变换URL用户加载图像转换图像,同时将多图像和文本叠加成单新图像由新特征引入此文章后, 云化公司丰富的变换能力集可单独应用到底层或叠加图像或文本的每一层上。所有叠加变换特征都可用云化计划中包括自由级.万一你还没有云型账号注册免费账号.
