跳转到内容

如何自动选择颜色贴图

写由Meir费因贝格

如何展示网站内容与内容本身同等重要图片显示需要与网站图形设计相匹配,每个图像需要与预定义大小相容简单到足以实现处理自己的图像时,任务在显示用户上传图像时可能更具挑战性。

用户可能上传图像 各种分辨率和尺寸即时调整图像以适应图形设计定义的现有空间上传图像宽度比与保留显示区不同时, 简单缩放将导致图像上下或左右增加空间并可能影响页面上其他元素的间距通常需要用CSS或变换原创图像并加贴贴板

简单图像搭建

问题变现后,你如何为图像添加外加嵌入板,使端结果适当匹配并看起来专业化?可简单判定加盖所有图像需要符合特定颜色,例如:白可使用CSS实现此目的,但云形化使进程更容易实现云端为图像媒体管理所有元素提供端对端综合解决方案,使网络应用开发商能够全心全意投注自网站或a添加嵌入云式特定颜色时使用贴板作物模式加后台参数设置为你想要的颜色举例说 贴板瓶子带白图像适配高度宽度300像素并加黑边框

<\/Image>","codeSnippet":" \n\t \n\t magesstative:'''''''''s's's's's's's's's's's's's's's's's's's's's's's's's's's's's's's's's <\/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(\"bottle.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .background(color(\"white\"))\n )\n .border(solid(2, \"black\"));","codeSnippet":"new CloudinaryImage(\"bottle.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .background(color(\"white\"))\n )\n .border(solid(2, \"black\"));","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(\"bottle.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .background(color(\"white\"))\n )\n .border(solid(2, \"black\"));","codeSnippet":"new CloudinaryImage(\"bottle.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .background(color(\"white\"))\n )\n .border(solid(2, \"black\"));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('bottle.jpg', {transformation: [ {width: 300, height: 300, background: \"white\", crop: \"pad\"}, {border: \"2px_solid_black\"} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('bottle.jpg', {transformation: [\n {width: 300, height: 300, background: \"white\", crop: \"pad\"},\n {border: \"2px_solid_black\"}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"bottle.jpg\").image(transformation=[ {'width': 300, 'height': 300, 'background': \"white\", 'crop': \"pad\"}, {'border': \"2px_solid_black\"} ])","codeSnippet":"CloudinaryImage(\"bottle.jpg\").image(transformation=[\n {'width': 300, 'height': 300, 'background': \"white\", 'crop': \"pad\"},\n {'border': \"2px_solid_black\"}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('bottle.jpg'))\n\t->resize(Resize::pad()->width(300)\n->height(300)\n\t->background(\n\tBackground::color(Color::WHITE))\n\t)\n\t->border(Border::solid(2,Color::BLACK));","codeSnippet":"(new ImageTag('bottle.jpg'))\n\t->resize(Resize::pad()->width(300)\n->height(300)\n\t->background(\n\tBackground::color(Color::WHITE))\n\t)\n\t->border(Border::solid(2,Color::BLACK));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"bottle.jpg\", array(\"transformation\"=>array( array(\"width\"=>300, \"height\"=>300, \"background\"=>\"white\", \"crop\"=>\"pad\"), array(\"border\"=>\"2px_solid_black\") )))","codeSnippet":"cl_image_tag(\"bottle.jpg\", array(\"transformation\"=>array(\n array(\"width\"=>300, \"height\"=>300, \"background\"=>\"white\", \"crop\"=>\"pad\"),\n array(\"border\"=>\"2px_solid_black\")\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).height(300).background(\"white\").crop(\"pad\").chain() .border(\"2px_solid_black\")).imageTag(\"bottle.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .width(300).height(300).background(\"white\").crop(\"pad\").chain()\n .border(\"2px_solid_black\")).imageTag(\"bottle.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"bottle.jpg\", :transformation=>[ {:width=>300, :height=>300, :background=>\"white\", :crop=>\"pad\"}, {:border=>\"2px_solid_black\"} ])","codeSnippet":"cl_image_tag(\"bottle.jpg\", :transformation=>[\n {:width=>300, :height=>300, :background=>\"white\", :crop=>\"pad\"},\n {:border=>\"2px_solid_black\"}\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).Height(300).Background(\"white\").Crop(\"pad\").Chain() .Border(\"2px_solid_black\")).BuildImageTag(\"bottle.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .Width(300).Height(300).Background(\"white\").Crop(\"pad\").Chain()\n .Border(\"2px_solid_black\")).BuildImageTag(\"bottle.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('bottle.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.color(Color.WHITE))\n\t)\n\t.border(Border.solid(2,Color.BLACK)));","codeSnippet":"cloudinary.image('bottle.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.color(Color.WHITE))\n\t)\n\t.border(Border.solid(2,Color.BLACK)));","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).setHeight(300).setBackground(\"white\").setCrop(\"pad\").chain() .setBorder(\"2px_solid_black\")).generate(\"bottle.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setWidth(300).setHeight(300).setBackground(\"white\").setCrop(\"pad\").chain()\n .setBorder(\"2px_solid_black\")).generate(\"bottle.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).height(300).background(\"white\").crop(\"pad\").chain() .border(\"2px_solid_black\")).generate(\"bottle.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .width(300).height(300).background(\"white\").crop(\"pad\").chain()\n .border(\"2px_solid_black\")).generate(\"bottle.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('bottle.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.color(Color.WHITE))\n\t)\n\t.border(Border.solid(2,Color.BLACK)));","codeSnippet":"cloudinary.image('bottle.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.color(Color.WHITE))\n\t)\n\t.border(Border.solid(2,Color.BLACK)));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"bottle.jpg\")\n\t resize(Resize.pad() { width(300)\n height(300)\n\t background(\n\tBackground.color(Color.WHITE))\n\t })\n\t border(Border.solid(2,Color.BLACK)) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"bottle.jpg\")\n\t resize(Resize.pad() { width(300)\n height(300)\n\t background(\n\tBackground.color(Color.WHITE))\n\t })\n\t border(Border.solid(2,Color.BLACK)) \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(\"bottle.jpg\", {transformation: [ {width: 300, height: 300, background: \"white\", crop: \"pad\"}, {border: \"2px_solid_black\"} ]})","codeSnippet":"$.cloudinary.image(\"bottle.jpg\", {transformation: [\n {width: 300, height: 300, background: \"white\", crop: \"pad\"},\n {border: \"2px_solid_black\"}\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(\"bottle.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .background(color(\"white\"))\n )\n .border(solid(2, \"black\"));","codeSnippet":"new CloudinaryImage(\"bottle.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .background(color(\"white\"))\n )\n .border(solid(2, \"black\"));","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,h_300,c_pad,b_white\/bo_2px_solid_black\/bottle.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"width":"300","height":"300","crop_mode":"pad","background":"white"},{"border":"2px_solid_black"}],"transformation_string":"w_300,h_300,c_pad,b_white\/bo_2px_solid_black","url_suffix":"","version":"","secure":true,"public_id":"bottle.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例 图片白板

自动色板

设置所有嵌入式划线颜色可能是一些图像的好解决办法,但如果你可自动设置基于图像边框像素颜色的嵌入式划线颜色呢?所加任何贴板都会产生扩展图像画布的效果, 并使它看起来仿佛加插区实际上是图像本身的一部分猜怎么着云化也使问题简单化所有你需要做的设置后台参数切换汽车高山市b_aut内URLs)举个例子,这里相同瓶子图像上方,但现在带自动色板

<\/Image>","codeSnippet":" \n\t \n\t magesstative:''''''''s's's's's <\/cld-image>","codeSnippet":" \n\t \n\t sdklations:sqlocke <\/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(\"bottle.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n )\n .border(solid(2, \"black\"));","codeSnippet":"new CloudinaryImage(\"bottle.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n )\n .border(solid(2, \"black\"));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('bottle.jpg', {transformation: [ {width: 300, height: 300, background: \"auto\", crop: \"pad\"}, {border: \"2px_solid_black\"} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('bottle.jpg', {transformation: [\n {width: 300, height: 300, background: \"auto\", crop: \"pad\"},\n {border: \"2px_solid_black\"}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"bottle.jpg\").image(transformation=[ {'width': 300, 'height': 300, 'background': \"auto\", 'crop': \"pad\"}, {'border': \"2px_solid_black\"} ])","codeSnippet":"CloudinaryImage(\"bottle.jpg\").image(transformation=[\n {'width': 300, 'height': 300, 'background': \"auto\", 'crop': \"pad\"},\n {'border': \"2px_solid_black\"}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('bottle.jpg'))\n\t->resize(Resize::pad()->width(300)\n->height(300)\n\t->background(\n\tBackground::auto())\n\t)\n\t->border(Border::solid(2,Color::BLACK));","codeSnippet":"(new ImageTag('bottle.jpg'))\n\t->resize(Resize::pad()->width(300)\n->height(300)\n\t->background(\n\tBackground::auto())\n\t)\n\t->border(Border::solid(2,Color::BLACK));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"bottle.jpg\", array(\"transformation\"=>array( array(\"width\"=>300, \"height\"=>300, \"background\"=>\"auto\", \"crop\"=>\"pad\"), array(\"border\"=>\"2px_solid_black\") )))","codeSnippet":"cl_image_tag(\"bottle.jpg\", array(\"transformation\"=>array(\n array(\"width\"=>300, \"height\"=>300, \"background\"=>\"auto\", \"crop\"=>\"pad\"),\n array(\"border\"=>\"2px_solid_black\")\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).height(300).background(\"auto\").crop(\"pad\").chain() .border(\"2px_solid_black\")).imageTag(\"bottle.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .width(300).height(300).background(\"auto\").crop(\"pad\").chain()\n .border(\"2px_solid_black\")).imageTag(\"bottle.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"bottle.jpg\", :transformation=>[ {:width=>300, :height=>300, :background=>\"auto\", :crop=>\"pad\"}, {:border=>\"2px_solid_black\"} ])","codeSnippet":"cl_image_tag(\"bottle.jpg\", :transformation=>[\n {:width=>300, :height=>300, :background=>\"auto\", :crop=>\"pad\"},\n {:border=>\"2px_solid_black\"}\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).Height(300).Background(\"auto\").Crop(\"pad\").Chain() .Border(\"2px_solid_black\")).BuildImageTag(\"bottle.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .Width(300).Height(300).Background(\"auto\").Crop(\"pad\").Chain()\n .Border(\"2px_solid_black\")).BuildImageTag(\"bottle.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('bottle.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.auto())\n\t)\n\t.border(Border.solid(2,Color.BLACK)));","codeSnippet":"cloudinary.image('bottle.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.auto())\n\t)\n\t.border(Border.solid(2,Color.BLACK)));","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).setHeight(300).setBackground(\"auto\").setCrop(\"pad\").chain() .setBorder(\"2px_solid_black\")).generate(\"bottle.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setWidth(300).setHeight(300).setBackground(\"auto\").setCrop(\"pad\").chain()\n .setBorder(\"2px_solid_black\")).generate(\"bottle.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).height(300).background(\"auto\").crop(\"pad\").chain() .border(\"2px_solid_black\")).generate(\"bottle.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .width(300).height(300).background(\"auto\").crop(\"pad\").chain()\n .border(\"2px_solid_black\")).generate(\"bottle.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('bottle.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.auto())\n\t)\n\t.border(Border.solid(2,Color.BLACK)));","codeSnippet":"cloudinary.image('bottle.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.auto())\n\t)\n\t.border(Border.solid(2,Color.BLACK)));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"bottle.jpg\")\n\t resize(Resize.pad() { width(300)\n height(300)\n\t background(\n\tBackground.auto())\n\t })\n\t border(Border.solid(2,Color.BLACK)) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"bottle.jpg\")\n\t resize(Resize.pad() { width(300)\n height(300)\n\t background(\n\tBackground.auto())\n\t })\n\t border(Border.solid(2,Color.BLACK)) \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(\"bottle.jpg\", {transformation: [ {width: 300, height: 300, background: \"auto\", crop: \"pad\"}, {border: \"2px_solid_black\"} ]})","codeSnippet":"$.cloudinary.image(\"bottle.jpg\", {transformation: [\n {width: 300, height: 300, background: \"auto\", crop: \"pad\"},\n {border: \"2px_solid_black\"}\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(\"bottle.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n )\n .border(solid(2, \"black\"));","codeSnippet":"new CloudinaryImage(\"bottle.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n )\n .border(solid(2, \"black\"));","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,h_300,c_pad,b_auto\/bo_2px_solid_black\/bottle.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"width":"300","height":"300","crop_mode":"pad","background":"auto"},{"border":"2px_solid_black"}],"transformation_string":"w_300,h_300,c_pad,b_auto\/bo_2px_solid_black","url_suffix":"","version":"","secure":true,"public_id":"bottle.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例 图像加固后台和自动色板

还有一个例子突出使用值之差黑市左侧图像嵌入汽车右侧颜色布局

带固背景和黑板相片带固背景和自动色板相片
<\/Image>","codeSnippet":" \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(\"white_sweater.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n);","codeSnippet":"new CloudinaryImage(\"white_sweater.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\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<\/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(\"white_sweater.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n);","codeSnippet":"new CloudinaryImage(\"white_sweater.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n);","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-image>","codeSnippet":" \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(\"white_sweater.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n);","codeSnippet":"new CloudinaryImage(\"white_sweater.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n);","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('white_sweater.jpg', {width: 300, height: 300, background: \"auto\", crop: \"pad\"}).toHtml();","codeSnippet":"cloudinary.imageTag('white_sweater.jpg', {width: 300, height: 300, background: \"auto\", crop: \"pad\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"white_sweater.jpg\").image(width=300, height=300, background=\"auto\", crop=\"pad\")","codeSnippet":"CloudinaryImage(\"white_sweater.jpg\").image(width=300, height=300, background=\"auto\", crop=\"pad\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('white_sweater.jpg'))\n\t->resize(Resize::pad()->width(300)\n->height(300)\n\t->background(\n\tBackground::auto())\n\t);","codeSnippet":"(new ImageTag('white_sweater.jpg'))\n\t->resize(Resize::pad()->width(300)\n->height(300)\n\t->background(\n\tBackground::auto())\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(\"white_sweater.jpg\", array(\"width\"=>300, \"height\"=>300, \"background\"=>\"auto\", \"crop\"=>\"pad\"))","codeSnippet":"cl_image_tag(\"white_sweater.jpg\", array(\"width\"=>300, \"height\"=>300, \"background\"=>\"auto\", \"crop\"=>\"pad\"))","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).height(300).background(\"auto\").crop(\"pad\")).imageTag(\"white_sweater.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().width(300).height(300).background(\"auto\").crop(\"pad\")).imageTag(\"white_sweater.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"white_sweater.jpg\", :width=>300, :height=>300, :background=>\"auto\", :crop=>\"pad\")","codeSnippet":"cl_image_tag(\"white_sweater.jpg\", :width=>300, :height=>300, :background=>\"auto\", :crop=>\"pad\")","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).Height(300).Background(\"auto\").Crop(\"pad\")).BuildImageTag(\"white_sweater.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Height(300).Background(\"auto\").Crop(\"pad\")).BuildImageTag(\"white_sweater.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('white_sweater.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.auto())\n\t));","codeSnippet":"cloudinary.image('white_sweater.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.auto())\n\t));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setHeight(300).setBackground(\"auto\").setCrop(\"pad\")).generate(\"white_sweater.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setHeight(300).setBackground(\"auto\").setCrop(\"pad\")).generate(\"white_sweater.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).height(300).background(\"auto\").crop(\"pad\")).generate(\"white_sweater.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().width(300).height(300).background(\"auto\").crop(\"pad\")).generate(\"white_sweater.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('white_sweater.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.auto())\n\t));","codeSnippet":"cloudinary.image('white_sweater.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.auto())\n\t));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"white_sweater.jpg\")\n\t resize(Resize.pad() { width(300)\n height(300)\n\t background(\n\tBackground.auto())\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"white_sweater.jpg\")\n\t resize(Resize.pad() { width(300)\n height(300)\n\t background(\n\tBackground.auto())\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(\"white_sweater.jpg\", {width: 300, height: 300, background: \"auto\", crop: \"pad\"})","codeSnippet":"$.cloudinary.image(\"white_sweater.jpg\", {width: 300, height: 300, background: \"auto\", crop: \"pad\"})","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(\"white_sweater.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n);","codeSnippet":"new CloudinaryImage(\"white_sweater.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\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,h_300,c_pad,b_auto\/white_sweater.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"width":"300","height":"300","crop_mode":"pad","background":"auto"}],"transformation_string":"w_300,h_300,c_pad,b_auto","url_suffix":"","version":"","secure":true,"public_id":"white_sweater.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例 样本图像使用作物、面部检测、圆角和大小特征

自动选择布局颜色对带固背景颜色的图像来说是一个大解法,但它也为没有固背景颜色的图像提供良好结果举个例子看一看狗狗带自动色板图像

<\/Image>","codeSnippet":" \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(\"dog.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n);","codeSnippet":"new CloudinaryImage(\"dog.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\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<\/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(\"dog.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n);","codeSnippet":"new CloudinaryImage(\"dog.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n);","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-image>","codeSnippet":" \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(\"dog.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n);","codeSnippet":"new CloudinaryImage(\"dog.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n);","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('dog.jpg', {width: 300, height: 300, background: \"auto\", crop: \"pad\"}).toHtml();","codeSnippet":"cloudinary.imageTag('dog.jpg', {width: 300, height: 300, background: \"auto\", crop: \"pad\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"dog.jpg\").image(width=300, height=300, background=\"auto\", crop=\"pad\")","codeSnippet":"CloudinaryImage(\"dog.jpg\").image(width=300, height=300, background=\"auto\", crop=\"pad\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('dog.jpg'))\n\t->resize(Resize::pad()->width(300)\n->height(300)\n\t->background(\n\tBackground::auto())\n\t);","codeSnippet":"(new ImageTag('dog.jpg'))\n\t->resize(Resize::pad()->width(300)\n->height(300)\n\t->background(\n\tBackground::auto())\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(\"dog.jpg\", array(\"width\"=>300, \"height\"=>300, \"background\"=>\"auto\", \"crop\"=>\"pad\"))","codeSnippet":"cl_image_tag(\"dog.jpg\", array(\"width\"=>300, \"height\"=>300, \"background\"=>\"auto\", \"crop\"=>\"pad\"))","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).height(300).background(\"auto\").crop(\"pad\")).imageTag(\"dog.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().width(300).height(300).background(\"auto\").crop(\"pad\")).imageTag(\"dog.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"dog.jpg\", :width=>300, :height=>300, :background=>\"auto\", :crop=>\"pad\")","codeSnippet":"cl_image_tag(\"dog.jpg\", :width=>300, :height=>300, :background=>\"auto\", :crop=>\"pad\")","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).Height(300).Background(\"auto\").Crop(\"pad\")).BuildImageTag(\"dog.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Height(300).Background(\"auto\").Crop(\"pad\")).BuildImageTag(\"dog.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('dog.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.auto())\n\t));","codeSnippet":"cloudinary.image('dog.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.auto())\n\t));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setHeight(300).setBackground(\"auto\").setCrop(\"pad\")).generate(\"dog.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setHeight(300).setBackground(\"auto\").setCrop(\"pad\")).generate(\"dog.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).height(300).background(\"auto\").crop(\"pad\")).generate(\"dog.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().width(300).height(300).background(\"auto\").crop(\"pad\")).generate(\"dog.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('dog.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.auto())\n\t));","codeSnippet":"cloudinary.image('dog.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.auto())\n\t));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"dog.jpg\")\n\t resize(Resize.pad() { width(300)\n height(300)\n\t background(\n\tBackground.auto())\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"dog.jpg\")\n\t resize(Resize.pad() { width(300)\n height(300)\n\t background(\n\tBackground.auto())\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(\"dog.jpg\", {width: 300, height: 300, background: \"auto\", crop: \"pad\"})","codeSnippet":"$.cloudinary.image(\"dog.jpg\", {width: 300, height: 300, background: \"auto\", crop: \"pad\"})","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(\"dog.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n);","codeSnippet":"new CloudinaryImage(\"dog.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\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,h_300,c_pad,b_auto\/dog.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"width":"300","height":"300","crop_mode":"pad","background":"auto"}],"transformation_string":"w_300,h_300,c_pad,b_auto","url_suffix":"","version":"","secure":true,"public_id":"dog.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例 图像带背景色和自动色板

将图像淡入嵌入板

从上例中可以看出,主色计算成绿色树影,产生视觉美化加插图像图像和边界间跳转可能感觉有些暗淡,但我们通过应用可淡出图片梯度淡出带值效果对称程序高山市e_gradient_fade:symmetric_pad内URLs)举个例子 相同狗狗图像像上方,但现在图像淡入嵌入板

<\/Image>","codeSnippet":" \n\t sqlationsStatusion:'squote2's.'sqouri <\/cld-image>","codeSnippet":" \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(\"dog.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n )\n .effect(gradientFade().type(symmetricPad()));","codeSnippet":"new CloudinaryImage(\"dog.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n )\n .effect(gradientFade().type(symmetricPad()));","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-image>","codeSnippet":" \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(\"dog.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n )\n .effect(gradientFade().type(symmetricPad()));","codeSnippet":"new CloudinaryImage(\"dog.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n )\n .effect(gradientFade().type(symmetricPad()));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('dog.jpg', {width: 300, height: 300, background: \"auto\", effect: \"gradient_fade:symmetric_pad\", crop: \"pad\"}).toHtml();","codeSnippet":"cloudinary.imageTag('dog.jpg', {width: 300, height: 300, background: \"auto\", effect: \"gradient_fade:symmetric_pad\", crop: \"pad\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"dog.jpg\").image(width=300, height=300, background=\"auto\", effect=\"gradient_fade:symmetric_pad\", crop=\"pad\")","codeSnippet":"CloudinaryImage(\"dog.jpg\").image(width=300, height=300, background=\"auto\", effect=\"gradient_fade:symmetric_pad\", crop=\"pad\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('dog.jpg'))\n\t->resize(Resize::pad()->width(300)\n->height(300)\n\t->background(\n\tBackground::auto())\n\t)\n\t->effect(Effect::gradientFade()\n\t->type(\n\tGradientFade::symmetricPad())\n\t);","codeSnippet":"(new ImageTag('dog.jpg'))\n\t->resize(Resize::pad()->width(300)\n->height(300)\n\t->background(\n\tBackground::auto())\n\t)\n\t->effect(Effect::gradientFade()\n\t->type(\n\tGradientFade::symmetricPad())\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(\"dog.jpg\", array(\"width\"=>300, \"height\"=>300, \"background\"=>\"auto\", \"effect\"=>\"gradient_fade:symmetric_pad\", \"crop\"=>\"pad\"))","codeSnippet":"cl_image_tag(\"dog.jpg\", array(\"width\"=>300, \"height\"=>300, \"background\"=>\"auto\", \"effect\"=>\"gradient_fade:symmetric_pad\", \"crop\"=>\"pad\"))","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).height(300).background(\"auto\").effect(\"gradient_fade:symmetric_pad\").crop(\"pad\")).imageTag(\"dog.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().width(300).height(300).background(\"auto\").effect(\"gradient_fade:symmetric_pad\").crop(\"pad\")).imageTag(\"dog.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"dog.jpg\", :width=>300, :height=>300, :background=>\"auto\", :effect=>\"gradient_fade:symmetric_pad\", :crop=>\"pad\")","codeSnippet":"cl_image_tag(\"dog.jpg\", :width=>300, :height=>300, :background=>\"auto\", :effect=>\"gradient_fade:symmetric_pad\", :crop=>\"pad\")","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).Height(300).Background(\"auto\").Effect(\"gradient_fade:symmetric_pad\").Crop(\"pad\")).BuildImageTag(\"dog.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Height(300).Background(\"auto\").Effect(\"gradient_fade:symmetric_pad\").Crop(\"pad\")).BuildImageTag(\"dog.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('dog.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.auto())\n\t)\n\t.effect(Effect.gradientFade()\n\t.type(\n\tGradientFade.symmetricPad())\n\t));","codeSnippet":"cloudinary.image('dog.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.auto())\n\t)\n\t.effect(Effect.gradientFade()\n\t.type(\n\tGradientFade.symmetricPad())\n\t));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setHeight(300).setBackground(\"auto\").setEffect(\"gradient_fade:symmetric_pad\").setCrop(\"pad\")).generate(\"dog.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setHeight(300).setBackground(\"auto\").setEffect(\"gradient_fade:symmetric_pad\").setCrop(\"pad\")).generate(\"dog.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).height(300).background(\"auto\").effect(\"gradient_fade:symmetric_pad\").crop(\"pad\")).generate(\"dog.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().width(300).height(300).background(\"auto\").effect(\"gradient_fade:symmetric_pad\").crop(\"pad\")).generate(\"dog.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('dog.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.auto())\n\t)\n\t.effect(Effect.gradientFade()\n\t.type(\n\tGradientFade.symmetricPad())\n\t));","codeSnippet":"cloudinary.image('dog.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.auto())\n\t)\n\t.effect(Effect.gradientFade()\n\t.type(\n\tGradientFade.symmetricPad())\n\t));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"dog.jpg\")\n\t resize(Resize.pad() { width(300)\n height(300)\n\t background(\n\tBackground.auto())\n\t })\n\t effect(Effect.gradientFade() {\n\t type(\n\tGradientFade.symmetricPad())\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"dog.jpg\")\n\t resize(Resize.pad() { width(300)\n height(300)\n\t background(\n\tBackground.auto())\n\t })\n\t effect(Effect.gradientFade() {\n\t type(\n\tGradientFade.symmetricPad())\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(\"dog.jpg\", {width: 300, height: 300, background: \"auto\", effect: \"gradient_fade:symmetric_pad\", crop: \"pad\"})","codeSnippet":"$.cloudinary.image(\"dog.jpg\", {width: 300, height: 300, background: \"auto\", effect: \"gradient_fade:symmetric_pad\", crop: \"pad\"})","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(\"dog.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n )\n .effect(gradientFade().type(symmetricPad()));","codeSnippet":"new CloudinaryImage(\"dog.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .background(auto())\n )\n .effect(gradientFade().type(symmetricPad()));","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,h_300,c_pad,b_auto,e_gradient_fade:symmetric_pad\/dog.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"width":"300","height":"300","crop_mode":"pad","background":"auto","effect":"gradient_fade:symmetric_pad"}],"transformation_string":"w_300,h_300,c_pad,b_auto,e_gradient_fade:symmetric_pad","url_suffix":"","version":"","secure":true,"public_id":"dog.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例 图像渐变换成自动色板

添加淡化效果可控制图像多维X级参数表示淡化区域宽度像素举个例子 相同狗狗图像上方,但现在只有50像素宽度淡入嵌入板

<\/Image>","codeSnippet":" \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(\"dog.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .offsetX(50)\n .background(auto())\n )\n .effect(gradientFade().type(symmetricPad()));","codeSnippet":"new CloudinaryImage(\"dog.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .offsetX(50)\n .background(auto())\n )\n .effect(gradientFade().type(symmetricPad()));","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<\/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(\"dog.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .offsetX(50)\n .background(auto())\n )\n .effect(gradientFade().type(symmetricPad()));","codeSnippet":"new CloudinaryImage(\"dog.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .offsetX(50)\n .background(auto())\n )\n .effect(gradientFade().type(symmetricPad()));","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-image>","codeSnippet":" \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(\"dog.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .offsetX(50)\n .background(auto())\n )\n .effect(gradientFade().type(symmetricPad()));","codeSnippet":"new CloudinaryImage(\"dog.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .offsetX(50)\n .background(auto())\n )\n .effect(gradientFade().type(symmetricPad()));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('dog.jpg', {width: 300, height: 300, background: \"auto\", effect: \"gradient_fade:symmetric_pad\", x: 50, crop: \"pad\"}).toHtml();","codeSnippet":"cloudinary.imageTag('dog.jpg', {width: 300, height: 300, background: \"auto\", effect: \"gradient_fade:symmetric_pad\", x: 50, crop: \"pad\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"dog.jpg\").image(width=300, height=300, background=\"auto\", effect=\"gradient_fade:symmetric_pad\", x=50, crop=\"pad\")","codeSnippet":"CloudinaryImage(\"dog.jpg\").image(width=300, height=300, background=\"auto\", effect=\"gradient_fade:symmetric_pad\", x=50, crop=\"pad\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('dog.jpg'))\n\t->resize(Resize::pad()->width(300)\n->height(300)\n->offsetX(50)\n\t->background(\n\tBackground::auto())\n\t)\n\t->effect(Effect::gradientFade()\n\t->type(\n\tGradientFade::symmetricPad())\n\t);","codeSnippet":"(new ImageTag('dog.jpg'))\n\t->resize(Resize::pad()->width(300)\n->height(300)\n->offsetX(50)\n\t->background(\n\tBackground::auto())\n\t)\n\t->effect(Effect::gradientFade()\n\t->type(\n\tGradientFade::symmetricPad())\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(\"dog.jpg\", array(\"width\"=>300, \"height\"=>300, \"background\"=>\"auto\", \"effect\"=>\"gradient_fade:symmetric_pad\", \"x\"=>50, \"crop\"=>\"pad\"))","codeSnippet":"cl_image_tag(\"dog.jpg\", array(\"width\"=>300, \"height\"=>300, \"background\"=>\"auto\", \"effect\"=>\"gradient_fade:symmetric_pad\", \"x\"=>50, \"crop\"=>\"pad\"))","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).height(300).background(\"auto\").effect(\"gradient_fade:symmetric_pad\").x(50).crop(\"pad\")).imageTag(\"dog.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().width(300).height(300).background(\"auto\").effect(\"gradient_fade:symmetric_pad\").x(50).crop(\"pad\")).imageTag(\"dog.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"dog.jpg\", :width=>300, :height=>300, :background=>\"auto\", :effect=>\"gradient_fade:symmetric_pad\", :x=>50, :crop=>\"pad\")","codeSnippet":"cl_image_tag(\"dog.jpg\", :width=>300, :height=>300, :background=>\"auto\", :effect=>\"gradient_fade:symmetric_pad\", :x=>50, :crop=>\"pad\")","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).Height(300).Background(\"auto\").Effect(\"gradient_fade:symmetric_pad\").X(50).Crop(\"pad\")).BuildImageTag(\"dog.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Height(300).Background(\"auto\").Effect(\"gradient_fade:symmetric_pad\").X(50).Crop(\"pad\")).BuildImageTag(\"dog.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('dog.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n.offsetX(50)\n\t.background(\n\tBackground.auto())\n\t)\n\t.effect(Effect.gradientFade()\n\t.type(\n\tGradientFade.symmetricPad())\n\t));","codeSnippet":"cloudinary.image('dog.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n.offsetX(50)\n\t.background(\n\tBackground.auto())\n\t)\n\t.effect(Effect.gradientFade()\n\t.type(\n\tGradientFade.symmetricPad())\n\t));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setHeight(300).setBackground(\"auto\").setEffect(\"gradient_fade:symmetric_pad\").setX(50).setCrop(\"pad\")).generate(\"dog.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setHeight(300).setBackground(\"auto\").setEffect(\"gradient_fade:symmetric_pad\").setX(50).setCrop(\"pad\")).generate(\"dog.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).height(300).background(\"auto\").effect(\"gradient_fade:symmetric_pad\").x(50).crop(\"pad\")).generate(\"dog.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().width(300).height(300).background(\"auto\").effect(\"gradient_fade:symmetric_pad\").x(50).crop(\"pad\")).generate(\"dog.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('dog.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n.offsetX(50)\n\t.background(\n\tBackground.auto())\n\t)\n\t.effect(Effect.gradientFade()\n\t.type(\n\tGradientFade.symmetricPad())\n\t));","codeSnippet":"cloudinary.image('dog.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n.offsetX(50)\n\t.background(\n\tBackground.auto())\n\t)\n\t.effect(Effect.gradientFade()\n\t.type(\n\tGradientFade.symmetricPad())\n\t));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"dog.jpg\")\n\t resize(Resize.pad() { width(300)\n height(300)\n offsetX(50)\n\t background(\n\tBackground.auto())\n\t })\n\t effect(Effect.gradientFade() {\n\t type(\n\tGradientFade.symmetricPad())\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"dog.jpg\")\n\t resize(Resize.pad() { width(300)\n height(300)\n offsetX(50)\n\t background(\n\tBackground.auto())\n\t })\n\t effect(Effect.gradientFade() {\n\t type(\n\tGradientFade.symmetricPad())\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(\"dog.jpg\", {width: 300, height: 300, background: \"auto\", effect: \"gradient_fade:symmetric_pad\", x: 50, crop: \"pad\"})","codeSnippet":"$.cloudinary.image(\"dog.jpg\", {width: 300, height: 300, background: \"auto\", effect: \"gradient_fade:symmetric_pad\", x: 50, crop: \"pad\"})","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(\"dog.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .offsetX(50)\n .background(auto())\n )\n .effect(gradientFade().type(symmetricPad()));","codeSnippet":"new CloudinaryImage(\"dog.jpg\")\n .resize(\n pad()\n .width(300)\n .height(300)\n .offsetX(50)\n .background(auto())\n )\n .effect(gradientFade().type(symmetricPad()));","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,h_300,c_pad,b_auto,e_gradient_fade:symmetric_pad,x_50\/dog.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"width":"300","height":"300","crop_mode":"pad","background":"auto","effect":"gradient_fade:symmetric_pad","x":"50"}],"transformation_string":"w_300,h_300,c_pad,b_auto,e_gradient_fade:symmetric_pad,x_50","url_suffix":"","version":"","secure":true,"public_id":"dog.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例 图像50像素宽度淡入自动色板

多铺设选项

文章示例中有一些最常使用贴板选项,但您可以用多种方式微调贴板方式加法下示例试探通过调值可实现何b_aut参数 :

  • 选择全图像或仅边框像素主色
b_aut:边界b_aut:边界 b_auto:predominantb_auto:predominant

<\/Image>","codeSnippet":" \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(\"beach_huts.jpg\").resize(\n pad()\n .width(200)\n .height(200)\n .background(predominant())\n);","codeSnippet":"new CloudinaryImage(\"beach_huts.jpg\").resize(\n pad()\n .width(200)\n .height(200)\n .background(predominant())\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<\/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(\"beach_huts.jpg\").resize(\n pad()\n .width(200)\n .height(200)\n .background(predominant())\n);","codeSnippet":"new CloudinaryImage(\"beach_huts.jpg\").resize(\n pad()\n .width(200)\n .height(200)\n .background(predominant())\n);","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-image>","codeSnippet":" \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(\"beach_huts.jpg\").resize(\n pad()\n .width(200)\n .height(200)\n .background(predominant())\n);","codeSnippet":"new CloudinaryImage(\"beach_huts.jpg\").resize(\n pad()\n .width(200)\n .height(200)\n .background(predominant())\n);","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('beach_huts.jpg', {height: 200, width: 200, background: \"auto:predominant\", crop: \"pad\"}).toHtml();","codeSnippet":"cloudinary.imageTag('beach_huts.jpg', {height: 200, width: 200, background: \"auto:predominant\", crop: \"pad\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"beach_huts.jpg\").image(height=200, width=200, background=\"auto:predominant\", crop=\"pad\")","codeSnippet":"CloudinaryImage(\"beach_huts.jpg\").image(height=200, width=200, background=\"auto:predominant\", crop=\"pad\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('beach_huts.jpg'))\n\t->resize(Resize::pad()->width(200)\n->height(200)\n\t->background(\n\tBackground::predominant())\n\t);","codeSnippet":"(new ImageTag('beach_huts.jpg'))\n\t->resize(Resize::pad()->width(200)\n->height(200)\n\t->background(\n\tBackground::predominant())\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(\"beach_huts.jpg\", array(\"height\"=>200, \"width\"=>200, \"background\"=>\"auto:predominant\", \"crop\"=>\"pad\"))","codeSnippet":"cl_image_tag(\"beach_huts.jpg\", array(\"height\"=>200, \"width\"=>200, \"background\"=>\"auto:predominant\", \"crop\"=>\"pad\"))","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().height(200).width(200).background(\"auto:predominant\").crop(\"pad\")).imageTag(\"beach_huts.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().height(200).width(200).background(\"auto:predominant\").crop(\"pad\")).imageTag(\"beach_huts.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"beach_huts.jpg\", :height=>200, :width=>200, :background=>\"auto:predominant\", :crop=>\"pad\")","codeSnippet":"cl_image_tag(\"beach_huts.jpg\", :height=>200, :width=>200, :background=>\"auto:predominant\", :crop=>\"pad\")","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().Height(200).Width(200).Background(\"auto:predominant\").Crop(\"pad\")).BuildImageTag(\"beach_huts.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(200).Width(200).Background(\"auto:predominant\").Crop(\"pad\")).BuildImageTag(\"beach_huts.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('beach_huts.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(200)\n.height(200)\n\t.background(\n\tBackground.predominant())\n\t));","codeSnippet":"cloudinary.image('beach_huts.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(200)\n.height(200)\n\t.background(\n\tBackground.predominant())\n\t));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(200).setWidth(200).setBackground(\"auto:predominant\").setCrop(\"pad\")).generate(\"beach_huts.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(200).setWidth(200).setBackground(\"auto:predominant\").setCrop(\"pad\")).generate(\"beach_huts.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().height(200).width(200).background(\"auto:predominant\").crop(\"pad\")).generate(\"beach_huts.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().height(200).width(200).background(\"auto:predominant\").crop(\"pad\")).generate(\"beach_huts.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('beach_huts.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(200)\n.height(200)\n\t.background(\n\tBackground.predominant())\n\t));","codeSnippet":"cloudinary.image('beach_huts.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(200)\n.height(200)\n\t.background(\n\tBackground.predominant())\n\t));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"beach_huts.jpg\")\n\t resize(Resize.pad() { width(200)\n height(200)\n\t background(\n\tBackground.predominant())\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"beach_huts.jpg\")\n\t resize(Resize.pad() { width(200)\n height(200)\n\t background(\n\tBackground.predominant())\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(\"beach_huts.jpg\", {height: 200, width: 200, background: \"auto:predominant\", crop: \"pad\"})","codeSnippet":"$.cloudinary.image(\"beach_huts.jpg\", {height: 200, width: 200, background: \"auto:predominant\", crop: \"pad\"})","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(\"beach_huts.jpg\").resize(\n pad()\n .width(200)\n .height(200)\n .background(predominant())\n);","codeSnippet":"new CloudinaryImage(\"beach_huts.jpg\").resize(\n pad()\n .width(200)\n .height(200)\n .background(predominant())\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\/h_200,w_200,c_pad,b_auto:predominant\/beach_huts.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"height":"200","width":"200","crop_mode":"pad","background":"auto:predominant"}],"transformation_string":"h_200,w_200,c_pad,b_auto:predominant","url_suffix":"","version":"","secure":true,"public_id":"beach_huts.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例 支配式对比

  • 带最强对比色与主色
b_auto:predominantb_auto:predominant b_auto:predominant_contrastb_auto:predominant_contrast

<\/Image>","codeSnippet":" \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(\"painter_scene.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(predominant().contrast())\n);","codeSnippet":"new CloudinaryImage(\"painter_scene.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(predominant().contrast())\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<\/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(\"painter_scene.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(predominant().contrast())\n);","codeSnippet":"new CloudinaryImage(\"painter_scene.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(predominant().contrast())\n);","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-image>","codeSnippet":" \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(\"painter_scene.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(predominant().contrast())\n);","codeSnippet":"new CloudinaryImage(\"painter_scene.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(predominant().contrast())\n);","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('painter_scene.jpg', {height: 300, width: 300, background: \"auto:predominant_contrast\", crop: \"pad\"}).toHtml();","codeSnippet":"cloudinary.imageTag('painter_scene.jpg', {height: 300, width: 300, background: \"auto:predominant_contrast\", crop: \"pad\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"painter_scene.jpg\").image(height=300, width=300, background=\"auto:predominant_contrast\", crop=\"pad\")","codeSnippet":"CloudinaryImage(\"painter_scene.jpg\").image(height=300, width=300, background=\"auto:predominant_contrast\", crop=\"pad\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('painter_scene.jpg'))\n\t->resize(Resize::pad()->width(300)\n->height(300)\n\t->background(\n\tBackground::predominant()\n\t->contrast()\n\t)\n\t);","codeSnippet":"(new ImageTag('painter_scene.jpg'))\n\t->resize(Resize::pad()->width(300)\n->height(300)\n\t->background(\n\tBackground::predominant()\n\t->contrast()\n\t)\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(\"painter_scene.jpg\", array(\"height\"=>300, \"width\"=>300, \"background\"=>\"auto:predominant_contrast\", \"crop\"=>\"pad\"))","codeSnippet":"cl_image_tag(\"painter_scene.jpg\", array(\"height\"=>300, \"width\"=>300, \"background\"=>\"auto:predominant_contrast\", \"crop\"=>\"pad\"))","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().height(300).width(300).background(\"auto:predominant_contrast\").crop(\"pad\")).imageTag(\"painter_scene.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().height(300).width(300).background(\"auto:predominant_contrast\").crop(\"pad\")).imageTag(\"painter_scene.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"painter_scene.jpg\", :height=>300, :width=>300, :background=>\"auto:predominant_contrast\", :crop=>\"pad\")","codeSnippet":"cl_image_tag(\"painter_scene.jpg\", :height=>300, :width=>300, :background=>\"auto:predominant_contrast\", :crop=>\"pad\")","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().Height(300).Width(300).Background(\"auto:predominant_contrast\").Crop(\"pad\")).BuildImageTag(\"painter_scene.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(300).Width(300).Background(\"auto:predominant_contrast\").Crop(\"pad\")).BuildImageTag(\"painter_scene.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('painter_scene.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.predominant()\n\t.contrast()\n\t)\n\t));","codeSnippet":"cloudinary.image('painter_scene.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.predominant()\n\t.contrast()\n\t)\n\t));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(300).setWidth(300).setBackground(\"auto:predominant_contrast\").setCrop(\"pad\")).generate(\"painter_scene.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(300).setWidth(300).setBackground(\"auto:predominant_contrast\").setCrop(\"pad\")).generate(\"painter_scene.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().height(300).width(300).background(\"auto:predominant_contrast\").crop(\"pad\")).generate(\"painter_scene.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().height(300).width(300).background(\"auto:predominant_contrast\").crop(\"pad\")).generate(\"painter_scene.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('painter_scene.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.predominant()\n\t.contrast()\n\t)\n\t));","codeSnippet":"cloudinary.image('painter_scene.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.predominant()\n\t.contrast()\n\t)\n\t));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"painter_scene.jpg\")\n\t resize(Resize.pad() { width(300)\n height(300)\n\t background(\n\tBackground.predominant() {\n\t contrast()\n\t })\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"painter_scene.jpg\")\n\t resize(Resize.pad() { width(300)\n height(300)\n\t background(\n\tBackground.predominant() {\n\t contrast()\n\t })\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(\"painter_scene.jpg\", {height: 300, width: 300, background: \"auto:predominant_contrast\", crop: \"pad\"})","codeSnippet":"$.cloudinary.image(\"painter_scene.jpg\", {height: 300, width: 300, background: \"auto:predominant_contrast\", crop: \"pad\"})","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(\"painter_scene.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(predominant().contrast())\n);","codeSnippet":"new CloudinaryImage(\"painter_scene.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(predominant().contrast())\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\/h_300,w_300,c_pad,b_auto:predominant_contrast\/painter_scene.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"height":"300","width":"300","crop_mode":"pad","background":"auto:predominant_contrast"}],"transformation_string":"h_300,w_300,c_pad,b_auto:predominant_contrast","url_suffix":"","version":"","secure":true,"public_id":"painter_scene.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例 支配式对比

  • 选择多支配颜色并使用渐变效果混合
b_auto:predominant_gradient:2b_auto:predominant_gradient:2 b_auto:predominant_gradient:4b_auto:predominant_gradient:4

<\/Image>","codeSnippet":" \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(\"phone_wood.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(predominantGradient().gradientColors(2))\n);","codeSnippet":"new CloudinaryImage(\"phone_wood.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(predominantGradient().gradientColors(2))\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<\/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(\"phone_wood.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(predominantGradient().gradientColors(2))\n);","codeSnippet":"new CloudinaryImage(\"phone_wood.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(predominantGradient().gradientColors(2))\n);","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-image>","codeSnippet":" \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(\"phone_wood.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(predominantGradient().gradientColors(2))\n);","codeSnippet":"new CloudinaryImage(\"phone_wood.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(predominantGradient().gradientColors(2))\n);","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('phone_wood.jpg', {height: 300, width: 300, background: \"auto:predominant_gradient:2\", crop: \"pad\"}).toHtml();","codeSnippet":"cloudinary.imageTag('phone_wood.jpg', {height: 300, width: 300, background: \"auto:predominant_gradient:2\", crop: \"pad\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"phone_wood.jpg\").image(height=300, width=300, background=\"auto:predominant_gradient:2\", crop=\"pad\")","codeSnippet":"CloudinaryImage(\"phone_wood.jpg\").image(height=300, width=300, background=\"auto:predominant_gradient:2\", crop=\"pad\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('phone_wood.jpg'))\n\t->resize(Resize::pad()->width(300)\n->height(300)\n\t->background(\n\tBackground::predominantGradient()\n\t->gradientColors(2)\n\t)\n\t);","codeSnippet":"(new ImageTag('phone_wood.jpg'))\n\t->resize(Resize::pad()->width(300)\n->height(300)\n\t->background(\n\tBackground::predominantGradient()\n\t->gradientColors(2)\n\t)\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(\"phone_wood.jpg\", array(\"height\"=>300, \"width\"=>300, \"background\"=>\"auto:predominant_gradient:2\", \"crop\"=>\"pad\"))","codeSnippet":"cl_image_tag(\"phone_wood.jpg\", array(\"height\"=>300, \"width\"=>300, \"background\"=>\"auto:predominant_gradient:2\", \"crop\"=>\"pad\"))","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().height(300).width(300).background(\"auto:predominant_gradient:2\").crop(\"pad\")).imageTag(\"phone_wood.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().height(300).width(300).background(\"auto:predominant_gradient:2\").crop(\"pad\")).imageTag(\"phone_wood.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"phone_wood.jpg\", :height=>300, :width=>300, :background=>\"auto:predominant_gradient:2\", :crop=>\"pad\")","codeSnippet":"cl_image_tag(\"phone_wood.jpg\", :height=>300, :width=>300, :background=>\"auto:predominant_gradient:2\", :crop=>\"pad\")","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().Height(300).Width(300).Background(\"auto:predominant_gradient:2\").Crop(\"pad\")).BuildImageTag(\"phone_wood.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(300).Width(300).Background(\"auto:predominant_gradient:2\").Crop(\"pad\")).BuildImageTag(\"phone_wood.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('phone_wood.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.predominantGradient()\n\t.gradientColors(2)\n\t)\n\t));","codeSnippet":"cloudinary.image('phone_wood.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.predominantGradient()\n\t.gradientColors(2)\n\t)\n\t));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(300).setWidth(300).setBackground(\"auto:predominant_gradient:2\").setCrop(\"pad\")).generate(\"phone_wood.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(300).setWidth(300).setBackground(\"auto:predominant_gradient:2\").setCrop(\"pad\")).generate(\"phone_wood.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().height(300).width(300).background(\"auto:predominant_gradient:2\").crop(\"pad\")).generate(\"phone_wood.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().height(300).width(300).background(\"auto:predominant_gradient:2\").crop(\"pad\")).generate(\"phone_wood.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('phone_wood.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.predominantGradient()\n\t.gradientColors(2)\n\t)\n\t));","codeSnippet":"cloudinary.image('phone_wood.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.predominantGradient()\n\t.gradientColors(2)\n\t)\n\t));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"phone_wood.jpg\")\n\t resize(Resize.pad() { width(300)\n height(300)\n\t background(\n\tBackground.predominantGradient() {\n\t gradientColors(2)\n\t })\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"phone_wood.jpg\")\n\t resize(Resize.pad() { width(300)\n height(300)\n\t background(\n\tBackground.predominantGradient() {\n\t gradientColors(2)\n\t })\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(\"phone_wood.jpg\", {height: 300, width: 300, background: \"auto:predominant_gradient:2\", crop: \"pad\"})","codeSnippet":"$.cloudinary.image(\"phone_wood.jpg\", {height: 300, width: 300, background: \"auto:predominant_gradient:2\", crop: \"pad\"})","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(\"phone_wood.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(predominantGradient().gradientColors(2))\n);","codeSnippet":"new CloudinaryImage(\"phone_wood.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(predominantGradient().gradientColors(2))\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\/h_300,w_300,c_pad,b_auto:predominant_gradient:2\/phone_wood.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"height":"300","width":"300","crop_mode":"pad","background":"auto:predominant_gradient:2"}],"transformation_string":"h_300,w_300,c_pad,b_auto:predominant_gradient:2","url_suffix":"","version":"","secure":true,"public_id":"phone_wood.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例 支配式对比

  • 限定所选渐变颜色为特定值提供自己的调色板)主色从提供调色板中最接近的颜色选择 :

<\/Image>","codeSnippet":" \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(\"string.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(\n predominantGradient()\n .gradientColors(4)\n .palette(\"red\", \"orange\", \"brown\")\n )\n);","codeSnippet":"new CloudinaryImage(\"string.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(\n predominantGradient()\n .gradientColors(4)\n .palette(\"red\", \"orange\", \"brown\")\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<\/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(\"string.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(\n predominantGradient()\n .gradientColors(4)\n .palette(\"red\", \"orange\", \"brown\")\n )\n);","codeSnippet":"new CloudinaryImage(\"string.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(\n predominantGradient()\n .gradientColors(4)\n .palette(\"red\", \"orange\", \"brown\")\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-image>","codeSnippet":" \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(\"string.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(\n predominantGradient()\n .gradientColors(4)\n .palette(\"red\", \"orange\", \"brown\")\n )\n);","codeSnippet":"new CloudinaryImage(\"string.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(\n predominantGradient()\n .gradientColors(4)\n .palette(\"red\", \"orange\", \"brown\")\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('string.jpg', {height: 300, width: 300, background: \"auto:predominant_gradient:4:palette_red_orange_brown\", crop: \"pad\"}).toHtml();","codeSnippet":"cloudinary.imageTag('string.jpg', {height: 300, width: 300, background: \"auto:predominant_gradient:4:palette_red_orange_brown\", crop: \"pad\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"string.jpg\").image(height=300, width=300, background=\"auto:predominant_gradient:4:palette_red_orange_brown\", crop=\"pad\")","codeSnippet":"CloudinaryImage(\"string.jpg\").image(height=300, width=300, background=\"auto:predominant_gradient:4:palette_red_orange_brown\", crop=\"pad\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('string.jpg'))\n\t->resize(Resize::pad()->width(300)\n->height(300)\n\t->background(\n\tBackground::predominantGradient()->gradientColors(4)\n\t->palette(Color::RED,Color::ORANGE,Color::BROWN)\n\t)\n\t);","codeSnippet":"(new ImageTag('string.jpg'))\n\t->resize(Resize::pad()->width(300)\n->height(300)\n\t->background(\n\tBackground::predominantGradient()->gradientColors(4)\n\t->palette(Color::RED,Color::ORANGE,Color::BROWN)\n\t)\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(\"string.jpg\", array(\"height\"=>300, \"width\"=>300, \"background\"=>\"auto:predominant_gradient:4:palette_red_orange_brown\", \"crop\"=>\"pad\"))","codeSnippet":"cl_image_tag(\"string.jpg\", array(\"height\"=>300, \"width\"=>300, \"background\"=>\"auto:predominant_gradient:4:palette_red_orange_brown\", \"crop\"=>\"pad\"))","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().height(300).width(300).background(\"auto:predominant_gradient:4:palette_red_orange_brown\").crop(\"pad\")).imageTag(\"string.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().height(300).width(300).background(\"auto:predominant_gradient:4:palette_red_orange_brown\").crop(\"pad\")).imageTag(\"string.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"string.jpg\", :height=>300, :width=>300, :background=>\"auto:predominant_gradient:4:palette_red_orange_brown\", :crop=>\"pad\")","codeSnippet":"cl_image_tag(\"string.jpg\", :height=>300, :width=>300, :background=>\"auto:predominant_gradient:4:palette_red_orange_brown\", :crop=>\"pad\")","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().Height(300).Width(300).Background(\"auto:predominant_gradient:4:palette_red_orange_brown\").Crop(\"pad\")).BuildImageTag(\"string.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(300).Width(300).Background(\"auto:predominant_gradient:4:palette_red_orange_brown\").Crop(\"pad\")).BuildImageTag(\"string.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('string.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.predominantGradient().gradientColors(4)\n\t.palette(Color.RED,Color.ORANGE,Color.BROWN)\n\t)\n\t));","codeSnippet":"cloudinary.image('string.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.predominantGradient().gradientColors(4)\n\t.palette(Color.RED,Color.ORANGE,Color.BROWN)\n\t)\n\t));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(300).setWidth(300).setBackground(\"auto:predominant_gradient:4:palette_red_orange_brown\").setCrop(\"pad\")).generate(\"string.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(300).setWidth(300).setBackground(\"auto:predominant_gradient:4:palette_red_orange_brown\").setCrop(\"pad\")).generate(\"string.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().height(300).width(300).background(\"auto:predominant_gradient:4:palette_red_orange_brown\").crop(\"pad\")).generate(\"string.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().height(300).width(300).background(\"auto:predominant_gradient:4:palette_red_orange_brown\").crop(\"pad\")).generate(\"string.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('string.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.predominantGradient().gradientColors(4)\n\t.palette(Color.RED,Color.ORANGE,Color.BROWN)\n\t)\n\t));","codeSnippet":"cloudinary.image('string.jpg').transformation(Transformation()\n\t.resize(Resize.pad().width(300)\n.height(300)\n\t.background(\n\tBackground.predominantGradient().gradientColors(4)\n\t.palette(Color.RED,Color.ORANGE,Color.BROWN)\n\t)\n\t));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"string.jpg\")\n\t resize(Resize.pad() { width(300)\n height(300)\n\t background(\n\tBackground.predominantGradient() { gradientColors(4)\n\t palette(Color.RED,Color.ORANGE,Color.BROWN)\n\t })\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"string.jpg\")\n\t resize(Resize.pad() { width(300)\n height(300)\n\t background(\n\tBackground.predominantGradient() { gradientColors(4)\n\t palette(Color.RED,Color.ORANGE,Color.BROWN)\n\t })\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(\"string.jpg\", {height: 300, width: 300, background: \"auto:predominant_gradient:4:palette_red_orange_brown\", crop: \"pad\"})","codeSnippet":"$.cloudinary.image(\"string.jpg\", {height: 300, width: 300, background: \"auto:predominant_gradient:4:palette_red_orange_brown\", crop: \"pad\"})","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(\"string.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(\n predominantGradient()\n .gradientColors(4)\n .palette(\"red\", \"orange\", \"brown\")\n )\n);","codeSnippet":"new CloudinaryImage(\"string.jpg\").resize(\n pad()\n .width(300)\n .height(300)\n .background(\n predominantGradient()\n .gradientColors(4)\n .palette(\"red\", \"orange\", \"brown\")\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\/h_300,w_300,c_pad,b_auto:predominant_gradient:4:palette_red_orange_brown\/string.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"height":"300","width":"300","crop_mode":"pad","background":"auto:predominant_gradient:4:palette_red_orange_brown"}],"transformation_string":"h_300,w_300,c_pad,b_auto:predominant_gradient:4:palette_red_orange_brown","url_suffix":"","version":"","secure":true,"public_id":"string.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例 b_auto:predominant_gradient:4:palette_red_orange_brown

看文档记录获取更多关于这些值的信息和更多关于各种嵌入选项的细节

摘要

图像布局有很多酷事, 正如你所见,云化使你很容易使用简单动态变换参数和交付URL在云中实现这些增强上下文识别贴板特别有用,以确保您的图像取出为图像分配的精确空间,同时保持良好状态。

上下文感知特征可供所有云式账号使用,包括云式账号免费帐号

相关类别

回顶

相关类别

特征邮箱

创建透明效果后台图片

通过玛雅沙文

向网站添加背景模式或图像使其更视觉上吸引人并产生强效品牌印象可我们不希望后台图像太分散注意力, 特别是当文本覆盖顶部时在这种情况下,我们可以对后台应用透明效果

Baidu
map