图像上叠加文本多功能有效方式 聚焦字幕 名 版权水印电子商业邮件中还可用文字覆盖动态图像(广告横幅、票券、贺卡、商务卡)。
客户常询问如何动态叠加图片文本常用方法之一是使用HTML元素、CSS或原生移动UI控件通常比较高效地叠加图片文本同时制作, 简化后台频道设备显示过程
利用云管理服务,你可以上传图片或视频,具体说明文本并动态覆盖在飞上配有认证API调用.可同时使用构建带文本层的动态横幅.
从云形新可获取的动态URL可实时叠加文本-字体自选-图像还可以进一步定制并变换文本层以图和感知你的愿望整个过程发生在云中,不需要验证API调用
下动URL前加载图像命名exshell.jpg
并贴标签海壳内含l_text:
带下列属性的参数
- 字型名
数位数
)
- 字体大小像素
60码
)
- 标签(
海壳
)
- 定位叠加
20码
),即图像顶部20像素,定义由重力
参数设置北边
高山市g_nortth
内URL)
<\/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(text(\"Sea Shell\", new TextStyle(\"arial\", 60))).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(text(\"Sea Shell\", new TextStyle(\"arial\", 60))).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(text(\"Sea Shell\", new TextStyle(\"arial\", 60))).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(text(\"Sea Shell\", new TextStyle(\"arial\", 60))).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(text(\"Sea Shell\", new TextStyle(\"arial\", 60))).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(text(\"Sea Shell\", new TextStyle(\"arial\", 60))).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(\"arial\").fontSize(60).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(\"arial\").fontSize(60).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': \"arial\", 'font_size': 60, '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': \"arial\", 'font_size': 60, '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(\"arial\",60))))\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(\"arial\",60))))\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\"=>\"arial\", \"font_size\"=>60, \"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\"=>\"arial\", \"font_size\"=>60, \"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(\"arial\").fontSize(60).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(\"arial\").fontSize(60).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=>\"arial\", :font_size=>60, :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=>\"arial\", :font_size=>60, :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(\"arial\").FontSize(60).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(\"arial\").FontSize(60).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:arial_60: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:arial_60: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:arial_60: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:arial_60: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(\"arial\").fontSize(60).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(\"arial\").fontSize(60).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:arial_60: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:arial_60: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(\"arial\",60))) {\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(\"arial\",60))) {\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(\"arial\").fontSize(60).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(\"arial\").fontSize(60).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(text(\"Sea Shell\", new TextStyle(\"arial\", 60))).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(text(\"Sea Shell\", new TextStyle(\"arial\", 60))).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.aaaalireno.com\/demo\/image\/upload\/w_400,f_auto,q_auto\/l_text:arial_60:Sea%20Shell,g_north,y_20\/sea_shell.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"width":"400","format":"auto","quality":"auto"},{"overlay":"text:arial_60:Sea Shell","gravity":"north","y":"20"}],"transformation_string":"w_400,f_auto,q_auto\/l_text:arial_60: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" >
加载代码示例
云化提供数以百计字体,包括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.aaaalireno.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.aaaalireno.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.aaaalireno.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.aaaalireno.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.aaaalireno.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.aaaalireno.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.aaaalireno.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.aaaalireno.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.aaaalireno.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.aaaalireno.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.aaaalireno.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.aaaalireno.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
加载代码示例
多客户证明,图像上文本叠加是多例使用案例的极佳特征贝斯特2200娱乐云形能力将飞文样式添加到上传到平台上媒体库的图片中很简单动态.可嵌入网站、移动应用或营销邮件中的变换图像,请放心观众可不必配置浏览器或设备即可浏览图像
云端相关能力说明本站所有订阅计划都可用,包括免费级报个名自由帐户并试一试
评语问题解答填表下或联系脸书或微博.
阅读这些文章