图像重叠文本,无CSS或HTML完美像素

写由NadavSoferman 塞普-20-2020 4min读取

图像上叠加文本多功能有效方式聚焦字幕名版权水印电子商业邮件中还可用文字覆盖动态图像(广告横幅、票券、贺卡、商务卡)。

客户常询问如何动态叠加图片文本常用方法之一是使用HTML元素、CSS或原生移动UI控件通常比较高效地叠加图片文本同时制作, 简化后台频道设备显示过程

利用云管理服务,你可以上传图片或视频,具体说明文本并动态覆盖在飞上配有认证API调用.可同时使用构建带文本层的动态横幅.

动态样式

从云形新可获取的动态URL可实时叠加文本-字体自选-图像还可以进一步定制并变换文本层以图和感知你的愿望整个过程发生在云中,不需要验证API调用

下动URL前加载图像命名exshell.jpg并贴标签海壳内含l_text:带下列属性的参数

字型名数位数)
字体大小像素60码)
标签(海壳)
定位叠加20码),即图像顶部20像素,定义由重力参数设置北边高山市g_nortth内URL)

云化提供数以百计字体,包括Google字体.要指定字体选择,请按上例显示的URL添加它的名称(案例敏感度)。供下一步定制时附加一个或多个属性粗体,斜体,下划线,直通电路,中心点,左转并右转.

下图再次标注海壳,现为Courier字体、粗体、斜体化并下划线

