建立创用内容A/B测试和1:1个个化

内容优化和个性化程序可以向组织提供巨大的ROI,但往往资源密集性强,需要开发者构建代用经验代码和创造者生成内容代码内容优化/个化工具中的许多工具(maxymiser、最优化、adobe目标、Ensighten等)创建WYSIWYG编辑帮助解码/开发瓶颈,但创新瓶颈固存

贝斯特登录入口官网下载常有个人化或A/B测试大思想,但无法执行,因为创建团队没有时间或资源来创造需要的东西。优化测试个性化团队中 任何人都曾处理过 问题多年难以解决

有点像捕22:最优程序越成功,资源越集中维护,特别是当个人化需要更多面向个人用户的内容时。如何扩大这种主动性而不雇用一队有创意者?

网站常有创举内容或图片尺寸错误 需要圆角 或只需要文字叠加以Williams-Sonoma网站(我爱的零售商)为例

if you gowilliams-sonoma.com并滚动到主页上 你会看到一个段 标题为:本节用于显示基于浏览行为的个人化内容if this is your first time at Williams-Sonoma and you've still to浏览, 你会看到默认内容写作时,它看起来像

但如果我开始浏览网站 Williams Sonoma学习我感兴趣的产品 并显示相关内容环游Cutlery版后主页

酷极了,现在我可以看到相关内容少布局

威廉斯索诺马后端如何看很明显,它们必须保留额外内容,大约十几种不同版本供每个主产品类别使用自然这对开发团队和创意团队都加压

可能正因如此,我们只看到十多版或如此不同的版本,然后仅在一页上一分假设想拓展个性化创举, 则必须权衡增益和增益,

时我浏览餐具类 构建类近似性,雪茄刀.可当我回主页时,我被显示为ShunCutlery内容相同类别(catlery) 但仍然可能和我无关 可能不够个性化贝斯特登录入口官网下载正像我们讨论的那样, 可能无法达到个人化水平(正1:1), 因为这太费力创建所有需要的资源, 正如我猜Williams-Sonoma在1000产品或更多领域所具备的一样。

可想而知,如果你去你的创举团队 并请求他们为每个点制作千+不同图像 并尝试个性化内容(超出他们的正常作业范围)我猜会有人笑 并发邀请离开他们的办公室

云化后,我们可以动态生成所有这些图像,简单方式是修改图像url,应用自定义参数右侧图像URL并制作飞图图下图绝对零使用图像软件并建像当前wiliams-sonoma.com图像的创用风格

细节显示这些图像是如何创建的

\", new TextStyle(\"Helvetica\", 14))\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(58)\n )\n )\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\n \"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\"\n)\n .resize(fill().width(320).height(400))\n .border(solid(1, \"gray\"))\n .overlay(\n source(\n image(\"white-bar\").transformation(\n new Transformation().resize(scale().width(300).height(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(20)\n )\n )\n .overlay(\n source(\n text(\"ROSLE CHEESE KNIVES >\", new TextStyle(\"Helvetica\", 14))\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(58)\n )\n )\n .setDeliveryType(\"fetch\");","status":0,"statusText":"Ok","displayName":"React","packageName":"@cloudinary\/react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"react","framework":"react","language":"react","rawCodeSnippet":" <\/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(\n \"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\"\n)\n .resize(fill().width(320).height(400))\n .border(solid(1, \"gray\"))\n .overlay(\n source(\n image(\"white-bar\").transformation(\n new Transformation().resize(scale().width(300).height(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(20)\n )\n )\n .overlay(\n source(\n text(\"ROSLE CHEESE KNIVES >\", new TextStyle(\"Helvetica\", 14))\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(58)\n )\n )\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\n \"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\"\n)\n .resize(fill().width(320).height(400))\n .border(solid(1, \"gray\"))\n .overlay(\n source(\n image(\"white-bar\").transformation(\n new Transformation().resize(scale().width(300).height(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(20)\n )\n )\n .overlay(\n source(\n text(\"ROSLE CHEESE KNIVES >\", new TextStyle(\"Helvetica\", 14))\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(58)\n )\n )\n .setDeliveryType(\"fetch\");","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(\n \"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\"\n)\n .resize(fill().width(320).height(400))\n .border(solid(1, \"gray\"))\n .overlay(\n source(\n image(\"white-bar\").transformation(\n new Transformation().resize(scale().width(300).height(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(20)\n )\n )\n .overlay(\n source(\n text(\"ROSLE CHEESE KNIVES >\", new TextStyle(\"Helvetica\", 14))\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(58)\n )\n )\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\n \"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\"\n)\n .resize(fill().width(320).height(400))\n .border(solid(1, \"gray\"))\n .overlay(\n source(\n image(\"white-bar\").transformation(\n new Transformation().resize(scale().width(300).height(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(20)\n )\n )\n .overlay(\n source(\n text(\"ROSLE CHEESE KNIVES >\", new TextStyle(\"Helvetica\", 14))\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(58)\n )\n )\n .setDeliveryType(\"fetch\");","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(\n \"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\"\n)\n .resize(fill().width(320).height(400))\n .border(solid(1, \"gray\"))\n .overlay(\n source(\n image(\"white-bar\").transformation(\n new Transformation().resize(scale().width(300).height(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(20)\n )\n )\n .overlay(\n source(\n text(\"ROSLE CHEESE KNIVES >\", new TextStyle(\"Helvetica\", 14))\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(58)\n )\n )\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\n \"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\"\n)\n .resize(fill().width(320).height(400))\n .border(solid(1, \"gray\"))\n .overlay(\n source(\n image(\"white-bar\").transformation(\n new Transformation().resize(scale().width(300).height(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(20)\n )\n )\n .overlay(\n source(\n text(\"ROSLE CHEESE KNIVES >\", new TextStyle(\"Helvetica\", 14))\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(58)\n )\n )\n .setDeliveryType(\"fetch\");","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg', {type: \"fetch\", transformation: [ {width: 320, height: 400, border: \"1px_solid_gray\", crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"white-bar\"), width: 300, height: 90, gravity: \"south\", y: 20}, {overlay: new cloudinary.TextLayer().fontFamily(\"Helvetica\").fontSize(14).text(\"ROSLE%20CHEESE%20KNIVES%20%3E\"), gravity: \"south\", y: 58} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg', {type: \"fetch\", transformation: [\n {width: 320, height: 400, border: \"1px_solid_gray\", crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"white-bar\"), width: 300, height: 90, gravity: \"south\", y: 20},\n {overlay: new cloudinary.TextLayer().fontFamily(\"Helvetica\").fontSize(14).text(\"ROSLE%20CHEESE%20KNIVES%20%3E\"), gravity: \"south\", y: 58}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\").image(type=\"fetch\", transformation=[ {'width': 320, 'height': 400, 'border': \"1px_solid_gray\", 'crop': \"fill\"}, {'overlay': \"white-bar\", 'width': 300, 'height': 90, 'gravity': \"south\", 'y': 20}, {'overlay': {'font_family': \"Helvetica\", 'font_size': 14, 'text': \"ROSLE%20CHEESE%20KNIVES%20%3E\"}, 'gravity': \"south\", 'y': 58} ])","codeSnippet":"CloudinaryImage(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\").image(type=\"fetch\", transformation=[\n {'width': 320, 'height': 400, 'border': \"1px_solid_gray\", 'crop': \"fill\"},\n {'overlay': \"white-bar\", 'width': 300, 'height': 90, 'gravity': \"south\", 'y': 20},\n {'overlay': {'font_family': \"Helvetica\", 'font_size': 14, 'text': \"ROSLE%20CHEESE%20KNIVES%20%3E\"}, 'gravity': \"south\", 'y': 58}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg'))\n\t->resize(Resize::fill()->width(320)\n->height(400))\n\t->border(Border::solid(1,Color::GRAY))\n\t->overlay(Overlay::source(\n\tSource::image(\"white-bar\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(300)\n->height(90)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::south()))\n->offsetY(20))\n\t)\n\t->overlay(Overlay::source(\n\tSource::text(\"ROSLE CHEESE KNIVES >\",(new TextStyle(\"Helvetica\",14))))\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::south()))\n->offsetY(58))\n\t)\n\t->deliveryType(\"fetch\");","codeSnippet":"(new ImageTag('https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg'))\n\t->resize(Resize::fill()->width(320)\n->height(400))\n\t->border(Border::solid(1,Color::GRAY))\n\t->overlay(Overlay::source(\n\tSource::image(\"white-bar\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(300)\n->height(90)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::south()))\n->offsetY(20))\n\t)\n\t->overlay(Overlay::source(\n\tSource::text(\"ROSLE CHEESE KNIVES >\",(new TextStyle(\"Helvetica\",14))))\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::south()))\n->offsetY(58))\n\t)\n\t->deliveryType(\"fetch\");","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\", array(\"type\"=>\"fetch\", \"transformation\"=>array( array(\"width\"=>320, \"height\"=>400, \"border\"=>\"1px_solid_gray\", \"crop\"=>\"fill\"), array(\"overlay\"=>\"white-bar\", \"width\"=>300, \"height\"=>90, \"gravity\"=>\"south\", \"y\"=>20), array(\"overlay\"=>array(\"font_family\"=>\"Helvetica\", \"font_size\"=>14, \"text\"=>\"ROSLE%20CHEESE%20KNIVES%20%3E\"), \"gravity\"=>\"south\", \"y\"=>58) )))","codeSnippet":"cl_image_tag(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\", array(\"type\"=>\"fetch\", \"transformation\"=>array(\n array(\"width\"=>320, \"height\"=>400, \"border\"=>\"1px_solid_gray\", \"crop\"=>\"fill\"),\n array(\"overlay\"=>\"white-bar\", \"width\"=>300, \"height\"=>90, \"gravity\"=>\"south\", \"y\"=>20),\n array(\"overlay\"=>array(\"font_family\"=>\"Helvetica\", \"font_size\"=>14, \"text\"=>\"ROSLE%20CHEESE%20KNIVES%20%3E\"), \"gravity\"=>\"south\", \"y\"=>58)\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(320).height(400).border(\"1px_solid_gray\").crop(\"fill\").chain() .overlay(new Layer().publicId(\"white-bar\")).width(300).height(90).gravity(\"south\").y(20).chain() .overlay(new TextLayer().fontFamily(\"Helvetica\").fontSize(14).text(\"ROSLE%20CHEESE%20KNIVES%20%3E\")).gravity(\"south\").y(58)).type(\"fetch\").imageTag(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .width(320).height(400).border(\"1px_solid_gray\").crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"white-bar\")).width(300).height(90).gravity(\"south\").y(20).chain()\n .overlay(new TextLayer().fontFamily(\"Helvetica\").fontSize(14).text(\"ROSLE%20CHEESE%20KNIVES%20%3E\")).gravity(\"south\").y(58)).type(\"fetch\").imageTag(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\", :type=>\"fetch\", :transformation=>[ {:width=>320, :height=>400, :border=>\"1px_solid_gray\", :crop=>\"fill\"}, {:overlay=>\"white-bar\", :width=>300, :height=>90, :gravity=>\"south\", :y=>20}, {:overlay=>{:font_family=>\"Helvetica\", :font_size=>14, :text=>\"ROSLE%20CHEESE%20KNIVES%20%3E\"}, :gravity=>\"south\", :y=>58} ])","codeSnippet":"cl_image_tag(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\", :type=>\"fetch\", :transformation=>[\n {:width=>320, :height=>400, :border=>\"1px_solid_gray\", :crop=>\"fill\"},\n {:overlay=>\"white-bar\", :width=>300, :height=>90, :gravity=>\"south\", :y=>20},\n {:overlay=>{:font_family=>\"Helvetica\", :font_size=>14, :text=>\"ROSLE%20CHEESE%20KNIVES%20%3E\"}, :gravity=>\"south\", :y=>58}\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(320).Height(400).Border(\"1px_solid_gray\").Crop(\"fill\").Chain() .Overlay(new Layer().PublicId(\"white-bar\")).Width(300).Height(90).Gravity(\"south\").Y(20).Chain() .Overlay(new TextLayer().FontFamily(\"Helvetica\").FontSize(14).Text(\"ROSLE%20CHEESE%20KNIVES%20%3E\")).Gravity(\"south\").Y(58)).Action(\"fetch\").BuildImageTag(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .Width(320).Height(400).Border(\"1px_solid_gray\").Crop(\"fill\").Chain()\n .Overlay(new Layer().PublicId(\"white-bar\")).Width(300).Height(90).Gravity(\"south\").Y(20).Chain()\n .Overlay(new TextLayer().FontFamily(\"Helvetica\").FontSize(14).Text(\"ROSLE%20CHEESE%20KNIVES%20%3E\")).Gravity(\"south\").Y(58)).Action(\"fetch\").BuildImageTag(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg').transformation(Transformation()\n\t.addTransformation(\"w_320,h_400,c_fill,bo_1px_solid_gray\/l_white-bar,w_300,h_90,g_south,y_20\/l_text:Helvetica_14:ROSLE CHEESE KNIVES >,g_south,y_58\")\n\t.setDeliveryType(\"fetch\"));","codeSnippet":"cloudinary.image('https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg').transformation(Transformation()\n\t.addTransformation(\"w_320,h_400,c_fill,bo_1px_solid_gray\/l_white-bar,w_300,h_90,g_south,y_20\/l_text:Helvetica_14:ROSLE CHEESE KNIVES >,g_south,y_58\")\n\t.setDeliveryType(\"fetch\"));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setType( \"fetch\").setTransformation(CLDTransformation().setWidth(320).setHeight(400).setBorder(\"1px_solid_gray\").setCrop(\"fill\").chain() .setOverlay(\"white-bar\").setWidth(300).setHeight(90).setGravity(\"south\").setY(20).chain() .setOverlay(\"text:Helvetica_14:ROSLE%20CHEESE%20KNIVES%20%3E\").setGravity(\"south\").setY(58)).generate(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setType( \"fetch\").setTransformation(CLDTransformation()\n .setWidth(320).setHeight(400).setBorder(\"1px_solid_gray\").setCrop(\"fill\").chain()\n .setOverlay(\"white-bar\").setWidth(300).setHeight(90).setGravity(\"south\").setY(20).chain()\n .setOverlay(\"text:Helvetica_14:ROSLE%20CHEESE%20KNIVES%20%3E\").setGravity(\"south\").setY(58)).generate(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.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(320).height(400).border(\"1px_solid_gray\").crop(\"fill\").chain() .overlay(new Layer().publicId(\"white-bar\")).width(300).height(90).gravity(\"south\").y(20).chain() .overlay(new TextLayer().fontFamily(\"Helvetica\").fontSize(14).text(\"ROSLE%20CHEESE%20KNIVES%20%3E\")).gravity(\"south\").y(58)).type(\"fetch\").generate(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .width(320).height(400).border(\"1px_solid_gray\").crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"white-bar\")).width(300).height(90).gravity(\"south\").y(20).chain()\n .overlay(new TextLayer().fontFamily(\"Helvetica\").fontSize(14).text(\"ROSLE%20CHEESE%20KNIVES%20%3E\")).gravity(\"south\").y(58)).type(\"fetch\").generate(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg').transformation(Transformation()\n\t.addTransformation(\"w_320,h_400,c_fill,bo_1px_solid_gray\/l_white-bar,w_300,h_90,g_south,y_20\/l_text:Helvetica_14:ROSLE CHEESE KNIVES >,g_south,y_58\")\n\t.setDeliveryType(\"fetch\"));","codeSnippet":"cloudinary.image('https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg').transformation(Transformation()\n\t.addTransformation(\"w_320,h_400,c_fill,bo_1px_solid_gray\/l_white-bar,w_300,h_90,g_south,y_20\/l_text:Helvetica_14:ROSLE CHEESE KNIVES >,g_south,y_58\")\n\t.setDeliveryType(\"fetch\"));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\")\n\t resize(Resize.fill() { width(320)\n height(400) })\n\t border(Border.solid(1,Color.GRAY))\n\t overlay(Overlay.source(\n\tSource.image(\"white-bar\") {\n\t transformation(Transformation {\n\t resize(Resize.scale() { width(300)\n height(90) }) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.south()))\n offsetY(20) })\n\t })\n\t overlay(Overlay.source(\n\tSource.text(\"ROSLE CHEESE KNIVES >\",TextStyle(\"Helvetica\",14))) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.south()))\n offsetY(58) })\n\t })\n\t deliveryType(\"fetch\") \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\")\n\t resize(Resize.fill() { width(320)\n height(400) })\n\t border(Border.solid(1,Color.GRAY))\n\t overlay(Overlay.source(\n\tSource.image(\"white-bar\") {\n\t transformation(Transformation {\n\t resize(Resize.scale() { width(300)\n height(90) }) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.south()))\n offsetY(20) })\n\t })\n\t overlay(Overlay.source(\n\tSource.text(\"ROSLE CHEESE KNIVES >\",TextStyle(\"Helvetica\",14))) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.south()))\n offsetY(58) })\n\t })\n\t deliveryType(\"fetch\") \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(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\", {type: \"fetch\", transformation: [ {width: 320, height: 400, border: \"1px_solid_gray\", crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"white-bar\"), width: 300, height: 90, gravity: \"south\", y: 20}, {overlay: new cloudinary.TextLayer().fontFamily(\"Helvetica\").fontSize(14).text(\"ROSLE%20CHEESE%20KNIVES%20%3E\"), gravity: \"south\", y: 58} ]})","codeSnippet":"$.cloudinary.image(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\", {type: \"fetch\", transformation: [\n {width: 320, height: 400, border: \"1px_solid_gray\", crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"white-bar\"), width: 300, height: 90, gravity: \"south\", y: 20},\n {overlay: new cloudinary.TextLayer().fontFamily(\"Helvetica\").fontSize(14).text(\"ROSLE%20CHEESE%20KNIVES%20%3E\"), gravity: \"south\", y: 58}\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(\n \"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\"\n)\n .resize(fill().width(320).height(400))\n .border(solid(1, \"gray\"))\n .overlay(\n source(\n image(\"white-bar\").transformation(\n new Transformation().resize(scale().width(300).height(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(20)\n )\n )\n .overlay(\n source(\n text(\"ROSLE CHEESE KNIVES >\", new TextStyle(\"Helvetica\", 14))\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(58)\n )\n )\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\n \"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg\"\n)\n .resize(fill().width(320).height(400))\n .border(solid(1, \"gray\"))\n .overlay(\n source(\n image(\"white-bar\").transformation(\n new Transformation().resize(scale().width(300).height(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(20)\n )\n )\n .overlay(\n source(\n text(\"ROSLE CHEESE KNIVES >\", new TextStyle(\"Helvetica\", 14))\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(58)\n )\n )\n .setDeliveryType(\"fetch\");","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\/fetch\/w_320,h_400,c_fill,bo_1px_solid_gray\/l_white-bar,w_300,h_90,g_south,y_20\/l_text:Helvetica_14:ROSLE%20CHEESE%20KNIVES%20%3E,g_south,y_58\/https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"fetch","resource_type":"image","transformation":[{"width":"320","height":"400","crop_mode":"fill","border":"1px_solid_gray"},{"overlay":"white-bar","width":"300","height":"90","gravity":"south","y":"20"},{"overlay":"text:Helvetica_14:ROSLE CHEESE KNIVES >","gravity":"south","y":"58"}],"transformation_string":"w_320,h_400,c_fill,bo_1px_solid_gray\/l_white-bar,w_300,h_90,g_south,y_20\/l_text:Helvetica_14:ROSLE CHEESE KNIVES >,g_south,y_58","url_suffix":"","version":"","secure":true,"public_id":"https:\/\/s3.amazonaws.com\/blog-images-origin\/cheese_knives.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

\", new TextStyle(\"Helvetica\", 14))\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(48)\n )\n )\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\")\n .resize(fill().width(320).height(400))\n .border(solid(1, \"gray\"))\n .overlay(\n source(\n image(\"white-bar\").transformation(\n new Transformation().resize(scale().width(300).height(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(10)\n )\n )\n .overlay(\n source(\n text(\"VITAMIX 780 BLENDER >\", new TextStyle(\"Helvetica\", 14))\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(48)\n )\n )\n .setDeliveryType(\"fetch\");","status":0,"statusText":"Ok","displayName":"React","packageName":"@cloudinary\/react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"react","framework":"react","language":"react","rawCodeSnippet":" <\/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(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\")\n .resize(fill().width(320).height(400))\n .border(solid(1, \"gray\"))\n .overlay(\n source(\n image(\"white-bar\").transformation(\n new Transformation().resize(scale().width(300).height(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(10)\n )\n )\n .overlay(\n source(\n text(\"VITAMIX 780 BLENDER >\", new TextStyle(\"Helvetica\", 14))\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(48)\n )\n )\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\")\n .resize(fill().width(320).height(400))\n .border(solid(1, \"gray\"))\n .overlay(\n source(\n image(\"white-bar\").transformation(\n new Transformation().resize(scale().width(300).height(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(10)\n )\n )\n .overlay(\n source(\n text(\"VITAMIX 780 BLENDER >\", new TextStyle(\"Helvetica\", 14))\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(48)\n )\n )\n .setDeliveryType(\"fetch\");","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(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\")\n .resize(fill().width(320).height(400))\n .border(solid(1, \"gray\"))\n .overlay(\n source(\n image(\"white-bar\").transformation(\n new Transformation().resize(scale().width(300).height(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(10)\n )\n )\n .overlay(\n source(\n text(\"VITAMIX 780 BLENDER >\", new TextStyle(\"Helvetica\", 14))\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(48)\n )\n )\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\")\n .resize(fill().width(320).height(400))\n .border(solid(1, \"gray\"))\n .overlay(\n source(\n image(\"white-bar\").transformation(\n new Transformation().resize(scale().width(300).height(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(10)\n )\n )\n .overlay(\n source(\n text(\"VITAMIX 780 BLENDER >\", new TextStyle(\"Helvetica\", 14))\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(48)\n )\n )\n .setDeliveryType(\"fetch\");","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(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\")\n .resize(fill().width(320).height(400))\n .border(solid(1, \"gray\"))\n .overlay(\n source(\n image(\"white-bar\").transformation(\n new Transformation().resize(scale().width(300).height(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(10)\n )\n )\n .overlay(\n source(\n text(\"VITAMIX 780 BLENDER >\", new TextStyle(\"Helvetica\", 14))\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(48)\n )\n )\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\")\n .resize(fill().width(320).height(400))\n .border(solid(1, \"gray\"))\n .overlay(\n source(\n image(\"white-bar\").transformation(\n new Transformation().resize(scale().width(300).height(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(10)\n )\n )\n .overlay(\n source(\n text(\"VITAMIX 780 BLENDER >\", new TextStyle(\"Helvetica\", 14))\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(48)\n )\n )\n .setDeliveryType(\"fetch\");","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg', {type: \"fetch\", transformation: [ {width: 320, height: 400, border: \"1px_solid_gray\", crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"white-bar\"), width: 300, height: 90, gravity: \"south\", y: 10}, {overlay: new cloudinary.TextLayer().fontFamily(\"Helvetica\").fontSize(14).text(\"VITAMIX%20780%20BLENDER%20%3E\"), gravity: \"south\", y: 48} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg', {type: \"fetch\", transformation: [\n {width: 320, height: 400, border: \"1px_solid_gray\", crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"white-bar\"), width: 300, height: 90, gravity: \"south\", y: 10},\n {overlay: new cloudinary.TextLayer().fontFamily(\"Helvetica\").fontSize(14).text(\"VITAMIX%20780%20BLENDER%20%3E\"), gravity: \"south\", y: 48}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\").image(type=\"fetch\", transformation=[ {'width': 320, 'height': 400, 'border': \"1px_solid_gray\", 'crop': \"fill\"}, {'overlay': \"white-bar\", 'width': 300, 'height': 90, 'gravity': \"south\", 'y': 10}, {'overlay': {'font_family': \"Helvetica\", 'font_size': 14, 'text': \"VITAMIX%20780%20BLENDER%20%3E\"}, 'gravity': \"south\", 'y': 48} ])","codeSnippet":"CloudinaryImage(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\").image(type=\"fetch\", transformation=[\n {'width': 320, 'height': 400, 'border': \"1px_solid_gray\", 'crop': \"fill\"},\n {'overlay': \"white-bar\", 'width': 300, 'height': 90, 'gravity': \"south\", 'y': 10},\n {'overlay': {'font_family': \"Helvetica\", 'font_size': 14, 'text': \"VITAMIX%20780%20BLENDER%20%3E\"}, 'gravity': \"south\", 'y': 48}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg'))\n\t->resize(Resize::fill()->width(320)\n->height(400))\n\t->border(Border::solid(1,Color::GRAY))\n\t->overlay(Overlay::source(\n\tSource::image(\"white-bar\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(300)\n->height(90)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::south()))\n->offsetY(10))\n\t)\n\t->overlay(Overlay::source(\n\tSource::text(\"VITAMIX 780 BLENDER >\",(new TextStyle(\"Helvetica\",14))))\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::south()))\n->offsetY(48))\n\t)\n\t->deliveryType(\"fetch\");","codeSnippet":"(new ImageTag('https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg'))\n\t->resize(Resize::fill()->width(320)\n->height(400))\n\t->border(Border::solid(1,Color::GRAY))\n\t->overlay(Overlay::source(\n\tSource::image(\"white-bar\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(300)\n->height(90)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::south()))\n->offsetY(10))\n\t)\n\t->overlay(Overlay::source(\n\tSource::text(\"VITAMIX 780 BLENDER >\",(new TextStyle(\"Helvetica\",14))))\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::south()))\n->offsetY(48))\n\t)\n\t->deliveryType(\"fetch\");","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\", array(\"type\"=>\"fetch\", \"transformation\"=>array( array(\"width\"=>320, \"height\"=>400, \"border\"=>\"1px_solid_gray\", \"crop\"=>\"fill\"), array(\"overlay\"=>\"white-bar\", \"width\"=>300, \"height\"=>90, \"gravity\"=>\"south\", \"y\"=>10), array(\"overlay\"=>array(\"font_family\"=>\"Helvetica\", \"font_size\"=>14, \"text\"=>\"VITAMIX%20780%20BLENDER%20%3E\"), \"gravity\"=>\"south\", \"y\"=>48) )))","codeSnippet":"cl_image_tag(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\", array(\"type\"=>\"fetch\", \"transformation\"=>array(\n array(\"width\"=>320, \"height\"=>400, \"border\"=>\"1px_solid_gray\", \"crop\"=>\"fill\"),\n array(\"overlay\"=>\"white-bar\", \"width\"=>300, \"height\"=>90, \"gravity\"=>\"south\", \"y\"=>10),\n array(\"overlay\"=>array(\"font_family\"=>\"Helvetica\", \"font_size\"=>14, \"text\"=>\"VITAMIX%20780%20BLENDER%20%3E\"), \"gravity\"=>\"south\", \"y\"=>48)\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(320).height(400).border(\"1px_solid_gray\").crop(\"fill\").chain() .overlay(new Layer().publicId(\"white-bar\")).width(300).height(90).gravity(\"south\").y(10).chain() .overlay(new TextLayer().fontFamily(\"Helvetica\").fontSize(14).text(\"VITAMIX%20780%20BLENDER%20%3E\")).gravity(\"south\").y(48)).type(\"fetch\").imageTag(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .width(320).height(400).border(\"1px_solid_gray\").crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"white-bar\")).width(300).height(90).gravity(\"south\").y(10).chain()\n .overlay(new TextLayer().fontFamily(\"Helvetica\").fontSize(14).text(\"VITAMIX%20780%20BLENDER%20%3E\")).gravity(\"south\").y(48)).type(\"fetch\").imageTag(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\", :type=>\"fetch\", :transformation=>[ {:width=>320, :height=>400, :border=>\"1px_solid_gray\", :crop=>\"fill\"}, {:overlay=>\"white-bar\", :width=>300, :height=>90, :gravity=>\"south\", :y=>10}, {:overlay=>{:font_family=>\"Helvetica\", :font_size=>14, :text=>\"VITAMIX%20780%20BLENDER%20%3E\"}, :gravity=>\"south\", :y=>48} ])","codeSnippet":"cl_image_tag(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\", :type=>\"fetch\", :transformation=>[\n {:width=>320, :height=>400, :border=>\"1px_solid_gray\", :crop=>\"fill\"},\n {:overlay=>\"white-bar\", :width=>300, :height=>90, :gravity=>\"south\", :y=>10},\n {:overlay=>{:font_family=>\"Helvetica\", :font_size=>14, :text=>\"VITAMIX%20780%20BLENDER%20%3E\"}, :gravity=>\"south\", :y=>48}\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(320).Height(400).Border(\"1px_solid_gray\").Crop(\"fill\").Chain() .Overlay(new Layer().PublicId(\"white-bar\")).Width(300).Height(90).Gravity(\"south\").Y(10).Chain() .Overlay(new TextLayer().FontFamily(\"Helvetica\").FontSize(14).Text(\"VITAMIX%20780%20BLENDER%20%3E\")).Gravity(\"south\").Y(48)).Action(\"fetch\").BuildImageTag(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .Width(320).Height(400).Border(\"1px_solid_gray\").Crop(\"fill\").Chain()\n .Overlay(new Layer().PublicId(\"white-bar\")).Width(300).Height(90).Gravity(\"south\").Y(10).Chain()\n .Overlay(new TextLayer().FontFamily(\"Helvetica\").FontSize(14).Text(\"VITAMIX%20780%20BLENDER%20%3E\")).Gravity(\"south\").Y(48)).Action(\"fetch\").BuildImageTag(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg').transformation(Transformation()\n\t.addTransformation(\"w_320,h_400,c_fill,bo_1px_solid_gray\/l_white-bar,w_300,h_90,g_south,y_10\/l_text:Helvetica_14:VITAMIX 780 BLENDER >,g_south,y_48\")\n\t.setDeliveryType(\"fetch\"));","codeSnippet":"cloudinary.image('https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg').transformation(Transformation()\n\t.addTransformation(\"w_320,h_400,c_fill,bo_1px_solid_gray\/l_white-bar,w_300,h_90,g_south,y_10\/l_text:Helvetica_14:VITAMIX 780 BLENDER >,g_south,y_48\")\n\t.setDeliveryType(\"fetch\"));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setType( \"fetch\").setTransformation(CLDTransformation().setWidth(320).setHeight(400).setBorder(\"1px_solid_gray\").setCrop(\"fill\").chain() .setOverlay(\"white-bar\").setWidth(300).setHeight(90).setGravity(\"south\").setY(10).chain() .setOverlay(\"text:Helvetica_14:VITAMIX%20780%20BLENDER%20%3E\").setGravity(\"south\").setY(48)).generate(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setType( \"fetch\").setTransformation(CLDTransformation()\n .setWidth(320).setHeight(400).setBorder(\"1px_solid_gray\").setCrop(\"fill\").chain()\n .setOverlay(\"white-bar\").setWidth(300).setHeight(90).setGravity(\"south\").setY(10).chain()\n .setOverlay(\"text:Helvetica_14:VITAMIX%20780%20BLENDER%20%3E\").setGravity(\"south\").setY(48)).generate(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.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(320).height(400).border(\"1px_solid_gray\").crop(\"fill\").chain() .overlay(new Layer().publicId(\"white-bar\")).width(300).height(90).gravity(\"south\").y(10).chain() .overlay(new TextLayer().fontFamily(\"Helvetica\").fontSize(14).text(\"VITAMIX%20780%20BLENDER%20%3E\")).gravity(\"south\").y(48)).type(\"fetch\").generate(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .width(320).height(400).border(\"1px_solid_gray\").crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"white-bar\")).width(300).height(90).gravity(\"south\").y(10).chain()\n .overlay(new TextLayer().fontFamily(\"Helvetica\").fontSize(14).text(\"VITAMIX%20780%20BLENDER%20%3E\")).gravity(\"south\").y(48)).type(\"fetch\").generate(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg').transformation(Transformation()\n\t.addTransformation(\"w_320,h_400,c_fill,bo_1px_solid_gray\/l_white-bar,w_300,h_90,g_south,y_10\/l_text:Helvetica_14:VITAMIX 780 BLENDER >,g_south,y_48\")\n\t.setDeliveryType(\"fetch\"));","codeSnippet":"cloudinary.image('https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg').transformation(Transformation()\n\t.addTransformation(\"w_320,h_400,c_fill,bo_1px_solid_gray\/l_white-bar,w_300,h_90,g_south,y_10\/l_text:Helvetica_14:VITAMIX 780 BLENDER >,g_south,y_48\")\n\t.setDeliveryType(\"fetch\"));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\")\n\t resize(Resize.fill() { width(320)\n height(400) })\n\t border(Border.solid(1,Color.GRAY))\n\t overlay(Overlay.source(\n\tSource.image(\"white-bar\") {\n\t transformation(Transformation {\n\t resize(Resize.scale() { width(300)\n height(90) }) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.south()))\n offsetY(10) })\n\t })\n\t overlay(Overlay.source(\n\tSource.text(\"VITAMIX 780 BLENDER >\",TextStyle(\"Helvetica\",14))) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.south()))\n offsetY(48) })\n\t })\n\t deliveryType(\"fetch\") \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\")\n\t resize(Resize.fill() { width(320)\n height(400) })\n\t border(Border.solid(1,Color.GRAY))\n\t overlay(Overlay.source(\n\tSource.image(\"white-bar\") {\n\t transformation(Transformation {\n\t resize(Resize.scale() { width(300)\n height(90) }) })\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.south()))\n offsetY(10) })\n\t })\n\t overlay(Overlay.source(\n\tSource.text(\"VITAMIX 780 BLENDER >\",TextStyle(\"Helvetica\",14))) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.south()))\n offsetY(48) })\n\t })\n\t deliveryType(\"fetch\") \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(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\", {type: \"fetch\", transformation: [ {width: 320, height: 400, border: \"1px_solid_gray\", crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"white-bar\"), width: 300, height: 90, gravity: \"south\", y: 10}, {overlay: new cloudinary.TextLayer().fontFamily(\"Helvetica\").fontSize(14).text(\"VITAMIX%20780%20BLENDER%20%3E\"), gravity: \"south\", y: 48} ]})","codeSnippet":"$.cloudinary.image(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\", {type: \"fetch\", transformation: [\n {width: 320, height: 400, border: \"1px_solid_gray\", crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"white-bar\"), width: 300, height: 90, gravity: \"south\", y: 10},\n {overlay: new cloudinary.TextLayer().fontFamily(\"Helvetica\").fontSize(14).text(\"VITAMIX%20780%20BLENDER%20%3E\"), gravity: \"south\", y: 48}\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(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\")\n .resize(fill().width(320).height(400))\n .border(solid(1, \"gray\"))\n .overlay(\n source(\n image(\"white-bar\").transformation(\n new Transformation().resize(scale().width(300).height(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(10)\n )\n )\n .overlay(\n source(\n text(\"VITAMIX 780 BLENDER >\", new TextStyle(\"Helvetica\", 14))\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(48)\n )\n )\n .setDeliveryType(\"fetch\");","codeSnippet":"new CloudinaryImage(\"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg\")\n .resize(fill().width(320).height(400))\n .border(solid(1, \"gray\"))\n .overlay(\n source(\n image(\"white-bar\").transformation(\n new Transformation().resize(scale().width(300).height(90))\n )\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(10)\n )\n )\n .overlay(\n source(\n text(\"VITAMIX 780 BLENDER >\", new TextStyle(\"Helvetica\", 14))\n ).position(\n new Position()\n .gravity(compass(\"south\"))\n .offsetY(48)\n )\n )\n .setDeliveryType(\"fetch\");","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\/fetch\/w_320,h_400,c_fill,bo_1px_solid_gray\/l_white-bar,w_300,h_90,g_south,y_10\/l_text:Helvetica_14:VITAMIX%20780%20BLENDER%20%3E,g_south,y_48\/https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"fetch","resource_type":"image","transformation":[{"width":"320","height":"400","crop_mode":"fill","border":"1px_solid_gray"},{"overlay":"white-bar","width":"300","height":"90","gravity":"south","y":"10"},{"overlay":"text:Helvetica_14:VITAMIX 780 BLENDER >","gravity":"south","y":"48"}],"transformation_string":"w_320,h_400,c_fill,bo_1px_solid_gray\/l_white-bar,w_300,h_90,g_south,y_10\/l_text:Helvetica_14:VITAMIX 780 BLENDER >,g_south,y_48","url_suffix":"","version":"","secure":true,"public_id":"https:\/\/s3.amazonaws.com\/blog-images-origin\/blender.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

让我们再近点看这里发生的事情URL有两块密钥后台图像应是什么,表示用

'https://res.www.aaaalireno.com/demo/image/fetch/https://s3.amazonaws.com/blog-images-origin/cheese_knives.jpg'.

文本块应表示什么,表示L_text:Helvetica_14:ROSLECHEESEKNIVES.

所有其他参数定义图像大小、文本样式等

你可以读出我们所有飞像变换文档记录.

自己玩吧 使用部件构建自己的图像

仅修改图像url中的这两个参数允许你为苍蝇上的任何产品制作图像(或横幅/英雄图像/无论你能梦想到什么)。唯一需要做的就是跟踪上产品(或页面/类/粒子/etc)访问者浏览并动态替换图像URL中的值简单到最优化工具(maxymiser、最优化、Adobe目标)和甚至是标签管理系统(Ensighten、AdobedTM)

i个人化这里只有一个 URL连上传图片的工作都不用我做, 云型可自动拉动当前图片, 并按你认为合适的方式变换图像, 并用CDN全局安装`fetch'功能上例使用

同样的思想也可以应用到其他地区:网站横幅、创用邮件、显示广告以及管理网站所有资产(我们为这些资产做的工作)。千客)UI中还有WYSIWYG图像编辑器

云型自动将所有图像放入世界CDN超快性能上,同时图像质量优化和动态图像格式化以降低带宽并加速网站加载时间

云测试个性化程序可帮助你减少接触创举瓶颈,加速测试数并开通新可能性云形可动态调整图像和视频大小,叠加自定义文本和其他图像/视频,添加滤镜器,改变颜色,创建飞标等注册免费账号来.