<\/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(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\n \"Sea Shell\",\n new TextStyle(\"courier\", 60)\n .fontWeight(\"bold\")\n .fontStyle(\"italic\")\n .textDecoration(\"underline\")\n )\n ).position(\n new Position()\n .gravity(compass(\"north\"))\n .offsetY(20)\n )\n );","codeSnippet":"new CloudinaryImage(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\n \"Sea Shell\",\n new TextStyle(\"courier\", 60)\n .fontWeight(\"bold\")\n .fontStyle(\"italic\")\n .textDecoration(\"underline\")\n )\n ).position(\n new Position()\n .gravity(compass(\"north\"))\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<\/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(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\n \"Sea Shell\",\n new TextStyle(\"courier\", 60)\n .fontWeight(\"bold\")\n .fontStyle(\"italic\")\n .textDecoration(\"underline\")\n )\n ).position(\n new Position()\n .gravity(compass(\"north\"))\n .offsetY(20)\n )\n );","codeSnippet":"new CloudinaryImage(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\n \"Sea Shell\",\n new TextStyle(\"courier\", 60)\n .fontWeight(\"bold\")\n .fontStyle(\"italic\")\n .textDecoration(\"underline\")\n )\n ).position(\n new Position()\n .gravity(compass(\"north\"))\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-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(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\n \"Sea Shell\",\n new TextStyle(\"courier\", 60)\n .fontWeight(\"bold\")\n .fontStyle(\"italic\")\n .textDecoration(\"underline\")\n )\n ).position(\n new Position()\n .gravity(compass(\"north\"))\n .offsetY(20)\n )\n );","codeSnippet":"new CloudinaryImage(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\n \"Sea Shell\",\n new TextStyle(\"courier\", 60)\n .fontWeight(\"bold\")\n .fontStyle(\"italic\")\n .textDecoration(\"underline\")\n )\n ).position(\n new Position()\n .gravity(compass(\"north\"))\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('sea_shell.jpg', {transformation: [ {width: 400, quality: \"auto\", crop: \"scale\"}, {overlay: new cloudinary.TextLayer().fontFamily(\"courier\").fontSize(60).fontWeight(\"bold\").fontStyle(\"italic\").textDecoration(\"underline\").text(\"Sea%20Shell\"), gravity: \"north\", y: 20} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('sea_shell.jpg', {transformation: [\n {width: 400, quality: \"auto\", crop: \"scale\"},\n {overlay: new cloudinary.TextLayer().fontFamily(\"courier\").fontSize(60).fontWeight(\"bold\").fontStyle(\"italic\").textDecoration(\"underline\").text(\"Sea%20Shell\"), gravity: \"north\", y: 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(\"sea_shell.jpg\").image(transformation=[ {'width': 400, 'quality': \"auto\", 'crop': \"scale\"}, {'overlay': {'font_family': \"courier\", 'font_size': 60, 'font_weight': \"bold\", 'font_style': \"italic\", 'text_decoration': \"underline\", 'text': \"Sea%20Shell\"}, 'gravity': \"north\", 'y': 20} ])","codeSnippet":"CloudinaryImage(\"sea_shell.jpg\").image(transformation=[\n {'width': 400, 'quality': \"auto\", 'crop': \"scale\"},\n {'overlay': {'font_family': \"courier\", 'font_size': 60, 'font_weight': \"bold\", 'font_style': \"italic\", 'text_decoration': \"underline\", 'text': \"Sea%20Shell\"}, 'gravity': \"north\", 'y': 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('sea_shell.jpg'))\n\t->resize(Resize::scale()->width(400))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::auto()))\n\t->overlay(Overlay::source(\n\tSource::text(\"Sea Shell\",(new TextStyle(\"courier\",60))\n\t->fontWeight(\n\tFontWeight::bold())\n\t->fontStyle(\n\tFontStyle::italic())\n\t->textDecoration(\n\tTextDecoration::underline())\n\t))\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n->offsetY(20))\n\t);","codeSnippet":"(new ImageTag('sea_shell.jpg'))\n\t->resize(Resize::scale()->width(400))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::auto()))\n\t->overlay(Overlay::source(\n\tSource::text(\"Sea Shell\",(new TextStyle(\"courier\",60))\n\t->fontWeight(\n\tFontWeight::bold())\n\t->fontStyle(\n\tFontStyle::italic())\n\t->textDecoration(\n\tTextDecoration::underline())\n\t))\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\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(\"sea_shell.jpg\", array(\"transformation\"=>array( array(\"width\"=>400, \"quality\"=>\"auto\", \"crop\"=>\"scale\"), array(\"overlay\"=>array(\"font_family\"=>\"courier\", \"font_size\"=>60, \"font_weight\"=>\"bold\", \"font_style\"=>\"italic\", \"text_decoration\"=>\"underline\", \"text\"=>\"Sea%20Shell\"), \"gravity\"=>\"north\", \"y\"=>20) )))","codeSnippet":"cl_image_tag(\"sea_shell.jpg\", array(\"transformation\"=>array(\n array(\"width\"=>400, \"quality\"=>\"auto\", \"crop\"=>\"scale\"),\n array(\"overlay\"=>array(\"font_family\"=>\"courier\", \"font_size\"=>60, \"font_weight\"=>\"bold\", \"font_style\"=>\"italic\", \"text_decoration\"=>\"underline\", \"text\"=>\"Sea%20Shell\"), \"gravity\"=>\"north\", \"y\"=>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).quality(\"auto\").crop(\"scale\").chain() .overlay(new TextLayer().fontFamily(\"courier\").fontSize(60).fontWeight(\"bold\").fontStyle(\"italic\").textDecoration(\"underline\").text(\"Sea%20Shell\")).gravity(\"north\").y(20)).imageTag(\"sea_shell.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .width(400).quality(\"auto\").crop(\"scale\").chain()\n .overlay(new TextLayer().fontFamily(\"courier\").fontSize(60).fontWeight(\"bold\").fontStyle(\"italic\").textDecoration(\"underline\").text(\"Sea%20Shell\")).gravity(\"north\").y(20)).imageTag(\"sea_shell.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"sea_shell.jpg\", :transformation=>[ {:width=>400, :quality=>\"auto\", :crop=>\"scale\"}, {:overlay=>{:font_family=>\"courier\", :font_size=>60, :font_weight=>\"bold\", :font_style=>\"italic\", :text_decoration=>\"underline\", :text=>\"Sea%20Shell\"}, :gravity=>\"north\", :y=>20} ])","codeSnippet":"cl_image_tag(\"sea_shell.jpg\", :transformation=>[\n {:width=>400, :quality=>\"auto\", :crop=>\"scale\"},\n {:overlay=>{:font_family=>\"courier\", :font_size=>60, :font_weight=>\"bold\", :font_style=>\"italic\", :text_decoration=>\"underline\", :text=>\"Sea%20Shell\"}, :gravity=>\"north\", :y=>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).Quality(\"auto\").Crop(\"scale\").Chain() .Overlay(new TextLayer().FontFamily(\"courier\").FontSize(60).FontWeight(\"bold\").FontStyle(\"italic\").TextDecoration(\"underline\").Text(\"Sea%20Shell\")).Gravity(\"north\").Y(20)).BuildImageTag(\"sea_shell.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .Width(400).Quality(\"auto\").Crop(\"scale\").Chain()\n .Overlay(new TextLayer().FontFamily(\"courier\").FontSize(60).FontWeight(\"bold\").FontStyle(\"italic\").TextDecoration(\"underline\").Text(\"Sea%20Shell\")).Gravity(\"north\").Y(20)).BuildImageTag(\"sea_shell.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('sea_shell.jpg').transformation(Transformation()\n\t.addTransformation(\"w_400,f_auto,q_auto\/l_text:courier_60_bold_italic_underline:Sea Shell,g_north,y_20\"));","codeSnippet":"cloudinary.image('sea_shell.jpg').transformation(Transformation()\n\t.addTransformation(\"w_400,f_auto,q_auto\/l_text:courier_60_bold_italic_underline:Sea Shell,g_north,y_20\"));","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).setQuality(\"auto\").setCrop(\"scale\").chain() .setOverlay(\"text:courier_60_bold_italic_underline:Sea%20Shell\").setGravity(\"north\").setY(20)).generate(\"sea_shell.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setWidth(400).setQuality(\"auto\").setCrop(\"scale\").chain()\n .setOverlay(\"text:courier_60_bold_italic_underline:Sea%20Shell\").setGravity(\"north\").setY(20)).generate(\"sea_shell.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).quality(\"auto\").crop(\"scale\").chain() .overlay(new TextLayer().fontFamily(\"courier\").fontSize(60).fontWeight(\"bold\").fontStyle(\"italic\").textDecoration(\"underline\").text(\"Sea%20Shell\")).gravity(\"north\").y(20)).generate(\"sea_shell.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .width(400).quality(\"auto\").crop(\"scale\").chain()\n .overlay(new TextLayer().fontFamily(\"courier\").fontSize(60).fontWeight(\"bold\").fontStyle(\"italic\").textDecoration(\"underline\").text(\"Sea%20Shell\")).gravity(\"north\").y(20)).generate(\"sea_shell.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('sea_shell.jpg').transformation(Transformation()\n\t.addTransformation(\"w_400,f_auto,q_auto\/l_text:courier_60_bold_italic_underline:Sea Shell,g_north,y_20\"));","codeSnippet":"cloudinary.image('sea_shell.jpg').transformation(Transformation()\n\t.addTransformation(\"w_400,f_auto,q_auto\/l_text:courier_60_bold_italic_underline:Sea Shell,g_north,y_20\"));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"sea_shell.jpg\")\n\t resize(Resize.scale() { width(400) })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.auto()))\n\t overlay(Overlay.source(\n\tSource.text(\"Sea Shell\",TextStyle(\"courier\",60) {\n\t fontWeight(\n\tFontWeight.bold())\n\t fontStyle(\n\tFontStyle.italic())\n\t textDecoration(\n\tTextDecoration.underline())\n\t })) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\n offsetY(20) })\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"sea_shell.jpg\")\n\t resize(Resize.scale() { width(400) })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.auto()))\n\t overlay(Overlay.source(\n\tSource.text(\"Sea Shell\",TextStyle(\"courier\",60) {\n\t fontWeight(\n\tFontWeight.bold())\n\t fontStyle(\n\tFontStyle.italic())\n\t textDecoration(\n\tTextDecoration.underline())\n\t })) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\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(\"sea_shell.jpg\", {transformation: [ {width: 400, quality: \"auto\", crop: \"scale\"}, {overlay: new cloudinary.TextLayer().fontFamily(\"courier\").fontSize(60).fontWeight(\"bold\").fontStyle(\"italic\").textDecoration(\"underline\").text(\"Sea%20Shell\"), gravity: \"north\", y: 20} ]})","codeSnippet":"$.cloudinary.image(\"sea_shell.jpg\", {transformation: [\n {width: 400, quality: \"auto\", crop: \"scale\"},\n {overlay: new cloudinary.TextLayer().fontFamily(\"courier\").fontSize(60).fontWeight(\"bold\").fontStyle(\"italic\").textDecoration(\"underline\").text(\"Sea%20Shell\"), gravity: \"north\", y: 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(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\n \"Sea Shell\",\n new TextStyle(\"courier\", 60)\n .fontWeight(\"bold\")\n .fontStyle(\"italic\")\n .textDecoration(\"underline\")\n )\n ).position(\n new Position()\n .gravity(compass(\"north\"))\n .offsetY(20)\n )\n );","codeSnippet":"new CloudinaryImage(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\n \"Sea Shell\",\n new TextStyle(\"courier\", 60)\n .fontWeight(\"bold\")\n .fontStyle(\"italic\")\n .textDecoration(\"underline\")\n )\n ).position(\n new Position()\n .gravity(compass(\"north\"))\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.agrosoland.com\/demo\/image\/upload\/w_400,f_auto,q_auto\/l_text:courier_60_bold_italic_underline:Sea%20Shell,g_north,y_20\/sea_shell.jpg","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"width":"400","format":"auto","quality":"auto"},{"overlay":"text:courier_60_bold_italic_underline:Sea Shell","gravity":"north","y":"20"}],"transformation_string":"w_400,f_auto,q_auto\/l_text:courier_60_bold_italic_underline:Sea Shell,g_north,y_20","url_suffix":"","version":"","secure":true,"public_id":"sea_shell.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

颜色不透明度

并可用云性修改图像颜色和不透明性

指定文本叠加颜色设置颜色显示参数(上头面向颜色名称或RGB表示式下示例显示蓝字幕粗体80像素Helvetica字体

<\/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(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\n \"Sea Shell\",\n new TextStyle(\"helvetica\", 80).fontWeight(\"bold\")\n ).textColor(\"blue\")\n ).position(\n new Position()\n .gravity(compass(\"north\"))\n .offsetY(20)\n )\n );","codeSnippet":"new CloudinaryImage(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\n \"Sea Shell\",\n new TextStyle(\"helvetica\", 80).fontWeight(\"bold\")\n ).textColor(\"blue\")\n ).position(\n new Position()\n .gravity(compass(\"north\"))\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<\/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(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\n \"Sea Shell\",\n new TextStyle(\"helvetica\", 80).fontWeight(\"bold\")\n ).textColor(\"blue\")\n ).position(\n new Position()\n .gravity(compass(\"north\"))\n .offsetY(20)\n )\n );","codeSnippet":"new CloudinaryImage(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\n \"Sea Shell\",\n new TextStyle(\"helvetica\", 80).fontWeight(\"bold\")\n ).textColor(\"blue\")\n ).position(\n new Position()\n .gravity(compass(\"north\"))\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-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(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\n \"Sea Shell\",\n new TextStyle(\"helvetica\", 80).fontWeight(\"bold\")\n ).textColor(\"blue\")\n ).position(\n new Position()\n .gravity(compass(\"north\"))\n .offsetY(20)\n )\n );","codeSnippet":"new CloudinaryImage(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\n \"Sea Shell\",\n new TextStyle(\"helvetica\", 80).fontWeight(\"bold\")\n ).textColor(\"blue\")\n ).position(\n new Position()\n .gravity(compass(\"north\"))\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('sea_shell.jpg', {transformation: [ {width: 400, quality: \"auto\", crop: \"scale\"}, {overlay: new cloudinary.TextLayer().fontFamily(\"helvetica\").fontSize(80).fontWeight(\"bold\").text(\"Sea%20Shell\"), gravity: \"north\", y: 20, color: \"blue\"} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('sea_shell.jpg', {transformation: [\n {width: 400, quality: \"auto\", crop: \"scale\"},\n {overlay: new cloudinary.TextLayer().fontFamily(\"helvetica\").fontSize(80).fontWeight(\"bold\").text(\"Sea%20Shell\"), gravity: \"north\", y: 20, color: \"blue\"}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"sea_shell.jpg\").image(transformation=[ {'width': 400, 'quality': \"auto\", 'crop': \"scale\"}, {'overlay': {'font_family': \"helvetica\", 'font_size': 80, 'font_weight': \"bold\", 'text': \"Sea%20Shell\"}, 'gravity': \"north\", 'y': 20, 'color': \"blue\"} ])","codeSnippet":"CloudinaryImage(\"sea_shell.jpg\").image(transformation=[\n {'width': 400, 'quality': \"auto\", 'crop': \"scale\"},\n {'overlay': {'font_family': \"helvetica\", 'font_size': 80, 'font_weight': \"bold\", 'text': \"Sea%20Shell\"}, 'gravity': \"north\", 'y': 20, 'color': \"blue\"}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('sea_shell.jpg'))\n\t->resize(Resize::scale()->width(400))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::auto()))\n\t->overlay(Overlay::source(\n\tSource::text(\"Sea Shell\",(new TextStyle(\"helvetica\",80))\n\t->fontWeight(\n\tFontWeight::bold())\n\t)\n\t->textColor(Color::BLUE)\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n->offsetY(20))\n\t);","codeSnippet":"(new ImageTag('sea_shell.jpg'))\n\t->resize(Resize::scale()->width(400))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::auto()))\n\t->overlay(Overlay::source(\n\tSource::text(\"Sea Shell\",(new TextStyle(\"helvetica\",80))\n\t->fontWeight(\n\tFontWeight::bold())\n\t)\n\t->textColor(Color::BLUE)\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\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(\"sea_shell.jpg\", array(\"transformation\"=>array( array(\"width\"=>400, \"quality\"=>\"auto\", \"crop\"=>\"scale\"), array(\"overlay\"=>array(\"font_family\"=>\"helvetica\", \"font_size\"=>80, \"font_weight\"=>\"bold\", \"text\"=>\"Sea%20Shell\"), \"gravity\"=>\"north\", \"y\"=>20, \"color\"=>\"blue\") )))","codeSnippet":"cl_image_tag(\"sea_shell.jpg\", array(\"transformation\"=>array(\n array(\"width\"=>400, \"quality\"=>\"auto\", \"crop\"=>\"scale\"),\n array(\"overlay\"=>array(\"font_family\"=>\"helvetica\", \"font_size\"=>80, \"font_weight\"=>\"bold\", \"text\"=>\"Sea%20Shell\"), \"gravity\"=>\"north\", \"y\"=>20, \"color\"=>\"blue\")\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).quality(\"auto\").crop(\"scale\").chain() .overlay(new TextLayer().fontFamily(\"helvetica\").fontSize(80).fontWeight(\"bold\").text(\"Sea%20Shell\")).gravity(\"north\").y(20).color(\"blue\")).imageTag(\"sea_shell.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .width(400).quality(\"auto\").crop(\"scale\").chain()\n .overlay(new TextLayer().fontFamily(\"helvetica\").fontSize(80).fontWeight(\"bold\").text(\"Sea%20Shell\")).gravity(\"north\").y(20).color(\"blue\")).imageTag(\"sea_shell.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"sea_shell.jpg\", :transformation=>[ {:width=>400, :quality=>\"auto\", :crop=>\"scale\"}, {:overlay=>{:font_family=>\"helvetica\", :font_size=>80, :font_weight=>\"bold\", :text=>\"Sea%20Shell\"}, :gravity=>\"north\", :y=>20, :color=>\"blue\"} ])","codeSnippet":"cl_image_tag(\"sea_shell.jpg\", :transformation=>[\n {:width=>400, :quality=>\"auto\", :crop=>\"scale\"},\n {:overlay=>{:font_family=>\"helvetica\", :font_size=>80, :font_weight=>\"bold\", :text=>\"Sea%20Shell\"}, :gravity=>\"north\", :y=>20, :color=>\"blue\"}\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).Quality(\"auto\").Crop(\"scale\").Chain() .Overlay(new TextLayer().FontFamily(\"helvetica\").FontSize(80).FontWeight(\"bold\").Text(\"Sea%20Shell\")).Gravity(\"north\").Y(20).Color(\"blue\")).BuildImageTag(\"sea_shell.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .Width(400).Quality(\"auto\").Crop(\"scale\").Chain()\n .Overlay(new TextLayer().FontFamily(\"helvetica\").FontSize(80).FontWeight(\"bold\").Text(\"Sea%20Shell\")).Gravity(\"north\").Y(20).Color(\"blue\")).BuildImageTag(\"sea_shell.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('sea_shell.jpg').transformation(Transformation()\n\t.addTransformation(\"w_400,f_auto,q_auto\/l_text:helvetica_80_bold:Sea Shell,g_north,y_20,co_blue\"));","codeSnippet":"cloudinary.image('sea_shell.jpg').transformation(Transformation()\n\t.addTransformation(\"w_400,f_auto,q_auto\/l_text:helvetica_80_bold:Sea Shell,g_north,y_20,co_blue\"));","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).setQuality(\"auto\").setCrop(\"scale\").chain() .setOverlay(\"text:helvetica_80_bold:Sea%20Shell\").setGravity(\"north\").setY(20).setColor(\"blue\")).generate(\"sea_shell.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setWidth(400).setQuality(\"auto\").setCrop(\"scale\").chain()\n .setOverlay(\"text:helvetica_80_bold:Sea%20Shell\").setGravity(\"north\").setY(20).setColor(\"blue\")).generate(\"sea_shell.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).quality(\"auto\").crop(\"scale\").chain() .overlay(new TextLayer().fontFamily(\"helvetica\").fontSize(80).fontWeight(\"bold\").text(\"Sea%20Shell\")).gravity(\"north\").y(20).color(\"blue\")).generate(\"sea_shell.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .width(400).quality(\"auto\").crop(\"scale\").chain()\n .overlay(new TextLayer().fontFamily(\"helvetica\").fontSize(80).fontWeight(\"bold\").text(\"Sea%20Shell\")).gravity(\"north\").y(20).color(\"blue\")).generate(\"sea_shell.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('sea_shell.jpg').transformation(Transformation()\n\t.addTransformation(\"w_400,f_auto,q_auto\/l_text:helvetica_80_bold:Sea Shell,g_north,y_20,co_blue\"));","codeSnippet":"cloudinary.image('sea_shell.jpg').transformation(Transformation()\n\t.addTransformation(\"w_400,f_auto,q_auto\/l_text:helvetica_80_bold:Sea Shell,g_north,y_20,co_blue\"));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"sea_shell.jpg\")\n\t resize(Resize.scale() { width(400) })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.auto()))\n\t overlay(Overlay.source(\n\tSource.text(\"Sea Shell\",TextStyle(\"helvetica\",80) {\n\t fontWeight(\n\tFontWeight.bold())\n\t }) {\n\t textColor(Color.BLUE)\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\n offsetY(20) })\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"sea_shell.jpg\")\n\t resize(Resize.scale() { width(400) })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.auto()))\n\t overlay(Overlay.source(\n\tSource.text(\"Sea Shell\",TextStyle(\"helvetica\",80) {\n\t fontWeight(\n\tFontWeight.bold())\n\t }) {\n\t textColor(Color.BLUE)\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\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(\"sea_shell.jpg\", {transformation: [ {width: 400, quality: \"auto\", crop: \"scale\"}, {overlay: new cloudinary.TextLayer().fontFamily(\"helvetica\").fontSize(80).fontWeight(\"bold\").text(\"Sea%20Shell\"), gravity: \"north\", y: 20, color: \"blue\"} ]})","codeSnippet":"$.cloudinary.image(\"sea_shell.jpg\", {transformation: [\n {width: 400, quality: \"auto\", crop: \"scale\"},\n {overlay: new cloudinary.TextLayer().fontFamily(\"helvetica\").fontSize(80).fontWeight(\"bold\").text(\"Sea%20Shell\"), gravity: \"north\", y: 20, color: \"blue\"}\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(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\n \"Sea Shell\",\n new TextStyle(\"helvetica\", 80).fontWeight(\"bold\")\n ).textColor(\"blue\")\n ).position(\n new Position()\n .gravity(compass(\"north\"))\n .offsetY(20)\n )\n );","codeSnippet":"new CloudinaryImage(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\n \"Sea Shell\",\n new TextStyle(\"helvetica\", 80).fontWeight(\"bold\")\n ).textColor(\"blue\")\n ).position(\n new Position()\n .gravity(compass(\"north\"))\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.agrosoland.com\/demo\/image\/upload\/w_400,f_auto,q_auto\/l_text:helvetica_80_bold:Sea%20Shell,g_north,y_20,co_blue\/sea_shell.jpg","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"width":"400","format":"auto","quality":"auto"},{"overlay":"text:helvetica_80_bold:Sea Shell","gravity":"north","y":"20","color":"blue"}],"transformation_string":"w_400,f_auto,q_auto\/l_text:helvetica_80_bold:Sea Shell,g_north,y_20,co_blue","url_suffix":"","version":"","secure":true,"public_id":"sea_shell.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

微调文本叠加的不透明性设置不透明度参数(或)欧市URLs)值0至100下示例显示红色半透明字幕叠加

<\/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(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\"Sea Shell\", new TextStyle(\"helvetica\", 80).fontWeight(\"bold\"))\n .textColor(\"#8b0f02\")\n .transformation(new Transformation().adjust(opacity(50)))\n ).position(\n new Position()\n .gravity(compass(\"north\"))\n .offsetY(20)\n )\n );","codeSnippet":"new CloudinaryImage(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\"Sea Shell\", new TextStyle(\"helvetica\", 80).fontWeight(\"bold\"))\n .textColor(\"#8b0f02\")\n .transformation(new Transformation().adjust(opacity(50)))\n ).position(\n new Position()\n .gravity(compass(\"north\"))\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<\/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(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\"Sea Shell\", new TextStyle(\"helvetica\", 80).fontWeight(\"bold\"))\n .textColor(\"#8b0f02\")\n .transformation(new Transformation().adjust(opacity(50)))\n ).position(\n new Position()\n .gravity(compass(\"north\"))\n .offsetY(20)\n )\n );","codeSnippet":"new CloudinaryImage(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\"Sea Shell\", new TextStyle(\"helvetica\", 80).fontWeight(\"bold\"))\n .textColor(\"#8b0f02\")\n .transformation(new Transformation().adjust(opacity(50)))\n ).position(\n new Position()\n .gravity(compass(\"north\"))\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-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(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\"Sea Shell\", new TextStyle(\"helvetica\", 80).fontWeight(\"bold\"))\n .textColor(\"#8b0f02\")\n .transformation(new Transformation().adjust(opacity(50)))\n ).position(\n new Position()\n .gravity(compass(\"north\"))\n .offsetY(20)\n )\n );","codeSnippet":"new CloudinaryImage(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\"Sea Shell\", new TextStyle(\"helvetica\", 80).fontWeight(\"bold\"))\n .textColor(\"#8b0f02\")\n .transformation(new Transformation().adjust(opacity(50)))\n ).position(\n new Position()\n .gravity(compass(\"north\"))\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('sea_shell.jpg', {transformation: [ {width: 400, quality: \"auto\", crop: \"scale\"}, {overlay: new cloudinary.TextLayer().fontFamily(\"helvetica\").fontSize(80).fontWeight(\"bold\").text(\"Sea%20Shell\"), gravity: \"north\", y: 20, color: \"#8b0f02\", opacity: 50} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('sea_shell.jpg', {transformation: [\n {width: 400, quality: \"auto\", crop: \"scale\"},\n {overlay: new cloudinary.TextLayer().fontFamily(\"helvetica\").fontSize(80).fontWeight(\"bold\").text(\"Sea%20Shell\"), gravity: \"north\", y: 20, color: \"#8b0f02\", opacity: 50}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"sea_shell.jpg\").image(transformation=[ {'width': 400, 'quality': \"auto\", 'crop': \"scale\"}, {'overlay': {'font_family': \"helvetica\", 'font_size': 80, 'font_weight': \"bold\", 'text': \"Sea%20Shell\"}, 'gravity': \"north\", 'y': 20, 'color': \"#8b0f02\", 'opacity': 50} ])","codeSnippet":"CloudinaryImage(\"sea_shell.jpg\").image(transformation=[\n {'width': 400, 'quality': \"auto\", 'crop': \"scale\"},\n {'overlay': {'font_family': \"helvetica\", 'font_size': 80, 'font_weight': \"bold\", 'text': \"Sea%20Shell\"}, 'gravity': \"north\", 'y': 20, 'color': \"#8b0f02\", 'opacity': 50}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('sea_shell.jpg'))\n\t->resize(Resize::scale()->width(400))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::auto()))\n\t->overlay(Overlay::source(\n\tSource::text(\"Sea Shell\",(new TextStyle(\"helvetica\",80))\n\t->fontWeight(\n\tFontWeight::bold())\n\t)\n\t->textColor(Color::rgb(\"8b0f02\"))\n\t->transformation((new Transformation())\n\t->adjust(Adjust::opacity(50)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n->offsetY(20))\n\t);","codeSnippet":"(new ImageTag('sea_shell.jpg'))\n\t->resize(Resize::scale()->width(400))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::auto()))\n\t->overlay(Overlay::source(\n\tSource::text(\"Sea Shell\",(new TextStyle(\"helvetica\",80))\n\t->fontWeight(\n\tFontWeight::bold())\n\t)\n\t->textColor(Color::rgb(\"8b0f02\"))\n\t->transformation((new Transformation())\n\t->adjust(Adjust::opacity(50)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\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(\"sea_shell.jpg\", array(\"transformation\"=>array( array(\"width\"=>400, \"quality\"=>\"auto\", \"crop\"=>\"scale\"), array(\"overlay\"=>array(\"font_family\"=>\"helvetica\", \"font_size\"=>80, \"font_weight\"=>\"bold\", \"text\"=>\"Sea%20Shell\"), \"gravity\"=>\"north\", \"y\"=>20, \"color\"=>\"#8b0f02\", \"opacity\"=>50) )))","codeSnippet":"cl_image_tag(\"sea_shell.jpg\", array(\"transformation\"=>array(\n array(\"width\"=>400, \"quality\"=>\"auto\", \"crop\"=>\"scale\"),\n array(\"overlay\"=>array(\"font_family\"=>\"helvetica\", \"font_size\"=>80, \"font_weight\"=>\"bold\", \"text\"=>\"Sea%20Shell\"), \"gravity\"=>\"north\", \"y\"=>20, \"color\"=>\"#8b0f02\", \"opacity\"=>50)\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).quality(\"auto\").crop(\"scale\").chain() .overlay(new TextLayer().fontFamily(\"helvetica\").fontSize(80).fontWeight(\"bold\").text(\"Sea%20Shell\")).gravity(\"north\").y(20).color(\"#8b0f02\").opacity(50)).imageTag(\"sea_shell.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .width(400).quality(\"auto\").crop(\"scale\").chain()\n .overlay(new TextLayer().fontFamily(\"helvetica\").fontSize(80).fontWeight(\"bold\").text(\"Sea%20Shell\")).gravity(\"north\").y(20).color(\"#8b0f02\").opacity(50)).imageTag(\"sea_shell.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"sea_shell.jpg\", :transformation=>[ {:width=>400, :quality=>\"auto\", :crop=>\"scale\"}, {:overlay=>{:font_family=>\"helvetica\", :font_size=>80, :font_weight=>\"bold\", :text=>\"Sea%20Shell\"}, :gravity=>\"north\", :y=>20, :color=>\"#8b0f02\", :opacity=>50} ])","codeSnippet":"cl_image_tag(\"sea_shell.jpg\", :transformation=>[\n {:width=>400, :quality=>\"auto\", :crop=>\"scale\"},\n {:overlay=>{:font_family=>\"helvetica\", :font_size=>80, :font_weight=>\"bold\", :text=>\"Sea%20Shell\"}, :gravity=>\"north\", :y=>20, :color=>\"#8b0f02\", :opacity=>50}\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).Quality(\"auto\").Crop(\"scale\").Chain() .Overlay(new TextLayer().FontFamily(\"helvetica\").FontSize(80).FontWeight(\"bold\").Text(\"Sea%20Shell\")).Gravity(\"north\").Y(20).Color(\"#8b0f02\").Opacity(50)).BuildImageTag(\"sea_shell.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .Width(400).Quality(\"auto\").Crop(\"scale\").Chain()\n .Overlay(new TextLayer().FontFamily(\"helvetica\").FontSize(80).FontWeight(\"bold\").Text(\"Sea%20Shell\")).Gravity(\"north\").Y(20).Color(\"#8b0f02\").Opacity(50)).BuildImageTag(\"sea_shell.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('sea_shell.jpg').transformation(Transformation()\n\t.addTransformation(\"w_400,f_auto,q_auto\/l_text:helvetica_80_bold:Sea Shell,g_north,y_20,co_rgb:8b0f02,o_50\"));","codeSnippet":"cloudinary.image('sea_shell.jpg').transformation(Transformation()\n\t.addTransformation(\"w_400,f_auto,q_auto\/l_text:helvetica_80_bold:Sea Shell,g_north,y_20,co_rgb:8b0f02,o_50\"));","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).setQuality(\"auto\").setCrop(\"scale\").chain() .setOverlay(\"text:helvetica_80_bold:Sea%20Shell\").setGravity(\"north\").setY(20).setColor(\"#8b0f02\").setOpacity(50)).generate(\"sea_shell.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setWidth(400).setQuality(\"auto\").setCrop(\"scale\").chain()\n .setOverlay(\"text:helvetica_80_bold:Sea%20Shell\").setGravity(\"north\").setY(20).setColor(\"#8b0f02\").setOpacity(50)).generate(\"sea_shell.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).quality(\"auto\").crop(\"scale\").chain() .overlay(new TextLayer().fontFamily(\"helvetica\").fontSize(80).fontWeight(\"bold\").text(\"Sea%20Shell\")).gravity(\"north\").y(20).color(\"#8b0f02\").opacity(50)).generate(\"sea_shell.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .width(400).quality(\"auto\").crop(\"scale\").chain()\n .overlay(new TextLayer().fontFamily(\"helvetica\").fontSize(80).fontWeight(\"bold\").text(\"Sea%20Shell\")).gravity(\"north\").y(20).color(\"#8b0f02\").opacity(50)).generate(\"sea_shell.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('sea_shell.jpg').transformation(Transformation()\n\t.addTransformation(\"w_400,f_auto,q_auto\/l_text:helvetica_80_bold:Sea Shell,g_north,y_20,co_rgb:8b0f02,o_50\"));","codeSnippet":"cloudinary.image('sea_shell.jpg').transformation(Transformation()\n\t.addTransformation(\"w_400,f_auto,q_auto\/l_text:helvetica_80_bold:Sea Shell,g_north,y_20,co_rgb:8b0f02,o_50\"));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"sea_shell.jpg\")\n\t resize(Resize.scale() { width(400) })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.auto()))\n\t overlay(Overlay.source(\n\tSource.text(\"Sea Shell\",TextStyle(\"helvetica\",80) {\n\t fontWeight(\n\tFontWeight.bold())\n\t }) {\n\t textColor(Color.rgb(\"8b0f02\"))\n\t transformation(Transformation {\n\t adjust(Adjust.opacity(50)) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\n offsetY(20) })\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"sea_shell.jpg\")\n\t resize(Resize.scale() { width(400) })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.auto()))\n\t overlay(Overlay.source(\n\tSource.text(\"Sea Shell\",TextStyle(\"helvetica\",80) {\n\t fontWeight(\n\tFontWeight.bold())\n\t }) {\n\t textColor(Color.rgb(\"8b0f02\"))\n\t transformation(Transformation {\n\t adjust(Adjust.opacity(50)) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\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(\"sea_shell.jpg\", {transformation: [ {width: 400, quality: \"auto\", crop: \"scale\"}, {overlay: new cloudinary.TextLayer().fontFamily(\"helvetica\").fontSize(80).fontWeight(\"bold\").text(\"Sea%20Shell\"), gravity: \"north\", y: 20, color: \"#8b0f02\", opacity: 50} ]})","codeSnippet":"$.cloudinary.image(\"sea_shell.jpg\", {transformation: [\n {width: 400, quality: \"auto\", crop: \"scale\"},\n {overlay: new cloudinary.TextLayer().fontFamily(\"helvetica\").fontSize(80).fontWeight(\"bold\").text(\"Sea%20Shell\"), gravity: \"north\", y: 20, color: \"#8b0f02\", opacity: 50}\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(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\"Sea Shell\", new TextStyle(\"helvetica\", 80).fontWeight(\"bold\"))\n .textColor(\"#8b0f02\")\n .transformation(new Transformation().adjust(opacity(50)))\n ).position(\n new Position()\n .gravity(compass(\"north\"))\n .offsetY(20)\n )\n );","codeSnippet":"new CloudinaryImage(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n text(\"Sea Shell\", new TextStyle(\"helvetica\", 80).fontWeight(\"bold\"))\n .textColor(\"#8b0f02\")\n .transformation(new Transformation().adjust(opacity(50)))\n ).position(\n new Position()\n .gravity(compass(\"north\"))\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.agrosoland.com\/demo\/image\/upload\/w_400,f_auto,q_auto\/l_text:helvetica_80_bold:Sea%20Shell,g_north,y_20,co_rgb:8b0f02,o_50\/sea_shell.jpg","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"width":"400","format":"auto","quality":"auto"},{"overlay":"text:helvetica_80_bold:Sea Shell","gravity":"north","y":"20","color":"rgb:8b0f02","opacity":"50"}],"transformation_string":"w_400,f_auto,q_auto\/l_text:helvetica_80_bold:Sea Shell,g_north,y_20,co_rgb:8b0f02,o_50","url_suffix":"","version":"","secure":true,"public_id":"sea_shell.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

文本叠加常用用是添加注解描述和分数上例加法评分摄影师下例中白字缩写 Doppio字体半透明黑叠加令字幕显赫

<\/Image>","codeSnippet":" \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(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n image(\"black_bar\").transformation(\n new Transformation()\n .resize(scale().width(\"1.0\").height(0.12).relative())\n .adjust(opacity(60))\n )\n ).position(new Position().gravity(compass(\"south\")))\n )\n .overlay(\n source(\n text(\"Photographer\", new TextStyle(\"Doppio One\", 20)).textColor(\"#eee\")\n ).position(\n new Position()\n .gravity(compass(\"south_west\"))\n .offsetX(10)\n .offsetY(5)\n )\n );","codeSnippet":"new CloudinaryImage(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n image(\"black_bar\").transformation(\n new Transformation()\n .resize(scale().width(\"1.0\").height(0.12).relative())\n .adjust(opacity(60))\n )\n ).position(new Position().gravity(compass(\"south\")))\n )\n .overlay(\n source(\n text(\"Photographer\", new TextStyle(\"Doppio One\", 20)).textColor(\"#eee\")\n ).position(\n new Position()\n .gravity(compass(\"south_west\"))\n .offsetX(10)\n .offsetY(5)\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<\/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(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n image(\"black_bar\").transformation(\n new Transformation()\n .resize(scale().width(\"1.0\").height(0.12).relative())\n .adjust(opacity(60))\n )\n ).position(new Position().gravity(compass(\"south\")))\n )\n .overlay(\n source(\n text(\"Photographer\", new TextStyle(\"Doppio One\", 20)).textColor(\"#eee\")\n ).position(\n new Position()\n .gravity(compass(\"south_west\"))\n .offsetX(10)\n .offsetY(5)\n )\n );","codeSnippet":"new CloudinaryImage(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n image(\"black_bar\").transformation(\n new Transformation()\n .resize(scale().width(\"1.0\").height(0.12).relative())\n .adjust(opacity(60))\n )\n ).position(new Position().gravity(compass(\"south\")))\n )\n .overlay(\n source(\n text(\"Photographer\", new TextStyle(\"Doppio One\", 20)).textColor(\"#eee\")\n ).position(\n new Position()\n .gravity(compass(\"south_west\"))\n .offsetX(10)\n .offsetY(5)\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-image>","codeSnippet":" \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(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n image(\"black_bar\").transformation(\n new Transformation()\n .resize(scale().width(\"1.0\").height(0.12).relative())\n .adjust(opacity(60))\n )\n ).position(new Position().gravity(compass(\"south\")))\n )\n .overlay(\n source(\n text(\"Photographer\", new TextStyle(\"Doppio One\", 20)).textColor(\"#eee\")\n ).position(\n new Position()\n .gravity(compass(\"south_west\"))\n .offsetX(10)\n .offsetY(5)\n )\n );","codeSnippet":"new CloudinaryImage(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n image(\"black_bar\").transformation(\n new Transformation()\n .resize(scale().width(\"1.0\").height(0.12).relative())\n .adjust(opacity(60))\n )\n ).position(new Position().gravity(compass(\"south\")))\n )\n .overlay(\n source(\n text(\"Photographer\", new TextStyle(\"Doppio One\", 20)).textColor(\"#eee\")\n ).position(\n new Position()\n .gravity(compass(\"south_west\"))\n .offsetX(10)\n .offsetY(5)\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('sea_shell.jpg', {transformation: [ {width: 400, quality: \"auto\", crop: \"scale\"}, {overlay: new cloudinary.Layer().publicId(\"black_bar\"), gravity: \"south\", width: \"1.0\", height: \"0.12\", flags: \"relative\", opacity: 60}, {overlay: new cloudinary.TextLayer().fontFamily(\"One\").fontSize(20).text(\"Photographer\"), gravity: \"south_west\", y: 5, x: 10, color: \"#eee\"} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('sea_shell.jpg', {transformation: [\n {width: 400, quality: \"auto\", crop: \"scale\"},\n {overlay: new cloudinary.Layer().publicId(\"black_bar\"), gravity: \"south\", width: \"1.0\", height: \"0.12\", flags: \"relative\", opacity: 60},\n {overlay: new cloudinary.TextLayer().fontFamily(\"One\").fontSize(20).text(\"Photographer\"), gravity: \"south_west\", y: 5, x: 10, color: \"#eee\"}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"sea_shell.jpg\").image(transformation=[ {'width': 400, 'quality': \"auto\", 'crop': \"scale\"}, {'overlay': \"black_bar\", 'gravity': \"south\", 'width': \"1.0\", 'height': \"0.12\", 'flags': \"relative\", 'opacity': 60}, {'overlay': {'font_family': \"One\", 'font_size': 20, 'text': \"Photographer\"}, 'gravity': \"south_west\", 'y': 5, 'x': 10, 'color': \"#eee\"} ])","codeSnippet":"CloudinaryImage(\"sea_shell.jpg\").image(transformation=[\n {'width': 400, 'quality': \"auto\", 'crop': \"scale\"},\n {'overlay': \"black_bar\", 'gravity': \"south\", 'width': \"1.0\", 'height': \"0.12\", 'flags': \"relative\", 'opacity': 60},\n {'overlay': {'font_family': \"One\", 'font_size': 20, 'text': \"Photographer\"}, 'gravity': \"south_west\", 'y': 5, 'x': 10, 'color': \"#eee\"}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('sea_shell.jpg'))\n\t->resize(Resize::scale()->width(400))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::auto()))\n\t->overlay(Overlay::source(\n\tSource::image(\"black_bar\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(1.0)\n->height(0.12)\n\t->relative()\n\t)\n\t->adjust(Adjust::opacity(60)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::south()))\n\t)\n\t)\n\t->overlay(Overlay::source(\n\tSource::text(\"Photographer\",(new TextStyle(\"Doppio One\",20)))\n\t->textColor(Color::rgb(\"eee\"))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::southWest()))\n->offsetX(10)\n->offsetY(5))\n\t);","codeSnippet":"(new ImageTag('sea_shell.jpg'))\n\t->resize(Resize::scale()->width(400))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::auto()))\n\t->overlay(Overlay::source(\n\tSource::image(\"black_bar\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(1.0)\n->height(0.12)\n\t->relative()\n\t)\n\t->adjust(Adjust::opacity(60)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::south()))\n\t)\n\t)\n\t->overlay(Overlay::source(\n\tSource::text(\"Photographer\",(new TextStyle(\"Doppio One\",20)))\n\t->textColor(Color::rgb(\"eee\"))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::southWest()))\n->offsetX(10)\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(\"sea_shell.jpg\", array(\"transformation\"=>array( array(\"width\"=>400, \"quality\"=>\"auto\", \"crop\"=>\"scale\"), array(\"overlay\"=>\"black_bar\", \"gravity\"=>\"south\", \"width\"=>\"1.0\", \"height\"=>\"0.12\", \"flags\"=>\"relative\", \"opacity\"=>60), array(\"overlay\"=>array(\"font_family\"=>\"One\", \"font_size\"=>20, \"text\"=>\"Photographer\"), \"gravity\"=>\"south_west\", \"y\"=>5, \"x\"=>10, \"color\"=>\"#eee\") )))","codeSnippet":"cl_image_tag(\"sea_shell.jpg\", array(\"transformation\"=>array(\n array(\"width\"=>400, \"quality\"=>\"auto\", \"crop\"=>\"scale\"),\n array(\"overlay\"=>\"black_bar\", \"gravity\"=>\"south\", \"width\"=>\"1.0\", \"height\"=>\"0.12\", \"flags\"=>\"relative\", \"opacity\"=>60),\n array(\"overlay\"=>array(\"font_family\"=>\"One\", \"font_size\"=>20, \"text\"=>\"Photographer\"), \"gravity\"=>\"south_west\", \"y\"=>5, \"x\"=>10, \"color\"=>\"#eee\")\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).quality(\"auto\").crop(\"scale\").chain() .overlay(new Layer().publicId(\"black_bar\")).gravity(\"south\").width(1.0).height(0.12).flags(\"relative\").opacity(60).chain() .overlay(new TextLayer().fontFamily(\"One\").fontSize(20).text(\"Photographer\")).gravity(\"south_west\").y(5).x(10).color(\"#eee\")).imageTag(\"sea_shell.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .width(400).quality(\"auto\").crop(\"scale\").chain()\n .overlay(new Layer().publicId(\"black_bar\")).gravity(\"south\").width(1.0).height(0.12).flags(\"relative\").opacity(60).chain()\n .overlay(new TextLayer().fontFamily(\"One\").fontSize(20).text(\"Photographer\")).gravity(\"south_west\").y(5).x(10).color(\"#eee\")).imageTag(\"sea_shell.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"sea_shell.jpg\", :transformation=>[ {:width=>400, :quality=>\"auto\", :crop=>\"scale\"}, {:overlay=>\"black_bar\", :gravity=>\"south\", :width=>1.0, :height=>0.12, :flags=>\"relative\", :opacity=>60}, {:overlay=>{:font_family=>\"One\", :font_size=>20, :text=>\"Photographer\"}, :gravity=>\"south_west\", :y=>5, :x=>10, :color=>\"#eee\"} ])","codeSnippet":"cl_image_tag(\"sea_shell.jpg\", :transformation=>[\n {:width=>400, :quality=>\"auto\", :crop=>\"scale\"},\n {:overlay=>\"black_bar\", :gravity=>\"south\", :width=>1.0, :height=>0.12, :flags=>\"relative\", :opacity=>60},\n {:overlay=>{:font_family=>\"One\", :font_size=>20, :text=>\"Photographer\"}, :gravity=>\"south_west\", :y=>5, :x=>10, :color=>\"#eee\"}\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).Quality(\"auto\").Crop(\"scale\").Chain() .Overlay(new Layer().PublicId(\"black_bar\")).Gravity(\"south\").Width(1.0).Height(0.12).Flags(\"relative\").Opacity(60).Chain() .Overlay(new TextLayer().FontFamily(\"One\").FontSize(20).Text(\"Photographer\")).Gravity(\"south_west\").Y(5).X(10).Color(\"#eee\")).BuildImageTag(\"sea_shell.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .Width(400).Quality(\"auto\").Crop(\"scale\").Chain()\n .Overlay(new Layer().PublicId(\"black_bar\")).Gravity(\"south\").Width(1.0).Height(0.12).Flags(\"relative\").Opacity(60).Chain()\n .Overlay(new TextLayer().FontFamily(\"One\").FontSize(20).Text(\"Photographer\")).Gravity(\"south_west\").Y(5).X(10).Color(\"#eee\")).BuildImageTag(\"sea_shell.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('sea_shell.jpg').transformation(Transformation()\n\t.addTransformation(\"w_400,f_auto,q_auto\/l_black_bar,g_south,w_1.0,h_0.12,fl_relative,o_60\/l_text:Doppio One_20:Photographer: Jonathan Doe,g_south_west,y_5,x_10,co_rgb:eee\"));","codeSnippet":"cloudinary.image('sea_shell.jpg').transformation(Transformation()\n\t.addTransformation(\"w_400,f_auto,q_auto\/l_black_bar,g_south,w_1.0,h_0.12,fl_relative,o_60\/l_text:Doppio One_20:Photographer: Jonathan Doe,g_south_west,y_5,x_10,co_rgb:eee\"));","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).setQuality(\"auto\").setCrop(\"scale\").chain() .setOverlay(\"black_bar\").setGravity(\"south\").setWidth(1.0).setHeight(0.12).setFlags(\"relative\").setOpacity(60).chain() .setOverlay(\"text:Doppio%20One_20:Photographer:%20Jonathan%20Doe\").setGravity(\"south_west\").setY(5).setX(10).setColor(\"#eee\")).generate(\"sea_shell.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setWidth(400).setQuality(\"auto\").setCrop(\"scale\").chain()\n .setOverlay(\"black_bar\").setGravity(\"south\").setWidth(1.0).setHeight(0.12).setFlags(\"relative\").setOpacity(60).chain()\n .setOverlay(\"text:Doppio%20One_20:Photographer:%20Jonathan%20Doe\").setGravity(\"south_west\").setY(5).setX(10).setColor(\"#eee\")).generate(\"sea_shell.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).quality(\"auto\").crop(\"scale\").chain() .overlay(new Layer().publicId(\"black_bar\")).gravity(\"south\").width(1.0).height(0.12).flags(\"relative\").opacity(60).chain() .overlay(new TextLayer().fontFamily(\"One\").fontSize(20).text(\"Photographer\")).gravity(\"south_west\").y(5).x(10).color(\"#eee\")).generate(\"sea_shell.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .width(400).quality(\"auto\").crop(\"scale\").chain()\n .overlay(new Layer().publicId(\"black_bar\")).gravity(\"south\").width(1.0).height(0.12).flags(\"relative\").opacity(60).chain()\n .overlay(new TextLayer().fontFamily(\"One\").fontSize(20).text(\"Photographer\")).gravity(\"south_west\").y(5).x(10).color(\"#eee\")).generate(\"sea_shell.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('sea_shell.jpg').transformation(Transformation()\n\t.addTransformation(\"w_400,f_auto,q_auto\/l_black_bar,g_south,w_1.0,h_0.12,fl_relative,o_60\/l_text:Doppio One_20:Photographer: Jonathan Doe,g_south_west,y_5,x_10,co_rgb:eee\"));","codeSnippet":"cloudinary.image('sea_shell.jpg').transformation(Transformation()\n\t.addTransformation(\"w_400,f_auto,q_auto\/l_black_bar,g_south,w_1.0,h_0.12,fl_relative,o_60\/l_text:Doppio One_20:Photographer: Jonathan Doe,g_south_west,y_5,x_10,co_rgb:eee\"));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"sea_shell.jpg\")\n\t resize(Resize.scale() { width(400) })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.auto()))\n\t overlay(Overlay.source(\n\tSource.image(\"black_bar\") {\n\t transformation(Transformation {\n\t resize(Resize.scale() { width(1.0F)\n height(0.12F)\n\t relative()\n\t })\n\t adjust(Adjust.opacity(60)) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t })\n\t })\n\t overlay(Overlay.source(\n\tSource.text(\"Photographer\",TextStyle(\"Doppio One\",20)) {\n\t textColor(Color.rgb(\"eee\"))\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.southWest()))\n offsetX(10)\n offsetY(5) })\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"sea_shell.jpg\")\n\t resize(Resize.scale() { width(400) })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.auto()))\n\t overlay(Overlay.source(\n\tSource.image(\"black_bar\") {\n\t transformation(Transformation {\n\t resize(Resize.scale() { width(1.0F)\n height(0.12F)\n\t relative()\n\t })\n\t adjust(Adjust.opacity(60)) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.south()))\n\t })\n\t })\n\t overlay(Overlay.source(\n\tSource.text(\"Photographer\",TextStyle(\"Doppio One\",20)) {\n\t textColor(Color.rgb(\"eee\"))\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.southWest()))\n offsetX(10)\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(\"sea_shell.jpg\", {transformation: [ {width: 400, quality: \"auto\", crop: \"scale\"}, {overlay: new cloudinary.Layer().publicId(\"black_bar\"), gravity: \"south\", width: \"1.0\", height: \"0.12\", flags: \"relative\", opacity: 60}, {overlay: new cloudinary.TextLayer().fontFamily(\"One\").fontSize(20).text(\"Photographer\"), gravity: \"south_west\", y: 5, x: 10, color: \"#eee\"} ]})","codeSnippet":"$.cloudinary.image(\"sea_shell.jpg\", {transformation: [\n {width: 400, quality: \"auto\", crop: \"scale\"},\n {overlay: new cloudinary.Layer().publicId(\"black_bar\"), gravity: \"south\", width: \"1.0\", height: \"0.12\", flags: \"relative\", opacity: 60},\n {overlay: new cloudinary.TextLayer().fontFamily(\"One\").fontSize(20).text(\"Photographer\"), gravity: \"south_west\", y: 5, x: 10, color: \"#eee\"}\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(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n image(\"black_bar\").transformation(\n new Transformation()\n .resize(scale().width(\"1.0\").height(0.12).relative())\n .adjust(opacity(60))\n )\n ).position(new Position().gravity(compass(\"south\")))\n )\n .overlay(\n source(\n text(\"Photographer\", new TextStyle(\"Doppio One\", 20)).textColor(\"#eee\")\n ).position(\n new Position()\n .gravity(compass(\"south_west\"))\n .offsetX(10)\n .offsetY(5)\n )\n );","codeSnippet":"new CloudinaryImage(\"sea_shell.jpg\")\n .resize(scale().width(400))\n .delivery(format(auto()))\n .delivery(quality(auto()))\n .overlay(\n source(\n image(\"black_bar\").transformation(\n new Transformation()\n .resize(scale().width(\"1.0\").height(0.12).relative())\n .adjust(opacity(60))\n )\n ).position(new Position().gravity(compass(\"south\")))\n )\n .overlay(\n source(\n text(\"Photographer\", new TextStyle(\"Doppio One\", 20)).textColor(\"#eee\")\n ).position(\n new Position()\n .gravity(compass(\"south_west\"))\n .offsetX(10)\n .offsetY(5)\n )\n );","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.agrosoland.com\/demo\/image\/upload\/w_400,f_auto,q_auto\/l_black_bar,g_south,w_1.0,h_0.12,fl_relative,o_60\/l_text:Doppio%20One_20:Photographer:%20Jonathan%20Doe,g_south_west,y_5,x_10,co_rgb:eee\/sea_shell.jpg","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"width":"400","format":"auto","quality":"auto"},{"overlay":"black_bar","gravity":"south","width":"1.0","height":"0.12","flags":"relative","opacity":"60"},{"overlay":"text:Doppio One_20:Photographer: Jonathan Doe","gravity":"south_west","y":"5","x":"10","color":"rgb:eee"}],"transformation_string":"w_400,f_auto,q_auto\/l_black_bar,g_south,w_1.0,h_0.12,fl_relative,o_60\/l_text:Doppio One_20:Photographer: Jonathan Doe,g_south_west,y_5,x_10,co_rgb:eee","url_suffix":"","version":"","secure":true,"public_id":"sea_shell.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

多线文本说明并包

多行文本嵌入图像时,您想看到自动线封并按自己的意愿对文本进行对齐

下示例显示7行文本自动包绑和居中对齐并覆盖上传图像“envelope.jpg”。参数设置

上头适配裁剪模式定义最大宽度二百像素中通知云形自动包封文本
上头角形参数(a/URL内文本层九度旋转,以更好地适应后台图像
上头I_text带属性参数Neucha_16_center表示Neucha字体16像素大小和中心对齐

<\/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(\"envelope.jpg\").addTransformation(\n \"w_300,f_auto,q_auto\/g_north,x_0,y_54,w_200,c_fit,a_9,l_text:Neucha_16_center:Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Utenim微小VENIAMUTLAUTULYYYYYOYOFTLASUTLELUTULLELELEMIPSULEDERAFETERADISIGEDEDEREEUSEUSIGEDERDIORINGLAQUAUt enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\"\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(\"envelope.jpg\").addTransformation(\n \"w_300,f_auto,q_auto\/g_north,x_0,y_54,w_200,c_fit,a_9,l_text:Neucha_16_center:Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Utenim微小VENIAMUTLAUTULYYYYYOYOFTLASUTLELUTULLELELEMIPSULEDERAFETERADISIGEDEDEREEUSEUSIGEDERDIORINGLAQUAUt enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\"\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(\"envelope.jpg\").addTransformation(\n \"w_300,f_auto,q_auto\/g_north,x_0,y_54,w_200,c_fit,a_9,l_text:Neucha_16_center:Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Utenim微小VENIAMUTLAUTULYYYYYOYOFTLASUTLELUTULLELELEMIPSULEDERAFETERADISIGEDEDEREEUSEUSIGEDERDIORINGLAQUAUt enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\"\n);","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('envelope.jpg', {transformation: [ {width: 300, quality: \"auto\", crop: \"scale\"}, {gravity: \"north\", x: 0, y: 54, width: 200, angle: 9, overlay: new cloudinary.TextLayer().fontFamily(\"Neucha\").fontSize(16).textAlign(\"center\").text(\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\"), crop: \"fit\"} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('envelope.jpg', {transformation: [\n {width: 300, quality: \"auto\", crop: \"scale\"},\n {gravity: \"north\", x: 0, y: 54, width: 200, angle: 9, overlay: new cloudinary.TextLayer().fontFamily(\"Neucha\").fontSize(16).textAlign(\"center\").text(\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\"), crop: \"fit\"}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"envelope.jpg\").image(transformation=[ {'width': 300, 'quality': \"auto\", 'crop': \"scale\"}, {'gravity': \"north\", 'x': 0, 'y': 54, 'width': 200, 'angle': 9, 'overlay': {'font_family': \"Neucha\", 'font_size': 16, 'text_align': \"center\", 'text': \"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\"}, 'crop': \"fit\"} ])","codeSnippet":"CloudinaryImage(\"envelope.jpg\").image(transformation=[\n {'width': 300, 'quality': \"auto\", 'crop': \"scale\"},\n {'gravity': \"north\", 'x': 0, 'y': 54, 'width': 200, 'angle': 9, 'overlay': {'font_family': \"Neucha\", 'font_size': 16, 'text_align': \"center\", 'text': \"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\"}, 'crop': \"fit\"}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('envelope.jpg'))\n\t->resize(Resize::scale()->width(300))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::auto()))\n\t->overlay(Overlay::source(\n\tSource::text(\"Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\",(new TextStyle(\"Neucha\",16))\n\t->textAlignment(\n\tTextAlignment::center())\n\t)\n\t->textFit(\n\tTextFit::size(200))\n\t->transformation((new Transformation())\n\t->rotate(Rotate::byAngle(9)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n->offsetX(0)\n->offsetY(54))\n\t);","codeSnippet":"(new ImageTag('envelope.jpg'))\n\t->resize(Resize::scale()->width(300))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::auto()))\n\t->overlay(Overlay::source(\n\tSource::text(\"Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\",(new TextStyle(\"Neucha\",16))\n\t->textAlignment(\n\tTextAlignment::center())\n\t)\n\t->textFit(\n\tTextFit::size(200))\n\t->transformation((new Transformation())\n\t->rotate(Rotate::byAngle(9)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n->offsetX(0)\n->offsetY(54))\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(\"envelope.jpg\", array(\"transformation\"=>array( array(\"width\"=>300, \"quality\"=>\"auto\", \"crop\"=>\"scale\"), array(\"gravity\"=>\"north\", \"x\"=>0, \"y\"=>54, \"width\"=>200, \"angle\"=>9, \"overlay\"=>array(\"font_family\"=>\"Neucha\", \"font_size\"=>16, \"text_align\"=>\"center\", \"text\"=>\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\"), \"crop\"=>\"fit\") )))","codeSnippet":"cl_image_tag(\"envelope.jpg\", array(\"transformation\"=>array(\n array(\"width\"=>300, \"quality\"=>\"auto\", \"crop\"=>\"scale\"),\n array(\"gravity\"=>\"north\", \"x\"=>0, \"y\"=>54, \"width\"=>200, \"angle\"=>9, \"overlay\"=>array(\"font_family\"=>\"Neucha\", \"font_size\"=>16, \"text_align\"=>\"center\", \"text\"=>\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\"), \"crop\"=>\"fit\")\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(300).quality(\"auto\").crop(\"scale\").chain() .gravity(\"north\").x(0).y(54).width(200).angle(9).overlay(new TextLayer().fontFamily(\"Neucha\").fontSize(16).textAlign(\"center\").text(\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\")).crop(\"fit\")).imageTag(\"envelope.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .width(300).quality(\"auto\").crop(\"scale\").chain()\n .gravity(\"north\").x(0).y(54).width(200).angle(9).overlay(new TextLayer().fontFamily(\"Neucha\").fontSize(16).textAlign(\"center\").text(\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\")).crop(\"fit\")).imageTag(\"envelope.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"envelope.jpg\", :transformation=>[ {:width=>300, :quality=>\"auto\", :crop=>\"scale\"}, {:gravity=>\"north\", :x=>0, :y=>54, :width=>200, :angle=>9, :overlay=>{:font_family=>\"Neucha\", :font_size=>16, :text_align=>\"center\", :text=>\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\"}, :crop=>\"fit\"} ])","codeSnippet":"cl_image_tag(\"envelope.jpg\", :transformation=>[\n {:width=>300, :quality=>\"auto\", :crop=>\"scale\"},\n {:gravity=>\"north\", :x=>0, :y=>54, :width=>200, :angle=>9, :overlay=>{:font_family=>\"Neucha\", :font_size=>16, :text_align=>\"center\", :text=>\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\"}, :crop=>\"fit\"}\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(300).Quality(\"auto\").Crop(\"scale\").Chain() .Gravity(\"north\").X(0).Y(54).Width(200).Angle(9).Overlay(new TextLayer().FontFamily(\"Neucha\").FontSize(16).TextAlign(\"center\").Text(\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\")).Crop(\"fit\")).BuildImageTag(\"envelope.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .Width(300).Quality(\"auto\").Crop(\"scale\").Chain()\n .Gravity(\"north\").X(0).Y(54).Width(200).Angle(9).Overlay(new TextLayer().FontFamily(\"Neucha\").FontSize(16).TextAlign(\"center\").Text(\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\")).Crop(\"fit\")).BuildImageTag(\"envelope.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('envelope.jpg').transformation(Transformation()\n\t.addTransformation(\"w_300,f_auto,q_auto\/g_north,x_0,y_54,w_200,c_fit,a_9,l_text:Neucha_16_center:Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Utenim微信编译ULA Snippe ex a commondocut.Center:LoremipsUt enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\"));","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(300).setQuality(\"auto\").setCrop(\"scale\").chain() .setGravity(\"north\").setX(0).setY(54).setWidth(200).setAngle(9).setOverlay(\"text:Neucha_16_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\").setCrop(\"fit\")).generate(\"envelope.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setWidth(300).setQuality(\"auto\").setCrop(\"scale\").chain()\n .setGravity(\"north\").setX(0).setY(54).setWidth(200).setAngle(9).setOverlay(\"text:Neucha_16_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\").setCrop(\"fit\")).generate(\"envelope.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(300).quality(\"auto\").crop(\"scale\").chain() .gravity(\"north\").x(0).y(54).width(200).angle(9).overlay(new TextLayer().fontFamily(\"Neucha\").fontSize(16).textAlign(\"center\").text(\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\")).crop(\"fit\")).generate(\"envelope.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .width(300).quality(\"auto\").crop(\"scale\").chain()\n .gravity(\"north\").x(0).y(54).width(200).angle(9).overlay(new TextLayer().fontFamily(\"Neucha\").fontSize(16).textAlign(\"center\").text(\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\")).crop(\"fit\")).generate(\"envelope.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('envelope.jpg').transformation(Transformation()\n\t.addTransformation(\"w_300,f_auto,q_auto\/g_north,x_0,y_54,w_200,c_fit,a_9,l_text:Neucha_16_center:Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Utenim微信编译ULA Snippe ex a commondocut.Center:LoremipsUt enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\"));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"envelope.jpg\")\n\t resize(Resize.scale() { width(300) })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.auto()))\n\t overlay(Overlay.source(\n\tSource.text(\"Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\",TextStyle(\"Neucha\",16) {\n\t textAlignment(\n\tTextAlignment.center())\n\t }) {\n\t textFit(\n\tTextFit.size(200))\n\t transformation(Transformation {\n\t rotate(Rotate.byAngle(9)) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\n offsetX(0)\n offsetY(54) })\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"envelope.jpg\")\n\t resize(Resize.scale() { width(300) })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.auto()))\n\t overlay(Overlay.source(\n\tSource.text(\"Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\",TextStyle(\"Neucha\",16) {\n\t textAlignment(\n\tTextAlignment.center())\n\t }) {\n\t textFit(\n\tTextFit.size(200))\n\t transformation(Transformation {\n\t rotate(Rotate.byAngle(9)) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\n offsetX(0)\n offsetY(54) })\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(\"envelope.jpg\", {transformation: [ {width: 300, quality: \"auto\", crop: \"scale\"}, {gravity: \"north\", x: 0, y: 54, width: 200, angle: 9, overlay: new cloudinary.TextLayer().fontFamily(\"Neucha\").fontSize(16).textAlign(\"center\").text(\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\"), crop: \"fit\"} ]})","codeSnippet":"$.cloudinary.image(\"envelope.jpg\", {transformation: [\n {width: 300, quality: \"auto\", crop: \"scale\"},\n {gravity: \"north\", x: 0, y: 54, width: 200, angle: 9, overlay: new cloudinary.TextLayer().fontFamily(\"Neucha\").fontSize(16).textAlign(\"center\").text(\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\"), crop: \"fit\"}\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(\"envelope.jpg\").addTransformation(\n \"w_300,f_auto,q_auto\/g_north,x_0,y_54,w_200,c_fit,a_9,l_text:Neucha_16_center:Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Utenim微小VENIAMUTLAUTULYYYYYOYOFTLASUTLELUTULLELELEMIPSULEDERAFETERADISIGEDEDEREEUSEUSIGEDERDIORINGLAQUAUt enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\"\n);","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.agrosoland.com\/demo\/image\/upload\/w_300,f_auto,q_auto\/g_north,x_0,y_54,w_200,c_fit,a_9,l_text:Neucha_16_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\/envelope.jpg","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"width":"300","format":"auto","quality":"auto"},{"gravity":"north","x":"0","y":"54","width":"200","crop_mode":"fit","angle":"9","overlay":"text:Neucha_16_center:Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Utenimwiges编译ULAMLUTAQQQETUtenimminiam Veniamques编译sluscraplipsequate 加载代码示例

多文本图层打印素材

以上所有示例显示单文本覆盖也可以链化多叠加,在云端URL设置参数,生成优化图像,通过内容传递网络向观众传递

建立链式转换URL并多文本叠加使用云式客户库或用斜线符号分离URL组件/)

下方为信封.jpg图像重现,这次三文本叠加, 每种格式化都不同字体组、字体大小、颜色和定位看上去酷而专业

<\/Image>","codeSnippet":" \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(\"envelope.jpg\").addTransformation(\n \"w_300,f_auto,q_auto\/l_text:Courgette_22:Dear customer,a_9,o_80,g_north_west,y_25,x_64,co_rgb:671537\/l_text:Niconne_20:Sincerely yours,g_south,x_-10,y_120,co_rgb:15376f,a_9\/g_north,x_0,y_54,w_200,c_fit,a_9,l_text:Neucha_16:Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut inmarieImage新g_Genvelope.jpg\.Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\"\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<\/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(\"envelope.jpg\").addTransformation(\n \"w_300,f_auto,q_auto\/l_text:Courgette_22:Dear customer,a_9,o_80,g_north_west,y_25,x_64,co_rgb:671537\/l_text:Niconne_20:Sincerely yours,g_south,x_-10,y_120,co_rgb:15376f,a_9\/g_north,x_0,y_54,w_200,c_fit,a_9,l_text:Neucha_16:Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut inmarieImage新g_Genvelope.jpg\.Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\"\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-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<\/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(\"envelope.jpg\").addTransformation(\n \"w_300,f_auto,q_auto\/l_text:Courgette_22:Dear customer,a_9,o_80,g_north_west,y_25,x_64,co_rgb:671537\/l_text:Niconne_20:Sincerely yours,g_south,x_-10,y_120,co_rgb:15376f,a_9\/g_north,x_0,y_54,w_200,c_fit,a_9,l_text:Neucha_16:Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut inmarieImage新g_Genvelope.jpg\.Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\"\n);","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('envelope.jpg', {transformation: [ {width: 300, quality: \"auto\", crop: \"scale\"}, {overlay: new cloudinary.TextLayer().fontFamily(\"Courgette\").fontSize(22).text(\"Dear%20customer\"), angle: 9, opacity: 80, gravity: \"north_west\", y: 25, x: 64, color: \"#671537\"}, {overlay: new cloudinary.TextLayer().fontFamily(\"Niconne\").fontSize(20).text(\"Sincerely%20yours\"), gravity: \"south\", x: -10, y: 120, color: \"#15376f\", angle: 9}, {gravity: \"north\", x: 0, y: 54, width: 200, angle: 9, overlay: new cloudinary.TextLayer().fontFamily(\"Neucha\").fontSize(16).text(\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\"), crop: \"fit\"} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('envelope.jpg', {transformation: [\n {width: 300, quality: \"auto\", crop: \"scale\"},\n {overlay: new cloudinary.TextLayer().fontFamily(\"Courgette\").fontSize(22).text(\"Dear%20customer\"), angle: 9, opacity: 80, gravity: \"north_west\", y: 25, x: 64, color: \"#671537\"},\n {overlay: new cloudinary.TextLayer().fontFamily(\"Niconne\").fontSize(20).text(\"Sincerely%20yours\"), gravity: \"south\", x: -10, y: 120, color: \"#15376f\", angle: 9},\n {gravity: \"north\", x: 0, y: 54, width: 200, angle: 9, overlay: new cloudinary.TextLayer().fontFamily(\"Neucha\").fontSize(16).text(\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\"), crop: \"fit\"}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"envelope.jpg\").image(transformation=[ {'width': 300, 'quality': \"auto\", 'crop': \"scale\"}, {'overlay': {'font_family': \"Courgette\", 'font_size': 22, 'text': \"Dear%20customer\"}, 'angle': 9, 'opacity': 80, 'gravity': \"north_west\", 'y': 25, 'x': 64, 'color': \"#671537\"}, {'overlay': {'font_family': \"Niconne\", 'font_size': 20, 'text': \"Sincerely%20yours\"}, 'gravity': \"south\", 'x': -10, 'y': 120, 'color': \"#15376f\", 'angle': 9}, {'gravity': \"north\", 'x': 0, 'y': 54, 'width': 200, 'angle': 9, 'overlay': {'font_family': \"Neucha\", 'font_size': 16, 'text': \"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\"}, 'crop': \"fit\"} ])","codeSnippet":"CloudinaryImage(\"envelope.jpg\").image(transformation=[\n {'width': 300, 'quality': \"auto\", 'crop': \"scale\"},\n {'overlay': {'font_family': \"Courgette\", 'font_size': 22, 'text': \"Dear%20customer\"}, 'angle': 9, 'opacity': 80, 'gravity': \"north_west\", 'y': 25, 'x': 64, 'color': \"#671537\"},\n {'overlay': {'font_family': \"Niconne\", 'font_size': 20, 'text': \"Sincerely%20yours\"}, 'gravity': \"south\", 'x': -10, 'y': 120, 'color': \"#15376f\", 'angle': 9},\n {'gravity': \"north\", 'x': 0, 'y': 54, 'width': 200, 'angle': 9, 'overlay': {'font_family': \"Neucha\", 'font_size': 16, 'text': \"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\"}, 'crop': \"fit\"}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('envelope.jpg'))\n\t->resize(Resize::scale()->width(300))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::auto()))\n\t->overlay(Overlay::source(\n\tSource::text(\"Dear customer\",(new TextStyle(\"Courgette\",22)))\n\t->textColor(Color::rgb(\"671537\"))\n\t->transformation((new Transformation())\n\t->rotate(Rotate::byAngle(9))\n\t->adjust(Adjust::opacity(80)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::northWest()))\n->offsetX(64)\n->offsetY(25))\n\t)\n\t->overlay(Overlay::source(\n\tSource::text(\"Sincerely yours\",(new TextStyle(\"Niconne\",20)))\n\t->textColor(Color::rgb(\"15376f\"))\n\t->transformation((new Transformation())\n\t->rotate(Rotate::byAngle(9)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::south()))\n->offsetX(-10)\n->offsetY(120))\n\t)\n\t->overlay(Overlay::source(\n\tSource::text(\"Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\",(new TextStyle(\"Neucha\",16)))\n\t->textFit(\n\tTextFit::size(200))\n\t->transformation((new Transformation())\n\t->rotate(Rotate::byAngle(9)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n->offsetX(0)\n->offsetY(54))\n\t);","codeSnippet":"(new ImageTag('envelope.jpg'))\n\t->resize(Resize::scale()->width(300))\n\t->delivery(Delivery::format(\n\tFormat::auto()))\n\t->delivery(Delivery::quality(\n\tQuality::auto()))\n\t->overlay(Overlay::source(\n\tSource::text(\"Dear customer\",(new TextStyle(\"Courgette\",22)))\n\t->textColor(Color::rgb(\"671537\"))\n\t->transformation((new Transformation())\n\t->rotate(Rotate::byAngle(9))\n\t->adjust(Adjust::opacity(80)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::northWest()))\n->offsetX(64)\n->offsetY(25))\n\t)\n\t->overlay(Overlay::source(\n\tSource::text(\"Sincerely yours\",(new TextStyle(\"Niconne\",20)))\n\t->textColor(Color::rgb(\"15376f\"))\n\t->transformation((new Transformation())\n\t->rotate(Rotate::byAngle(9)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::south()))\n->offsetX(-10)\n->offsetY(120))\n\t)\n\t->overlay(Overlay::source(\n\tSource::text(\"Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\",(new TextStyle(\"Neucha\",16)))\n\t->textFit(\n\tTextFit::size(200))\n\t->transformation((new Transformation())\n\t->rotate(Rotate::byAngle(9)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n->offsetX(0)\n->offsetY(54))\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(\"envelope.jpg\", array(\"transformation\"=>array( array(\"width\"=>300, \"quality\"=>\"auto\", \"crop\"=>\"scale\"), array(\"overlay\"=>array(\"font_family\"=>\"Courgette\", \"font_size\"=>22, \"text\"=>\"Dear%20customer\"), \"angle\"=>9, \"opacity\"=>80, \"gravity\"=>\"north_west\", \"y\"=>25, \"x\"=>64, \"color\"=>\"#671537\"), array(\"overlay\"=>array(\"font_family\"=>\"Niconne\", \"font_size\"=>20, \"text\"=>\"Sincerely%20yours\"), \"gravity\"=>\"south\", \"x\"=>-10, \"y\"=>120, \"color\"=>\"#15376f\", \"angle\"=>9), array(\"gravity\"=>\"north\", \"x\"=>0, \"y\"=>54, \"width\"=>200, \"angle\"=>9, \"overlay\"=>array(\"font_family\"=>\"Neucha\", \"font_size\"=>16, \"text\"=>\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\"), \"crop\"=>\"fit\") )))","codeSnippet":"cl_image_tag(\"envelope.jpg\", array(\"transformation\"=>array(\n array(\"width\"=>300, \"quality\"=>\"auto\", \"crop\"=>\"scale\"),\n array(\"overlay\"=>array(\"font_family\"=>\"Courgette\", \"font_size\"=>22, \"text\"=>\"Dear%20customer\"), \"angle\"=>9, \"opacity\"=>80, \"gravity\"=>\"north_west\", \"y\"=>25, \"x\"=>64, \"color\"=>\"#671537\"),\n array(\"overlay\"=>array(\"font_family\"=>\"Niconne\", \"font_size\"=>20, \"text\"=>\"Sincerely%20yours\"), \"gravity\"=>\"south\", \"x\"=>-10, \"y\"=>120, \"color\"=>\"#15376f\", \"angle\"=>9),\n array(\"gravity\"=>\"north\", \"x\"=>0, \"y\"=>54, \"width\"=>200, \"angle\"=>9, \"overlay\"=>array(\"font_family\"=>\"Neucha\", \"font_size\"=>16, \"text\"=>\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\"), \"crop\"=>\"fit\")\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(300).quality(\"auto\").crop(\"scale\").chain() .overlay(new TextLayer().fontFamily(\"Courgette\").fontSize(22).text(\"Dear%20customer\")).angle(9).opacity(80).gravity(\"north_west\").y(25).x(64).color(\"#671537\").chain() .overlay(new TextLayer().fontFamily(\"Niconne\").fontSize(20).text(\"Sincerely%20yours\")).gravity(\"south\").x(-10).y(120).color(\"#15376f\").angle(9).chain() .gravity(\"north\").x(0).y(54).width(200).angle(9).overlay(new TextLayer().fontFamily(\"Neucha\").fontSize(16).text(\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\")).crop(\"fit\")).imageTag(\"envelope.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .width(300).quality(\"auto\").crop(\"scale\").chain()\n .overlay(new TextLayer().fontFamily(\"Courgette\").fontSize(22).text(\"Dear%20customer\")).angle(9).opacity(80).gravity(\"north_west\").y(25).x(64).color(\"#671537\").chain()\n .overlay(new TextLayer().fontFamily(\"Niconne\").fontSize(20).text(\"Sincerely%20yours\")).gravity(\"south\").x(-10).y(120).color(\"#15376f\").angle(9).chain()\n .gravity(\"north\").x(0).y(54).width(200).angle(9).overlay(new TextLayer().fontFamily(\"Neucha\").fontSize(16).text(\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\")).crop(\"fit\")).imageTag(\"envelope.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"envelope.jpg\", :transformation=>[ {:width=>300, :quality=>\"auto\", :crop=>\"scale\"}, {:overlay=>{:font_family=>\"Courgette\", :font_size=>22, :text=>\"Dear%20customer\"}, :angle=>9, :opacity=>80, :gravity=>\"north_west\", :y=>25, :x=>64, :color=>\"#671537\"}, {:overlay=>{:font_family=>\"Niconne\", :font_size=>20, :text=>\"Sincerely%20yours\"}, :gravity=>\"south\", :x=>-10, :y=>120, :color=>\"#15376f\", :angle=>9}, {:gravity=>\"north\", :x=>0, :y=>54, :width=>200, :angle=>9, :overlay=>{:font_family=>\"Neucha\", :font_size=>16, :text=>\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\"}, :crop=>\"fit\"} ])","codeSnippet":"cl_image_tag(\"envelope.jpg\", :transformation=>[\n {:width=>300, :quality=>\"auto\", :crop=>\"scale\"},\n {:overlay=>{:font_family=>\"Courgette\", :font_size=>22, :text=>\"Dear%20customer\"}, :angle=>9, :opacity=>80, :gravity=>\"north_west\", :y=>25, :x=>64, :color=>\"#671537\"},\n {:overlay=>{:font_family=>\"Niconne\", :font_size=>20, :text=>\"Sincerely%20yours\"}, :gravity=>\"south\", :x=>-10, :y=>120, :color=>\"#15376f\", :angle=>9},\n {:gravity=>\"north\", :x=>0, :y=>54, :width=>200, :angle=>9, :overlay=>{:font_family=>\"Neucha\", :font_size=>16, :text=>\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\"}, :crop=>\"fit\"}\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(300).Quality(\"auto\").Crop(\"scale\").Chain() .Overlay(new TextLayer().FontFamily(\"Courgette\").FontSize(22).Text(\"Dear%20customer\")).Angle(9).Opacity(80).Gravity(\"north_west\").Y(25).X(64).Color(\"#671537\").Chain() .Overlay(new TextLayer().FontFamily(\"Niconne\").FontSize(20).Text(\"Sincerely%20yours\")).Gravity(\"south\").X(-10).Y(120).Color(\"#15376f\").Angle(9).Chain() .Gravity(\"north\").X(0).Y(54).Width(200).Angle(9).Overlay(new TextLayer().FontFamily(\"Neucha\").FontSize(16).Text(\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\")).Crop(\"fit\")).BuildImageTag(\"envelope.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .Width(300).Quality(\"auto\").Crop(\"scale\").Chain()\n .Overlay(new TextLayer().FontFamily(\"Courgette\").FontSize(22).Text(\"Dear%20customer\")).Angle(9).Opacity(80).Gravity(\"north_west\").Y(25).X(64).Color(\"#671537\").Chain()\n .Overlay(new TextLayer().FontFamily(\"Niconne\").FontSize(20).Text(\"Sincerely%20yours\")).Gravity(\"south\").X(-10).Y(120).Color(\"#15376f\").Angle(9).Chain()\n .Gravity(\"north\").X(0).Y(54).Width(200).Angle(9).Overlay(new TextLayer().FontFamily(\"Neucha\").FontSize(16).Text(\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\")).Crop(\"fit\")).BuildImageTag(\"envelope.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('envelope.jpg').transformation(Transformation()\n\t.addTransformation(\"w_300,f_auto,q_auto\/l_text:Courgette_22:Dear customer,a_9,o_80,g_north_west,y_25,x_64,co_rgb:671537\/l_text:Niconne_20:Sincerely yours,g_south,x_-10,y_120,co_rgb:15376f,a_9\/g_north,x_0,y_54,w_200,c_fit,a_9,l_text:Neucha_16:Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\"));","codeSnippet":"cloudinary.image('envelope.jpg').transformation(Transformation()\n\t.addTransformation(\"w_300,f_auto,q_auto\/l_text:Courgette_22:Dear customer,a_9,o_80,g_north_west,y_25,x_64,co_rgb:671537\/l_text:Niconne_20:Sincerely yours,g_south,x_-10,y_120,co_rgb:15376f,a_9\/g_north,x_0,y_54,w_200,c_fit,a_9,l_text:Neucha_16:Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\"));","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(300).setQuality(\"auto\").setCrop(\"scale\").chain() .setOverlay(\"text:Courgette_22:Dear%20customer\").setAngle(9).setOpacity(80).setGravity(\"north_west\").setY(25).setX(64).setColor(\"#671537\").chain() .setOverlay(\"text:Niconne_20:Sincerely%20yours\").setGravity(\"south\").setX(-10).setY(120).setColor(\"#15376f\").setAngle(9).chain() .setGravity(\"north\").setX(0).setY(54).setWidth(200).setAngle(9).setOverlay(\"text:Neucha_16:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\").setCrop(\"fit\")).generate(\"envelope.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setWidth(300).setQuality(\"auto\").setCrop(\"scale\").chain()\n .setOverlay(\"text:Courgette_22:Dear%20customer\").setAngle(9).setOpacity(80).setGravity(\"north_west\").setY(25).setX(64).setColor(\"#671537\").chain()\n .setOverlay(\"text:Niconne_20:Sincerely%20yours\").setGravity(\"south\").setX(-10).setY(120).setColor(\"#15376f\").setAngle(9).chain()\n .setGravity(\"north\").setX(0).setY(54).setWidth(200).setAngle(9).setOverlay(\"text:Neucha_16:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\").setCrop(\"fit\")).generate(\"envelope.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(300).quality(\"auto\").crop(\"scale\").chain() .overlay(new TextLayer().fontFamily(\"Courgette\").fontSize(22).text(\"Dear%20customer\")).angle(9).opacity(80).gravity(\"north_west\").y(25).x(64).color(\"#671537\").chain() .overlay(new TextLayer().fontFamily(\"Niconne\").fontSize(20).text(\"Sincerely%20yours\")).gravity(\"south\").x(-10).y(120).color(\"#15376f\").angle(9).chain() .gravity(\"north\").x(0).y(54).width(200).angle(9).overlay(new TextLayer().fontFamily(\"Neucha\").fontSize(16).text(\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\")).crop(\"fit\")).generate(\"envelope.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .width(300).quality(\"auto\").crop(\"scale\").chain()\n .overlay(new TextLayer().fontFamily(\"Courgette\").fontSize(22).text(\"Dear%20customer\")).angle(9).opacity(80).gravity(\"north_west\").y(25).x(64).color(\"#671537\").chain()\n .overlay(new TextLayer().fontFamily(\"Niconne\").fontSize(20).text(\"Sincerely%20yours\")).gravity(\"south\").x(-10).y(120).color(\"#15376f\").angle(9).chain()\n .gravity(\"north\").x(0).y(54).width(200).angle(9).overlay(new TextLayer().fontFamily(\"Neucha\").fontSize(16).text(\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\")).crop(\"fit\")).generate(\"envelope.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('envelope.jpg').transformation(Transformation()\n\t.addTransformation(\"w_300,f_auto,q_auto\/l_text:Courgette_22:Dear customer,a_9,o_80,g_north_west,y_25,x_64,co_rgb:671537\/l_text:Niconne_20:Sincerely yours,g_south,x_-10,y_120,co_rgb:15376f,a_9\/g_north,x_0,y_54,w_200,c_fit,a_9,l_text:Neucha_16:Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\"));","codeSnippet":"cloudinary.image('envelope.jpg').transformation(Transformation()\n\t.addTransformation(\"w_300,f_auto,q_auto\/l_text:Courgette_22:Dear customer,a_9,o_80,g_north_west,y_25,x_64,co_rgb:671537\/l_text:Niconne_20:Sincerely yours,g_south,x_-10,y_120,co_rgb:15376f,a_9\/g_north,x_0,y_54,w_200,c_fit,a_9,l_text:Neucha_16:Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\"));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"envelope.jpg\")\n\t resize(Resize.scale() { width(300) })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.auto()))\n\t overlay(Overlay.source(\n\tSource.text(\"Dear customer\",TextStyle(\"Courgette\",22)) {\n\t textColor(Color.rgb(\"671537\"))\n\t transformation(Transformation {\n\t rotate(Rotate.byAngle(9))\n\t adjust(Adjust.opacity(80)) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.northWest()))\n offsetX(64)\n offsetY(25) })\n\t })\n\t overlay(Overlay.source(\n\tSource.text(\"Sincerely yours\",TextStyle(\"Niconne\",20)) {\n\t textColor(Color.rgb(\"15376f\"))\n\t transformation(Transformation {\n\t rotate(Rotate.byAngle(9)) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.south()))\n offsetX(-10)\n offsetY(120) })\n\t })\n\t overlay(Overlay.source(\n\tSource.text(\"Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\",TextStyle(\"Neucha\",16)) {\n\t textFit(\n\tTextFit.size(200))\n\t transformation(Transformation {\n\t rotate(Rotate.byAngle(9)) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\n offsetX(0)\n offsetY(54) })\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"envelope.jpg\")\n\t resize(Resize.scale() { width(300) })\n\t delivery(Delivery.format(\n\tFormat.auto()))\n\t delivery(Delivery.quality(\n\tQuality.auto()))\n\t overlay(Overlay.source(\n\tSource.text(\"Dear customer\",TextStyle(\"Courgette\",22)) {\n\t textColor(Color.rgb(\"671537\"))\n\t transformation(Transformation {\n\t rotate(Rotate.byAngle(9))\n\t adjust(Adjust.opacity(80)) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.northWest()))\n offsetX(64)\n offsetY(25) })\n\t })\n\t overlay(Overlay.source(\n\tSource.text(\"Sincerely yours\",TextStyle(\"Niconne\",20)) {\n\t textColor(Color.rgb(\"15376f\"))\n\t transformation(Transformation {\n\t rotate(Rotate.byAngle(9)) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.south()))\n offsetX(-10)\n offsetY(120) })\n\t })\n\t overlay(Overlay.source(\n\tSource.text(\"Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\",TextStyle(\"Neucha\",16)) {\n\t textFit(\n\tTextFit.size(200))\n\t transformation(Transformation {\n\t rotate(Rotate.byAngle(9)) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.north()))\n offsetX(0)\n offsetY(54) })\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(\"envelope.jpg\", {transformation: [ {width: 300, quality: \"auto\", crop: \"scale\"}, {overlay: new cloudinary.TextLayer().fontFamily(\"Courgette\").fontSize(22).text(\"Dear%20customer\"), angle: 9, opacity: 80, gravity: \"north_west\", y: 25, x: 64, color: \"#671537\"}, {overlay: new cloudinary.TextLayer().fontFamily(\"Niconne\").fontSize(20).text(\"Sincerely%20yours\"), gravity: \"south\", x: -10, y: 120, color: \"#15376f\", angle: 9}, {gravity: \"north\", x: 0, y: 54, width: 200, angle: 9, overlay: new cloudinary.TextLayer().fontFamily(\"Neucha\").fontSize(16).text(\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\"), crop: \"fit\"} ]})","codeSnippet":"$.cloudinary.image(\"envelope.jpg\", {transformation: [\n {width: 300, quality: \"auto\", crop: \"scale\"},\n {overlay: new cloudinary.TextLayer().fontFamily(\"Courgette\").fontSize(22).text(\"Dear%20customer\"), angle: 9, opacity: 80, gravity: \"north_west\", y: 25, x: 64, color: \"#671537\"},\n {overlay: new cloudinary.TextLayer().fontFamily(\"Niconne\").fontSize(20).text(\"Sincerely%20yours\"), gravity: \"south\", x: -10, y: 120, color: \"#15376f\", angle: 9},\n {gravity: \"north\", x: 0, y: 54, width: 200, angle: 9, overlay: new cloudinary.TextLayer().fontFamily(\"Neucha\").fontSize(16).text(\"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\"), crop: \"fit\"}\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(\"envelope.jpg\").addTransformation(\n \"w_300,f_auto,q_auto\/l_text:Courgette_22:Dear customer,a_9,o_80,g_north_west,y_25,x_64,co_rgb:671537\/l_text:Niconne_20:Sincerely yours,g_south,x_-10,y_120,co_rgb:15376f,a_9\/g_north,x_0,y_54,w_200,c_fit,a_9,l_text:Neucha_16:Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut inmarieImage新g_Genvelope.jpg\.Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\"\n);","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.agrosoland.com\/demo\/image\/upload\/w_300,f_auto,q_auto\/l_text:Courgette_22:Dear%20customer,a_9,o_80,g_north_west,y_25,x_64,co_rgb:671537\/l_text:Niconne_20:Sincerely%20yours,g_south,x_-10,y_120,co_rgb:15376f,a_9\/g_north,x_0,y_54,w_200,c_fit,a_9,l_text:Neucha_16:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.\/envelope.jpg","cloud_name":"demo","host":"res.www.agrosoland.com","type":"upload","resource_type":"image","transformation":[{"width":"300","format":"auto","quality":"auto"},{"overlay":"text:Courgette_22:Dear customer","angle":"9","opacity":"80","gravity":"north_west","y":"25","x":"64","color":"rgb:671537"},{"overlay":"text:Niconne_20:Sincerely yours","gravity":"south","x":"-10","y":"120","color":"rgb:15376f","angle":"9"},{"gravity":"north","x":"0","y":"54","width":"200","crop_mode":"fit","angle":"9","overlay":"text:Neucha_16:Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Utenniamexucelipse execodo consquat.s},Troyform_string's:w_300f_autoq_aute/ltext:cfit,a_9l_text:Neucha_16:LoremipsumddorsitUtenimminiam Veniamques编译sluscraplipsequate 加载代码示例