网站图像准备接受iPhoneXnch

iPhone 8+iPhonex发布2017年9月12日iPhone10周年苹果事件

iPhoneX系统拥有5.8英寸超视网膜屏幕,机器标签栏“全屏化”。2436x1125解析法还特写,使其成为迄今最高解析iPhone

自公告发布以来,设计师和原型设计师显然全机制作产品设计匹配iPhonex

可以说这是iPhonex最引人入胜的特征上方美术画像诺奇上顶粗壮优雅,流出它 并仍然引人入胜, 即使下方画像上的人似乎不高兴

寻找方法令他快乐 如何令NETCH真正美丽 并有益于图像使用云化图像变换工具

iPhoneX屏幕是独一无二的,因为嵌入相机和其他传感器的暗空间(notch)实际上是硬玻璃屏幕的一部分,内容显示流出于此NotchUI/UX产品设计中考虑的一个非常重要方面全屏iphone系统文章中,我们将讨论通向修复图像测试iPhoneX

图像管理变换可用云式即时操作当我说即时飞翔表示图像使用动态传送URL转换

云端还提供移动优先图像优化图片缓存CDN应请求立即提供

云形图像管理变换服务将在本文章中模拟iPhoneX屏幕上图像的适配性用它测试图像和产品 看这些图像和产品与新类型屏幕X相容度

开始前先检视样本图像

执行此测试需要nch图像.

下一步上传图像转换上传上上面显示的游泳池图象

现在我们需要应用变换云形图像形式如下:

        https://res.www.aaaalireno.com/<云名>图像/加载/<transformation_parameters>/<公共标识>.<image_format_file_extension>代码语言htmlXML高山市xml)

调整游泳池图像时,我们使用下文的URL并研究 段数 ://www.aaaalireno.com/ /Spencer_Watson.jpg

云化提供许多图像URL转换参数来.测试时,我们将使用相当数项参数URL一开始看似有点吓人,但向下滚动一点,我们将带您遍历整件事情 :

1\",\n new Transformation()\n .resize(fill().width(1218).height(562))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation()\n .resize(scale().width(325))\n .rotate(byAngle(90))\n .rotate(mode(horizontalFlip()))\n )\n ).position(new Position().gravity(compass(\"west\")))\n )\n ).otherwise(\n new Transformation()\n .resize(fill().width(562).height(1218))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation().resize(scale().width(325))\n )\n ).position(new Position().gravity(compass(\"north\")))\n )\n )\n )\n .roundCorners(byRadius(54))\n .backgroundColor(\"#000000\");","codeSnippet":"new CloudinaryImage(\"spencer-watson-36.jpg\")\n .conditional(\n ifCondition(\n \"aspect_ratio > 1\",\n new Transformation()\n .resize(fill().width(1218).height(562))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation()\n .resize(scale().width(325))\n .rotate(byAngle(90))\n .rotate(mode(horizontalFlip()))\n )\n ).position(new Position().gravity(compass(\"west\")))\n )\n ).otherwise(\n new Transformation()\n .resize(fill().width(562).height(1218))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation().resize(scale().width(325))\n )\n ).position(new Position().gravity(compass(\"north\")))\n )\n )\n )\n .roundCorners(byRadius(54))\n .backgroundColor(\"#000000\");","status":0,"statusText":"Ok","displayName":"React","packageName":"@cloudinary\/react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"react","framework":"react","language":"react","rawCodeSnippet":" <\/Image>","codeSnippet":" \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"spencer-watson-36.jpg\")\n .conditional(\n ifCondition(\n \"aspect_ratio > 1\",\n new Transformation()\n .resize(fill().width(1218).height(562))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation()\n .resize(scale().width(325))\n .rotate(byAngle(90))\n .rotate(mode(horizontalFlip()))\n )\n ).position(new Position().gravity(compass(\"west\")))\n )\n ).otherwise(\n new Transformation()\n .resize(fill().width(562).height(1218))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation().resize(scale().width(325))\n )\n ).position(new Position().gravity(compass(\"north\")))\n )\n )\n )\n .roundCorners(byRadius(54))\n .backgroundColor(\"#000000\");","codeSnippet":"new CloudinaryImage(\"spencer-watson-36.jpg\")\n .conditional(\n ifCondition(\n \"aspect_ratio > 1\",\n new Transformation()\n .resize(fill().width(1218).height(562))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation()\n .resize(scale().width(325))\n .rotate(byAngle(90))\n .rotate(mode(horizontalFlip()))\n )\n ).position(new Position().gravity(compass(\"west\")))\n )\n ).otherwise(\n new Transformation()\n .resize(fill().width(562).height(1218))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation().resize(scale().width(325))\n )\n ).position(new Position().gravity(compass(\"north\")))\n )\n )\n )\n .roundCorners(byRadius(54))\n .backgroundColor(\"#000000\");","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":" <\/cld-image>","codeSnippet":" \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\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(\"spencer-watson-36.jpg\")\n .conditional(\n ifCondition(\n \"aspect_ratio > 1\",\n new Transformation()\n .resize(fill().width(1218).height(562))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation()\n .resize(scale().width(325))\n .rotate(byAngle(90))\n .rotate(mode(horizontalFlip()))\n )\n ).position(new Position().gravity(compass(\"west\")))\n )\n ).otherwise(\n new Transformation()\n .resize(fill().width(562).height(1218))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation().resize(scale().width(325))\n )\n ).position(new Position().gravity(compass(\"north\")))\n )\n )\n )\n .roundCorners(byRadius(54))\n .backgroundColor(\"#000000\");","codeSnippet":"new CloudinaryImage(\"spencer-watson-36.jpg\")\n .conditional(\n ifCondition(\n \"aspect_ratio > 1\",\n new Transformation()\n .resize(fill().width(1218).height(562))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation()\n .resize(scale().width(325))\n .rotate(byAngle(90))\n .rotate(mode(horizontalFlip()))\n )\n ).position(new Position().gravity(compass(\"west\")))\n )\n ).otherwise(\n new Transformation()\n .resize(fill().width(562).height(1218))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation().resize(scale().width(325))\n )\n ).position(new Position().gravity(compass(\"north\")))\n )\n )\n )\n .roundCorners(byRadius(54))\n .backgroundColor(\"#000000\");","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-image>","codeSnippet":" \n\t \n\t<\/cl-transformation>\n\t \n\t<\/cl-transformation>\n\t \n\t<\/cl-transformation>\n\t \n\t<\/cl-transformation>\n\t \n\t<\/cl-transformation>\n\t \n\t<\/cl-transformation>\n\t \n\t<\/cl-transformation>\n\t \n\t<\/cl-transformation>\n\t \n\t<\/cl-transformation>\n\t \n\t<\/cl-transformation>\n\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(\"spencer-watson-36.jpg\")\n .conditional(\n ifCondition(\n \"aspect_ratio > 1\",\n new Transformation()\n .resize(fill().width(1218).height(562))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation()\n .resize(scale().width(325))\n .rotate(byAngle(90))\n .rotate(mode(horizontalFlip()))\n )\n ).position(new Position().gravity(compass(\"west\")))\n )\n ).otherwise(\n new Transformation()\n .resize(fill().width(562).height(1218))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation().resize(scale().width(325))\n )\n ).position(new Position().gravity(compass(\"north\")))\n )\n )\n )\n .roundCorners(byRadius(54))\n .backgroundColor(\"#000000\");","codeSnippet":"new CloudinaryImage(\"spencer-watson-36.jpg\")\n .conditional(\n ifCondition(\n \"aspect_ratio > 1\",\n new Transformation()\n .resize(fill().width(1218).height(562))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation()\n .resize(scale().width(325))\n .rotate(byAngle(90))\n .rotate(mode(horizontalFlip()))\n )\n ).position(new Position().gravity(compass(\"west\")))\n )\n ).otherwise(\n new Transformation()\n .resize(fill().width(562).height(1218))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation().resize(scale().width(325))\n )\n ).position(new Position().gravity(compass(\"north\")))\n )\n )\n )\n .roundCorners(byRadius(54))\n .backgroundColor(\"#000000\");","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('spencer-watson-36.jpg', {transformation: [ {if: \"ar_gt_1\"}, {height: 562, width: 1218, crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"iphone_x_notch\"), width: 325, crop: \"scale\"}, {angle: 90}, {angle: \"hflip\"}, {flags: \"layer_apply\", gravity: \"west\"}, {if: \"else\"}, {height: 1218, width: 562, crop: \"fill\"}, {gravity: \"north\", overlay: new cloudinary.Layer().publicId(\"iphone_x_notch\"), width: 325, crop: \"scale\"}, {if: \"end\"}, {background: \"#000000\", radius: 54} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('spencer-watson-36.jpg', {transformation: [\n {if: \"ar_gt_1\"},\n {height: 562, width: 1218, crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"iphone_x_notch\"), width: 325, crop: \"scale\"},\n {angle: 90},\n {angle: \"hflip\"},\n {flags: \"layer_apply\", gravity: \"west\"},\n {if: \"else\"},\n {height: 1218, width: 562, crop: \"fill\"},\n {gravity: \"north\", overlay: new cloudinary.Layer().publicId(\"iphone_x_notch\"), width: 325, crop: \"scale\"},\n {if: \"end\"},\n {background: \"#000000\", radius: 54}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"spencer-watson-36.jpg\").image(transformation=[ {'if': \"ar_gt_1\"}, {'height': 562, 'width': 1218, 'crop': \"fill\"}, {'overlay': \"iphone_x_notch\", 'width': 325, 'crop': \"scale\"}, {'angle': 90}, {'angle': \"hflip\"}, {'flags': \"layer_apply\", 'gravity': \"west\"}, {'if': \"else\"}, {'height': 1218, 'width': 562, 'crop': \"fill\"}, {'gravity': \"north\", 'overlay': \"iphone_x_notch\", 'width': 325, 'crop': \"scale\"}, {'if': \"end\"}, {'background': \"#000000\", 'radius': 54} ])","codeSnippet":"CloudinaryImage(\"spencer-watson-36.jpg\").image(transformation=[\n {'if': \"ar_gt_1\"},\n {'height': 562, 'width': 1218, 'crop': \"fill\"},\n {'overlay': \"iphone_x_notch\", 'width': 325, 'crop': \"scale\"},\n {'angle': 90},\n {'angle': \"hflip\"},\n {'flags': \"layer_apply\", 'gravity': \"west\"},\n {'if': \"else\"},\n {'height': 1218, 'width': 562, 'crop': \"fill\"},\n {'gravity': \"north\", 'overlay': \"iphone_x_notch\", 'width': 325, 'crop': \"scale\"},\n {'if': \"end\"},\n {'background': \"#000000\", 'radius': 54}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('spencer-watson-36.jpg'))\n\t->conditional(Conditional::ifCondition(\"aspect_ratio > 1\",(new Transformation())\n\t->resize(Resize::fill()->width(1218)\n->height(562))\n\t->overlay(Overlay::source(\n\tSource::image(\"iphone_x_notch\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(325))\n\t->rotate(Rotate::byAngle(90))\n\t->rotate(Rotate::mode(\n\tRotationMode::horizontalFlip())))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::west()))\n\t)\n\t))\n\t->otherwise((new Transformation())\n\t->resize(Resize::fill()->width(562)\n->height(1218))\n\t->overlay(Overlay::source(\n\tSource::image(\"iphone_x_notch\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(325)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n\t)\n\t))\n\t)\n\t->roundCorners(RoundCorners::byRadius(54))\n\t->backgroundColor(Color::rgb(\"000000\"));","codeSnippet":"(new ImageTag('spencer-watson-36.jpg'))\n\t->conditional(Conditional::ifCondition(\"aspect_ratio > 1\",(new Transformation())\n\t->resize(Resize::fill()->width(1218)\n->height(562))\n\t->overlay(Overlay::source(\n\tSource::image(\"iphone_x_notch\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(325))\n\t->rotate(Rotate::byAngle(90))\n\t->rotate(Rotate::mode(\n\tRotationMode::horizontalFlip())))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::west()))\n\t)\n\t))\n\t->otherwise((new Transformation())\n\t->resize(Resize::fill()->width(562)\n->height(1218))\n\t->overlay(Overlay::source(\n\tSource::image(\"iphone_x_notch\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(325)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n\t)\n\t))\n\t)\n\t->roundCorners(RoundCorners::byRadius(54))\n\t->backgroundColor(Color::rgb(\"000000\"));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"spencer-watson-36.jpg\", array(\"transformation\"=>array( array(\"if\"=>\"ar_gt_1\"), array(\"height\"=>562, \"width\"=>1218, \"crop\"=>\"fill\"), array(\"overlay\"=>\"iphone_x_notch\", \"width\"=>325, \"crop\"=>\"scale\"), array(\"angle\"=>90), array(\"angle\"=>\"hflip\"), array(\"flags\"=>\"layer_apply\", \"gravity\"=>\"west\"), array(\"if\"=>\"else\"), array(\"height\"=>1218, \"width\"=>562, \"crop\"=>\"fill\"), array(\"gravity\"=>\"north\", \"overlay\"=>\"iphone_x_notch\", \"width\"=>325, \"crop\"=>\"scale\"), array(\"if\"=>\"end\"), array(\"background\"=>\"#000000\", \"radius\"=>54) )))","codeSnippet":"cl_image_tag(\"spencer-watson-36.jpg\", array(\"transformation\"=>array(\n array(\"if\"=>\"ar_gt_1\"),\n array(\"height\"=>562, \"width\"=>1218, \"crop\"=>\"fill\"),\n array(\"overlay\"=>\"iphone_x_notch\", \"width\"=>325, \"crop\"=>\"scale\"),\n array(\"angle\"=>90),\n array(\"angle\"=>\"hflip\"),\n array(\"flags\"=>\"layer_apply\", \"gravity\"=>\"west\"),\n array(\"if\"=>\"else\"),\n array(\"height\"=>1218, \"width\"=>562, \"crop\"=>\"fill\"),\n array(\"gravity\"=>\"north\", \"overlay\"=>\"iphone_x_notch\", \"width\"=>325, \"crop\"=>\"scale\"),\n array(\"if\"=>\"end\"),\n array(\"background\"=>\"#000000\", \"radius\"=>54)\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().if(\"ar_gt_1\").chain() .height(562).width(1218).crop(\"fill\").chain() .overlay(new Layer().publicId(\"iphone_x_notch\")).width(325).crop(\"scale\").chain() .angle(90).chain() .angle(\"hflip\").chain() .flags(\"layer_apply\").gravity(\"west\").chain() .if(\"else\").chain() .height(1218).width(562).crop(\"fill\").chain() .gravity(\"north\").overlay(new Layer().publicId(\"iphone_x_notch\")).width(325).crop(\"scale\").chain() .if(\"end\").chain() .background(\"#000000\").radius(54)).imageTag(\"spencer-watson-36.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .if(\"ar_gt_1\").chain()\n .height(562).width(1218).crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"iphone_x_notch\")).width(325).crop(\"scale\").chain()\n .angle(90).chain()\n .angle(\"hflip\").chain()\n .flags(\"layer_apply\").gravity(\"west\").chain()\n .if(\"else\").chain()\n .height(1218).width(562).crop(\"fill\").chain()\n .gravity(\"north\").overlay(new Layer().publicId(\"iphone_x_notch\")).width(325).crop(\"scale\").chain()\n .if(\"end\").chain()\n .background(\"#000000\").radius(54)).imageTag(\"spencer-watson-36.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"spencer-watson-36.jpg\", :transformation=>[ {:if=>\"ar_gt_1\"}, {:height=>562, :width=>1218, :crop=>\"fill\"}, {:overlay=>\"iphone_x_notch\", :width=>325, :crop=>\"scale\"}, {:angle=>90}, {:angle=>\"hflip\"}, {:flags=>\"layer_apply\", :gravity=>\"west\"}, {:if=>\"else\"}, {:height=>1218, :width=>562, :crop=>\"fill\"}, {:gravity=>\"north\", :overlay=>\"iphone_x_notch\", :width=>325, :crop=>\"scale\"}, {:if=>\"end\"}, {:background=>\"#000000\", :radius=>54} ])","codeSnippet":"cl_image_tag(\"spencer-watson-36.jpg\", :transformation=>[\n {:if=>\"ar_gt_1\"},\n {:height=>562, :width=>1218, :crop=>\"fill\"},\n {:overlay=>\"iphone_x_notch\", :width=>325, :crop=>\"scale\"},\n {:angle=>90},\n {:angle=>\"hflip\"},\n {:flags=>\"layer_apply\", :gravity=>\"west\"},\n {:if=>\"else\"},\n {:height=>1218, :width=>562, :crop=>\"fill\"},\n {:gravity=>\"north\", :overlay=>\"iphone_x_notch\", :width=>325, :crop=>\"scale\"},\n {:if=>\"end\"},\n {:background=>\"#000000\", :radius=>54}\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().If(\"ar_gt_1\").Chain() .Height(562).Width(1218).Crop(\"fill\").Chain() .Overlay(new Layer().PublicId(\"iphone_x_notch\")).Width(325).Crop(\"scale\").Chain() .Angle(90).Chain() .Angle(\"hflip\").Chain() .Flags(\"layer_apply\").Gravity(\"west\").Chain() .If(\"else\").Chain() .Height(1218).Width(562).Crop(\"fill\").Chain() .Gravity(\"north\").Overlay(new Layer().PublicId(\"iphone_x_notch\")).Width(325).Crop(\"scale\").Chain() .If(\"end\").Chain() .Background(\"#000000\").Radius(54)).BuildImageTag(\"spencer-watson-36.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .If(\"ar_gt_1\").Chain()\n .Height(562).Width(1218).Crop(\"fill\").Chain()\n .Overlay(new Layer().PublicId(\"iphone_x_notch\")).Width(325).Crop(\"scale\").Chain()\n .Angle(90).Chain()\n .Angle(\"hflip\").Chain()\n .Flags(\"layer_apply\").Gravity(\"west\").Chain()\n .If(\"else\").Chain()\n .Height(1218).Width(562).Crop(\"fill\").Chain()\n .Gravity(\"north\").Overlay(new Layer().PublicId(\"iphone_x_notch\")).Width(325).Crop(\"scale\").Chain()\n .If(\"end\").Chain()\n .Background(\"#000000\").Radius(54)).BuildImageTag(\"spencer-watson-36.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('spencer-watson-36.jpg').transformation(Transformation()\n\t.addTransformation(\"if_ar_gt_1\/c_fill,h_562,w_1218\/c_scale,l_iphone_x_notch,w_325\/a_90\/a_hflip\/fl_layer_apply,g_west\/if_else\/c_fill,h_1218,w_562\/c_scale,g_north,l_iphone_x_notch,w_325\/if_end\/b_rgb:000000,r_54\"));","codeSnippet":"cloudinary.image('spencer-watson-36.jpg').transformation(Transformation()\n\t.addTransformation(\"if_ar_gt_1\/c_fill,h_562,w_1218\/c_scale,l_iphone_x_notch,w_325\/a_90\/a_hflip\/fl_layer_apply,g_west\/if_else\/c_fill,h_1218,w_562\/c_scale,g_north,l_iphone_x_notch,w_325\/if_end\/b_rgb:000000,r_54\"));","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().setIf(\"ar_gt_1\").chain() .setHeight(562).setWidth(1218).setCrop(\"fill\").chain() .setOverlay(\"iphone_x_notch\").setWidth(325).setCrop(\"scale\").chain() .setAngle(90).chain() .setAngle(\"hflip\").chain() .setFlags(\"layer_apply\").setGravity(\"west\").chain() .setIf(\"else\").chain() .setHeight(1218).setWidth(562).setCrop(\"fill\").chain() .setGravity(\"north\").setOverlay(\"iphone_x_notch\").setWidth(325).setCrop(\"scale\").chain() .setIf(\"end\").chain() .setBackground(\"#000000\").setRadius(54)).generate(\"spencer-watson-36.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setIf(\"ar_gt_1\").chain()\n .setHeight(562).setWidth(1218).setCrop(\"fill\").chain()\n .setOverlay(\"iphone_x_notch\").setWidth(325).setCrop(\"scale\").chain()\n .setAngle(90).chain()\n .setAngle(\"hflip\").chain()\n .setFlags(\"layer_apply\").setGravity(\"west\").chain()\n .setIf(\"else\").chain()\n .setHeight(1218).setWidth(562).setCrop(\"fill\").chain()\n .setGravity(\"north\").setOverlay(\"iphone_x_notch\").setWidth(325).setCrop(\"scale\").chain()\n .setIf(\"end\").chain()\n .setBackground(\"#000000\").setRadius(54)).generate(\"spencer-watson-36.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().if(\"ar_gt_1\").chain() .height(562).width(1218).crop(\"fill\").chain() .overlay(new Layer().publicId(\"iphone_x_notch\")).width(325).crop(\"scale\").chain() .angle(90).chain() .angle(\"hflip\").chain() .flags(\"layer_apply\").gravity(\"west\").chain() .if(\"else\").chain() .height(1218).width(562).crop(\"fill\").chain() .gravity(\"north\").overlay(new Layer().publicId(\"iphone_x_notch\")).width(325).crop(\"scale\").chain() .if(\"end\").chain() .background(\"#000000\").radius(54)).generate(\"spencer-watson-36.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .if(\"ar_gt_1\").chain()\n .height(562).width(1218).crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"iphone_x_notch\")).width(325).crop(\"scale\").chain()\n .angle(90).chain()\n .angle(\"hflip\").chain()\n .flags(\"layer_apply\").gravity(\"west\").chain()\n .if(\"else\").chain()\n .height(1218).width(562).crop(\"fill\").chain()\n .gravity(\"north\").overlay(new Layer().publicId(\"iphone_x_notch\")).width(325).crop(\"scale\").chain()\n .if(\"end\").chain()\n .background(\"#000000\").radius(54)).generate(\"spencer-watson-36.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('spencer-watson-36.jpg').transformation(Transformation()\n\t.addTransformation(\"if_ar_gt_1\/c_fill,h_562,w_1218\/c_scale,l_iphone_x_notch,w_325\/a_90\/a_hflip\/fl_layer_apply,g_west\/if_else\/c_fill,h_1218,w_562\/c_scale,g_north,l_iphone_x_notch,w_325\/if_end\/b_rgb:000000,r_54\"));","codeSnippet":"cloudinary.image('spencer-watson-36.jpg').transformation(Transformation()\n\t.addTransformation(\"if_ar_gt_1\/c_fill,h_562,w_1218\/c_scale,l_iphone_x_notch,w_325\/a_90\/a_hflip\/fl_layer_apply,g_west\/if_else\/c_fill,h_1218,w_562\/c_scale,g_north,l_iphone_x_notch,w_325\/if_end\/b_rgb:000000,r_54\"));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"spencer-watson-36.jpg\")\n\t addTransformation(\"if_ar_gt_1\/c_fill,h_562,w_1218\/c_scale,l_iphone_x_notch,w_325\/a_90\/a_hflip\/fl_layer_apply,g_west\/if_else\/c_fill,h_1218,w_562\/c_scale,g_north,l_iphone_x_notch,w_325\/if_end\/b_rgb:000000,r_54\") \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"spencer-watson-36.jpg\")\n\t addTransformation(\"if_ar_gt_1\/c_fill,h_562,w_1218\/c_scale,l_iphone_x_notch,w_325\/a_90\/a_hflip\/fl_layer_apply,g_west\/if_else\/c_fill,h_1218,w_562\/c_scale,g_north,l_iphone_x_notch,w_325\/if_end\/b_rgb:000000,r_54\") \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(\"spencer-watson-36.jpg\", {transformation: [ {if: \"ar_gt_1\"}, {height: 562, width: 1218, crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"iphone_x_notch\"), width: 325, crop: \"scale\"}, {angle: 90}, {angle: \"hflip\"}, {flags: \"layer_apply\", gravity: \"west\"}, {if: \"else\"}, {height: 1218, width: 562, crop: \"fill\"}, {gravity: \"north\", overlay: new cloudinary.Layer().publicId(\"iphone_x_notch\"), width: 325, crop: \"scale\"}, {if: \"end\"}, {background: \"#000000\", radius: 54} ]})","codeSnippet":"$.cloudinary.image(\"spencer-watson-36.jpg\", {transformation: [\n {if: \"ar_gt_1\"},\n {height: 562, width: 1218, crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"iphone_x_notch\"), width: 325, crop: \"scale\"},\n {angle: 90},\n {angle: \"hflip\"},\n {flags: \"layer_apply\", gravity: \"west\"},\n {if: \"else\"},\n {height: 1218, width: 562, crop: \"fill\"},\n {gravity: \"north\", overlay: new cloudinary.Layer().publicId(\"iphone_x_notch\"), width: 325, crop: \"scale\"},\n {if: \"end\"},\n {background: \"#000000\", radius: 54}\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(\"spencer-watson-36.jpg\")\n .conditional(\n ifCondition(\n \"aspect_ratio > 1\",\n new Transformation()\n .resize(fill().width(1218).height(562))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation()\n .resize(scale().width(325))\n .rotate(byAngle(90))\n .rotate(mode(horizontalFlip()))\n )\n ).position(new Position().gravity(compass(\"west\")))\n )\n ).otherwise(\n new Transformation()\n .resize(fill().width(562).height(1218))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation().resize(scale().width(325))\n )\n ).position(new Position().gravity(compass(\"north\")))\n )\n )\n )\n .roundCorners(byRadius(54))\n .backgroundColor(\"#000000\");","codeSnippet":"new CloudinaryImage(\"spencer-watson-36.jpg\")\n .conditional(\n ifCondition(\n \"aspect_ratio > 1\",\n new Transformation()\n .resize(fill().width(1218).height(562))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation()\n .resize(scale().width(325))\n .rotate(byAngle(90))\n .rotate(mode(horizontalFlip()))\n )\n ).position(new Position().gravity(compass(\"west\")))\n )\n ).otherwise(\n new Transformation()\n .resize(fill().width(562).height(1218))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation().resize(scale().width(325))\n )\n ).position(new Position().gravity(compass(\"north\")))\n )\n )\n )\n .roundCorners(byRadius(54))\n .backgroundColor(\"#000000\");","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\/if_ar_gt_1\/c_fill,h_562,w_1218\/c_scale,l_iphone_x_notch,w_325\/a_90\/a_hflip\/fl_layer_apply,g_west\/if_else\/c_fill,h_1218,w_562\/c_scale,g_north,l_iphone_x_notch,w_325\/if_end\/b_rgb:000000,r_54\/spencer-watson-36.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"if":"ar_gt_1"},{"crop_mode":"fill","height":"562","width":"1218"},{"crop_mode":"scale","overlay":"iphone_x_notch","width":"325"},{"angle":"90"},{"angle":"hflip"},{"flags":"layer_apply","gravity":"west"},{"if":"else"},{"crop_mode":"fill","height":"1218","width":"562"},{"crop_mode":"scale","gravity":"north","overlay":"iphone_x_notch","width":"325"},{"if":"end"},{"background":"rgb:000000","radius":"54"}],"transformation_string":"if_ar_gt_1\/c_fill,h_562,w_1218\/c_scale,l_iphone_x_notch,w_325\/a_90\/a_hflip\/fl_layer_apply,g_west\/if_else\/c_fill,h_1218,w_562\/c_scale,g_north,l_iphone_x_notch,w_325\/if_end\/b_rgb:000000,r_54","url_suffix":"","version":"","secure":true,"public_id":"spencer-watson-36.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

查看URL,你可以看到它的意思

• if_ar_gt_:如果图像宽比大于1c_fill,h_562,w_1218:调整图像高度562和宽度1218维度c_scale,l_iphone_x_notch,w_325:添加hone_x_notch图像叠装至宽度325度a_90/a_hflip:旋转hone_x_notch叠加90度 并做横向镜翻转g_west,fl_layer_apply:确保nch叠加定位于父图像左偏结束转换到此层

• if_else:但如果图像宽比不大于1c_fill,h_1218,w_562:调整图像高度为1218和宽度562,保持宽度c_scale,g_north,l_iphone_x_notch,w_325:增加一层iphone_x_noch图像重排宽度325度,而不论其侧比如何并置居父图像中北

• if_end结束if语句

• b_rgb:000000,r_54:对图像应用黑背景并环角到54度半径

让我们看一看同一张图象变换,这次是风景图象所有你需要做的是使用相同的条件变换URL并使用不同的公共标识

1\",\n new Transformation()\n .resize(fill().width(1218).height(562))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation()\n .resize(scale().width(325))\n .rotate(byAngle(90))\n .rotate(mode(horizontalFlip()))\n )\n ).position(new Position().gravity(compass(\"west\")))\n )\n ).otherwise(\n new Transformation()\n .resize(fill().width(562).height(1218))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation().resize(scale().width(325))\n )\n ).position(new Position().gravity(compass(\"north\")))\n )\n )\n )\n .roundCorners(byRadius(54))\n .backgroundColor(\"#000000\")\n .setVersion(1506615977);","codeSnippet":"new CloudinaryImage(\"country_sunset.jpg\")\n .conditional(\n ifCondition(\n \"aspect_ratio > 1\",\n new Transformation()\n .resize(fill().width(1218).height(562))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation()\n .resize(scale().width(325))\n .rotate(byAngle(90))\n .rotate(mode(horizontalFlip()))\n )\n ).position(new Position().gravity(compass(\"west\")))\n )\n ).otherwise(\n new Transformation()\n .resize(fill().width(562).height(1218))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation().resize(scale().width(325))\n )\n ).position(new Position().gravity(compass(\"north\")))\n )\n )\n )\n .roundCorners(byRadius(54))\n .backgroundColor(\"#000000\")\n .setVersion(1506615977);","status":0,"statusText":"Ok","displayName":"React","packageName":"@cloudinary\/react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"react","framework":"react","language":"react","rawCodeSnippet":" <\/Image>","codeSnippet":" \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"country_sunset.jpg\")\n .conditional(\n ifCondition(\n \"aspect_ratio > 1\",\n new Transformation()\n .resize(fill().width(1218).height(562))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation()\n .resize(scale().width(325))\n .rotate(byAngle(90))\n .rotate(mode(horizontalFlip()))\n )\n ).position(new Position().gravity(compass(\"west\")))\n )\n ).otherwise(\n new Transformation()\n .resize(fill().width(562).height(1218))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation().resize(scale().width(325))\n )\n ).position(new Position().gravity(compass(\"north\")))\n )\n )\n )\n .roundCorners(byRadius(54))\n .backgroundColor(\"#000000\")\n .setVersion(1506615977);","codeSnippet":"new CloudinaryImage(\"country_sunset.jpg\")\n .conditional(\n ifCondition(\n \"aspect_ratio > 1\",\n new Transformation()\n .resize(fill().width(1218).height(562))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation()\n .resize(scale().width(325))\n .rotate(byAngle(90))\n .rotate(mode(horizontalFlip()))\n )\n ).position(new Position().gravity(compass(\"west\")))\n )\n ).otherwise(\n new Transformation()\n .resize(fill().width(562).height(1218))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation().resize(scale().width(325))\n )\n ).position(new Position().gravity(compass(\"north\")))\n )\n )\n )\n .roundCorners(byRadius(54))\n .backgroundColor(\"#000000\")\n .setVersion(1506615977);","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":" <\/cld-image>","codeSnippet":" \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\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(\"country_sunset.jpg\")\n .conditional(\n ifCondition(\n \"aspect_ratio > 1\",\n new Transformation()\n .resize(fill().width(1218).height(562))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation()\n .resize(scale().width(325))\n .rotate(byAngle(90))\n .rotate(mode(horizontalFlip()))\n )\n ).position(new Position().gravity(compass(\"west\")))\n )\n ).otherwise(\n new Transformation()\n .resize(fill().width(562).height(1218))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation().resize(scale().width(325))\n )\n ).position(new Position().gravity(compass(\"north\")))\n )\n )\n )\n .roundCorners(byRadius(54))\n .backgroundColor(\"#000000\")\n .setVersion(1506615977);","codeSnippet":"new CloudinaryImage(\"country_sunset.jpg\")\n .conditional(\n ifCondition(\n \"aspect_ratio > 1\",\n new Transformation()\n .resize(fill().width(1218).height(562))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation()\n .resize(scale().width(325))\n .rotate(byAngle(90))\n .rotate(mode(horizontalFlip()))\n )\n ).position(new Position().gravity(compass(\"west\")))\n )\n ).otherwise(\n new Transformation()\n .resize(fill().width(562).height(1218))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation().resize(scale().width(325))\n )\n ).position(new Position().gravity(compass(\"north\")))\n )\n )\n )\n .roundCorners(byRadius(54))\n .backgroundColor(\"#000000\")\n .setVersion(1506615977);","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":" <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-transformation> <\/cl-image>","codeSnippet":" \n\t \n\t<\/cl-transformation>\n\t \n\t<\/cl-transformation>\n\t \n\t<\/cl-transformation>\n\t \n\t<\/cl-transformation>\n\t \n\t<\/cl-transformation>\n\t \n\t<\/cl-transformation>\n\t \n\t<\/cl-transformation>\n\t \n\t<\/cl-transformation>\n\t \n\t<\/cl-transformation>\n\t \n\t<\/cl-transformation>\n\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(\"country_sunset.jpg\")\n .conditional(\n ifCondition(\n \"aspect_ratio > 1\",\n new Transformation()\n .resize(fill().width(1218).height(562))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation()\n .resize(scale().width(325))\n .rotate(byAngle(90))\n .rotate(mode(horizontalFlip()))\n )\n ).position(new Position().gravity(compass(\"west\")))\n )\n ).otherwise(\n new Transformation()\n .resize(fill().width(562).height(1218))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation().resize(scale().width(325))\n )\n ).position(new Position().gravity(compass(\"north\")))\n )\n )\n )\n .roundCorners(byRadius(54))\n .backgroundColor(\"#000000\")\n .setVersion(1506615977);","codeSnippet":"new CloudinaryImage(\"country_sunset.jpg\")\n .conditional(\n ifCondition(\n \"aspect_ratio > 1\",\n new Transformation()\n .resize(fill().width(1218).height(562))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation()\n .resize(scale().width(325))\n .rotate(byAngle(90))\n .rotate(mode(horizontalFlip()))\n )\n ).position(new Position().gravity(compass(\"west\")))\n )\n ).otherwise(\n new Transformation()\n .resize(fill().width(562).height(1218))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation().resize(scale().width(325))\n )\n ).position(new Position().gravity(compass(\"north\")))\n )\n )\n )\n .roundCorners(byRadius(54))\n .backgroundColor(\"#000000\")\n .setVersion(1506615977);","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('country_sunset.jpg', {transformation: [ {if: \"ar_gt_1\"}, {height: 562, width: 1218, crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"iphone_x_notch\"), width: 325, crop: \"scale\"}, {angle: 90}, {angle: \"hflip\"}, {flags: \"layer_apply\", gravity: \"west\"}, {if: \"else\"}, {height: 1218, width: 562, crop: \"fill\"}, {gravity: \"north\", overlay: new cloudinary.Layer().publicId(\"iphone_x_notch\"), width: 325}, {if: \"end\"}, {background: \"#000000\", radius: 54} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('country_sunset.jpg', {transformation: [\n {if: \"ar_gt_1\"},\n {height: 562, width: 1218, crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"iphone_x_notch\"), width: 325, crop: \"scale\"},\n {angle: 90},\n {angle: \"hflip\"},\n {flags: \"layer_apply\", gravity: \"west\"},\n {if: \"else\"},\n {height: 1218, width: 562, crop: \"fill\"},\n {gravity: \"north\", overlay: new cloudinary.Layer().publicId(\"iphone_x_notch\"), width: 325},\n {if: \"end\"},\n {background: \"#000000\", radius: 54}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"country_sunset.jpg\").image(transformation=[ {'if': \"ar_gt_1\"}, {'height': 562, 'width': 1218, 'crop': \"fill\"}, {'overlay': \"iphone_x_notch\", 'width': 325, 'crop': \"scale\"}, {'angle': 90}, {'angle': \"hflip\"}, {'flags': \"layer_apply\", 'gravity': \"west\"}, {'if': \"else\"}, {'height': 1218, 'width': 562, 'crop': \"fill\"}, {'gravity': \"north\", 'overlay': \"iphone_x_notch\", 'width': 325}, {'if': \"end\"}, {'background': \"#000000\", 'radius': 54} ])","codeSnippet":"CloudinaryImage(\"country_sunset.jpg\").image(transformation=[\n {'if': \"ar_gt_1\"},\n {'height': 562, 'width': 1218, 'crop': \"fill\"},\n {'overlay': \"iphone_x_notch\", 'width': 325, 'crop': \"scale\"},\n {'angle': 90},\n {'angle': \"hflip\"},\n {'flags': \"layer_apply\", 'gravity': \"west\"},\n {'if': \"else\"},\n {'height': 1218, 'width': 562, 'crop': \"fill\"},\n {'gravity': \"north\", 'overlay': \"iphone_x_notch\", 'width': 325},\n {'if': \"end\"},\n {'background': \"#000000\", 'radius': 54}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('country_sunset.jpg'))\n\t->conditional(Conditional::ifCondition(\"aspect_ratio > 1\",(new Transformation())\n\t->resize(Resize::fill()->width(1218)\n->height(562))\n\t->overlay(Overlay::source(\n\tSource::image(\"iphone_x_notch\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(325))\n\t->rotate(Rotate::byAngle(90))\n\t->rotate(Rotate::mode(\n\tRotationMode::horizontalFlip())))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::west()))\n\t)\n\t))\n\t->otherwise((new Transformation())\n\t->resize(Resize::fill()->width(562)\n->height(1218))\n\t->overlay(Overlay::source(\n\tSource::image(\"iphone_x_notch\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(325)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n\t)\n\t))\n\t)\n\t->roundCorners(RoundCorners::byRadius(54))\n\t->backgroundColor(Color::rgb(\"000000\"))\n\t->version(1506615977);","codeSnippet":"(new ImageTag('country_sunset.jpg'))\n\t->conditional(Conditional::ifCondition(\"aspect_ratio > 1\",(new Transformation())\n\t->resize(Resize::fill()->width(1218)\n->height(562))\n\t->overlay(Overlay::source(\n\tSource::image(\"iphone_x_notch\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(325))\n\t->rotate(Rotate::byAngle(90))\n\t->rotate(Rotate::mode(\n\tRotationMode::horizontalFlip())))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::west()))\n\t)\n\t))\n\t->otherwise((new Transformation())\n\t->resize(Resize::fill()->width(562)\n->height(1218))\n\t->overlay(Overlay::source(\n\tSource::image(\"iphone_x_notch\")\n\t->transformation((new Transformation())\n\t->resize(Resize::scale()->width(325)))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::north()))\n\t)\n\t))\n\t)\n\t->roundCorners(RoundCorners::byRadius(54))\n\t->backgroundColor(Color::rgb(\"000000\"))\n\t->version(1506615977);","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"country_sunset.jpg\", array(\"transformation\"=>array( array(\"if\"=>\"ar_gt_1\"), array(\"height\"=>562, \"width\"=>1218, \"crop\"=>\"fill\"), array(\"overlay\"=>\"iphone_x_notch\", \"width\"=>325, \"crop\"=>\"scale\"), array(\"angle\"=>90), array(\"angle\"=>\"hflip\"), array(\"flags\"=>\"layer_apply\", \"gravity\"=>\"west\"), array(\"if\"=>\"else\"), array(\"height\"=>1218, \"width\"=>562, \"crop\"=>\"fill\"), array(\"gravity\"=>\"north\", \"overlay\"=>\"iphone_x_notch\", \"width\"=>325), array(\"if\"=>\"end\"), array(\"background\"=>\"#000000\", \"radius\"=>54) )))","codeSnippet":"cl_image_tag(\"country_sunset.jpg\", array(\"transformation\"=>array(\n array(\"if\"=>\"ar_gt_1\"),\n array(\"height\"=>562, \"width\"=>1218, \"crop\"=>\"fill\"),\n array(\"overlay\"=>\"iphone_x_notch\", \"width\"=>325, \"crop\"=>\"scale\"),\n array(\"angle\"=>90),\n array(\"angle\"=>\"hflip\"),\n array(\"flags\"=>\"layer_apply\", \"gravity\"=>\"west\"),\n array(\"if\"=>\"else\"),\n array(\"height\"=>1218, \"width\"=>562, \"crop\"=>\"fill\"),\n array(\"gravity\"=>\"north\", \"overlay\"=>\"iphone_x_notch\", \"width\"=>325),\n array(\"if\"=>\"end\"),\n array(\"background\"=>\"#000000\", \"radius\"=>54)\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().if(\"ar_gt_1\").chain() .height(562).width(1218).crop(\"fill\").chain() .overlay(new Layer().publicId(\"iphone_x_notch\")).width(325).crop(\"scale\").chain() .angle(90).chain() .angle(\"hflip\").chain() .flags(\"layer_apply\").gravity(\"west\").chain() .if(\"else\").chain() .height(1218).width(562).crop(\"fill\").chain() .gravity(\"north\").overlay(new Layer().publicId(\"iphone_x_notch\")).width(325).chain() .if(\"end\").chain() .background(\"#000000\").radius(54)).imageTag(\"country_sunset.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .if(\"ar_gt_1\").chain()\n .height(562).width(1218).crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"iphone_x_notch\")).width(325).crop(\"scale\").chain()\n .angle(90).chain()\n .angle(\"hflip\").chain()\n .flags(\"layer_apply\").gravity(\"west\").chain()\n .if(\"else\").chain()\n .height(1218).width(562).crop(\"fill\").chain()\n .gravity(\"north\").overlay(new Layer().publicId(\"iphone_x_notch\")).width(325).chain()\n .if(\"end\").chain()\n .background(\"#000000\").radius(54)).imageTag(\"country_sunset.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"country_sunset.jpg\", :transformation=>[ {:if=>\"ar_gt_1\"}, {:height=>562, :width=>1218, :crop=>\"fill\"}, {:overlay=>\"iphone_x_notch\", :width=>325, :crop=>\"scale\"}, {:angle=>90}, {:angle=>\"hflip\"}, {:flags=>\"layer_apply\", :gravity=>\"west\"}, {:if=>\"else\"}, {:height=>1218, :width=>562, :crop=>\"fill\"}, {:gravity=>\"north\", :overlay=>\"iphone_x_notch\", :width=>325}, {:if=>\"end\"}, {:background=>\"#000000\", :radius=>54} ])","codeSnippet":"cl_image_tag(\"country_sunset.jpg\", :transformation=>[\n {:if=>\"ar_gt_1\"},\n {:height=>562, :width=>1218, :crop=>\"fill\"},\n {:overlay=>\"iphone_x_notch\", :width=>325, :crop=>\"scale\"},\n {:angle=>90},\n {:angle=>\"hflip\"},\n {:flags=>\"layer_apply\", :gravity=>\"west\"},\n {:if=>\"else\"},\n {:height=>1218, :width=>562, :crop=>\"fill\"},\n {:gravity=>\"north\", :overlay=>\"iphone_x_notch\", :width=>325},\n {:if=>\"end\"},\n {:background=>\"#000000\", :radius=>54}\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().If(\"ar_gt_1\").Chain() .Height(562).Width(1218).Crop(\"fill\").Chain() .Overlay(new Layer().PublicId(\"iphone_x_notch\")).Width(325).Crop(\"scale\").Chain() .Angle(90).Chain() .Angle(\"hflip\").Chain() .Flags(\"layer_apply\").Gravity(\"west\").Chain() .If(\"else\").Chain() .Height(1218).Width(562).Crop(\"fill\").Chain() .Gravity(\"north\").Overlay(new Layer().PublicId(\"iphone_x_notch\")).Width(325).Chain() .If(\"end\").Chain() .Background(\"#000000\").Radius(54)).BuildImageTag(\"country_sunset.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .If(\"ar_gt_1\").Chain()\n .Height(562).Width(1218).Crop(\"fill\").Chain()\n .Overlay(new Layer().PublicId(\"iphone_x_notch\")).Width(325).Crop(\"scale\").Chain()\n .Angle(90).Chain()\n .Angle(\"hflip\").Chain()\n .Flags(\"layer_apply\").Gravity(\"west\").Chain()\n .If(\"else\").Chain()\n .Height(1218).Width(562).Crop(\"fill\").Chain()\n .Gravity(\"north\").Overlay(new Layer().PublicId(\"iphone_x_notch\")).Width(325).Chain()\n .If(\"end\").Chain()\n .Background(\"#000000\").Radius(54)).BuildImageTag(\"country_sunset.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('country_sunset.jpg').transformation(Transformation()\n\t.addTransformation(\"if_ar_gt_1\/c_fill,h_562,w_1218\/c_scale,l_iphone_x_notch,w_325\/a_90\/a_hflip\/fl_layer_apply,g_west\/if_else\/c_fill,h_1218,w_562\/g_north,l_iphone_x_notch,w_325\/if_end\/b_rgb:000000,r_54\")\n\t.version(1506615977));","codeSnippet":"cloudinary.image('country_sunset.jpg').transformation(Transformation()\n\t.addTransformation(\"if_ar_gt_1\/c_fill,h_562,w_1218\/c_scale,l_iphone_x_notch,w_325\/a_90\/a_hflip\/fl_layer_apply,g_west\/if_else\/c_fill,h_1218,w_562\/g_north,l_iphone_x_notch,w_325\/if_end\/b_rgb:000000,r_54\")\n\t.version(1506615977));","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().setIf(\"ar_gt_1\").chain() .setHeight(562).setWidth(1218).setCrop(\"fill\").chain() .setOverlay(\"iphone_x_notch\").setWidth(325).setCrop(\"scale\").chain() .setAngle(90).chain() .setAngle(\"hflip\").chain() .setFlags(\"layer_apply\").setGravity(\"west\").chain() .setIf(\"else\").chain() .setHeight(1218).setWidth(562).setCrop(\"fill\").chain() .setGravity(\"north\").setOverlay(\"iphone_x_notch\").setWidth(325).chain() .setIf(\"end\").chain() .setBackground(\"#000000\").setRadius(54)).generate(\"country_sunset.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setIf(\"ar_gt_1\").chain()\n .setHeight(562).setWidth(1218).setCrop(\"fill\").chain()\n .setOverlay(\"iphone_x_notch\").setWidth(325).setCrop(\"scale\").chain()\n .setAngle(90).chain()\n .setAngle(\"hflip\").chain()\n .setFlags(\"layer_apply\").setGravity(\"west\").chain()\n .setIf(\"else\").chain()\n .setHeight(1218).setWidth(562).setCrop(\"fill\").chain()\n .setGravity(\"north\").setOverlay(\"iphone_x_notch\").setWidth(325).chain()\n .setIf(\"end\").chain()\n .setBackground(\"#000000\").setRadius(54)).generate(\"country_sunset.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().if(\"ar_gt_1\").chain() .height(562).width(1218).crop(\"fill\").chain() .overlay(new Layer().publicId(\"iphone_x_notch\")).width(325).crop(\"scale\").chain() .angle(90).chain() .angle(\"hflip\").chain() .flags(\"layer_apply\").gravity(\"west\").chain() .if(\"else\").chain() .height(1218).width(562).crop(\"fill\").chain() .gravity(\"north\").overlay(new Layer().publicId(\"iphone_x_notch\")).width(325).chain() .if(\"end\").chain() .background(\"#000000\").radius(54)).generate(\"country_sunset.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .if(\"ar_gt_1\").chain()\n .height(562).width(1218).crop(\"fill\").chain()\n .overlay(new Layer().publicId(\"iphone_x_notch\")).width(325).crop(\"scale\").chain()\n .angle(90).chain()\n .angle(\"hflip\").chain()\n .flags(\"layer_apply\").gravity(\"west\").chain()\n .if(\"else\").chain()\n .height(1218).width(562).crop(\"fill\").chain()\n .gravity(\"north\").overlay(new Layer().publicId(\"iphone_x_notch\")).width(325).chain()\n .if(\"end\").chain()\n .background(\"#000000\").radius(54)).generate(\"country_sunset.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('country_sunset.jpg').transformation(Transformation()\n\t.addTransformation(\"if_ar_gt_1\/c_fill,h_562,w_1218\/c_scale,l_iphone_x_notch,w_325\/a_90\/a_hflip\/fl_layer_apply,g_west\/if_else\/c_fill,h_1218,w_562\/g_north,l_iphone_x_notch,w_325\/if_end\/b_rgb:000000,r_54\")\n\t.version(1506615977));","codeSnippet":"cloudinary.image('country_sunset.jpg').transformation(Transformation()\n\t.addTransformation(\"if_ar_gt_1\/c_fill,h_562,w_1218\/c_scale,l_iphone_x_notch,w_325\/a_90\/a_hflip\/fl_layer_apply,g_west\/if_else\/c_fill,h_1218,w_562\/g_north,l_iphone_x_notch,w_325\/if_end\/b_rgb:000000,r_54\")\n\t.version(1506615977));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"country_sunset.jpg\")\n\t addTransformation(\"if_ar_gt_1\/c_fill,h_562,w_1218\/c_scale,l_iphone_x_notch,w_325\/a_90\/a_hflip\/fl_layer_apply,g_west\/if_else\/c_fill,h_1218,w_562\/g_north,l_iphone_x_notch,w_325\/if_end\/b_rgb:000000,r_54\")\n\t version(1506615977) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"country_sunset.jpg\")\n\t addTransformation(\"if_ar_gt_1\/c_fill,h_562,w_1218\/c_scale,l_iphone_x_notch,w_325\/a_90\/a_hflip\/fl_layer_apply,g_west\/if_else\/c_fill,h_1218,w_562\/g_north,l_iphone_x_notch,w_325\/if_end\/b_rgb:000000,r_54\")\n\t version(1506615977) \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(\"country_sunset.jpg\", {transformation: [ {if: \"ar_gt_1\"}, {height: 562, width: 1218, crop: \"fill\"}, {overlay: new cloudinary.Layer().publicId(\"iphone_x_notch\"), width: 325, crop: \"scale\"}, {angle: 90}, {angle: \"hflip\"}, {flags: \"layer_apply\", gravity: \"west\"}, {if: \"else\"}, {height: 1218, width: 562, crop: \"fill\"}, {gravity: \"north\", overlay: new cloudinary.Layer().publicId(\"iphone_x_notch\"), width: 325}, {if: \"end\"}, {background: \"#000000\", radius: 54} ]})","codeSnippet":"$.cloudinary.image(\"country_sunset.jpg\", {transformation: [\n {if: \"ar_gt_1\"},\n {height: 562, width: 1218, crop: \"fill\"},\n {overlay: new cloudinary.Layer().publicId(\"iphone_x_notch\"), width: 325, crop: \"scale\"},\n {angle: 90},\n {angle: \"hflip\"},\n {flags: \"layer_apply\", gravity: \"west\"},\n {if: \"else\"},\n {height: 1218, width: 562, crop: \"fill\"},\n {gravity: \"north\", overlay: new cloudinary.Layer().publicId(\"iphone_x_notch\"), width: 325},\n {if: \"end\"},\n {background: \"#000000\", radius: 54}\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(\"country_sunset.jpg\")\n .conditional(\n ifCondition(\n \"aspect_ratio > 1\",\n new Transformation()\n .resize(fill().width(1218).height(562))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation()\n .resize(scale().width(325))\n .rotate(byAngle(90))\n .rotate(mode(horizontalFlip()))\n )\n ).position(new Position().gravity(compass(\"west\")))\n )\n ).otherwise(\n new Transformation()\n .resize(fill().width(562).height(1218))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation().resize(scale().width(325))\n )\n ).position(new Position().gravity(compass(\"north\")))\n )\n )\n )\n .roundCorners(byRadius(54))\n .backgroundColor(\"#000000\")\n .setVersion(1506615977);","codeSnippet":"new CloudinaryImage(\"country_sunset.jpg\")\n .conditional(\n ifCondition(\n \"aspect_ratio > 1\",\n new Transformation()\n .resize(fill().width(1218).height(562))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation()\n .resize(scale().width(325))\n .rotate(byAngle(90))\n .rotate(mode(horizontalFlip()))\n )\n ).position(new Position().gravity(compass(\"west\")))\n )\n ).otherwise(\n new Transformation()\n .resize(fill().width(562).height(1218))\n .overlay(\n source(\n image(\"iphone_x_notch\").transformation(\n new Transformation().resize(scale().width(325))\n )\n ).position(new Position().gravity(compass(\"north\")))\n )\n )\n )\n .roundCorners(byRadius(54))\n .backgroundColor(\"#000000\")\n .setVersion(1506615977);","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\/if_ar_gt_1\/c_fill,h_562,w_1218\/c_scale,l_iphone_x_notch,w_325\/a_90\/a_hflip\/fl_layer_apply,g_west\/if_else\/c_fill,h_1218,w_562\/g_north,l_iphone_x_notch,w_325\/if_end\/b_rgb:000000,r_54\/v1506615977\/country_sunset.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"if":"ar_gt_1"},{"crop_mode":"fill","height":"562","width":"1218"},{"crop_mode":"scale","overlay":"iphone_x_notch","width":"325"},{"angle":"90"},{"angle":"hflip"},{"flags":"layer_apply","gravity":"west"},{"if":"else"},{"crop_mode":"fill","height":"1218","width":"562"},{"gravity":"north","overlay":"iphone_x_notch","width":"325"},{"if":"end"},{"background":"rgb:000000","radius":"54"}],"transformation_string":"if_ar_gt_1\/c_fill,h_562,w_1218\/c_scale,l_iphone_x_notch,w_325\/a_90\/a_hflip\/fl_layer_apply,g_west\/if_else\/c_fill,h_1218,w_562\/g_north,l_iphone_x_notch,w_325\/if_end\/b_rgb:000000,r_54","url_suffix":"","version":"1506615977","secure":true,"public_id":"country_sunset.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

做多件酷事 写出所有变换参数 使图像都变换 感觉怪怪的云化提供命名变换特征,用它把变换参数绑成单可复用参数

云度仪表板变换板中,可找到云度当前向当前用户账户提供的所有变换表点击下方编辑链路并使用存为保存变换名称我选择iphonex.保存过后, 列表变换中你能找到命名变换列表iphonex变换包目前可供所有存储图像使用,并可用下列方式应用测试图像:

<\/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(\"spencer-watson.jpg\").namedTransformation(name(\"iphonex\"));","codeSnippet":"new CloudinaryImage(\"spencer-watson.jpg\").namedTransformation(name(\"iphonex\"));","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(\"spencer-watson.jpg\").namedTransformation(name(\"iphonex\"));","codeSnippet":"new CloudinaryImage(\"spencer-watson.jpg\").namedTransformation(name(\"iphonex\"));","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(\"spencer-watson.jpg\").namedTransformation(name(\"iphonex\"));","codeSnippet":"new CloudinaryImage(\"spencer-watson.jpg\").namedTransformation(name(\"iphonex\"));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('spencer-watson.jpg', {transformation: [\"iphonex\"]}).toHtml();","codeSnippet":"cloudinary.imageTag('spencer-watson.jpg', {transformation: [\"iphonex\"]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"spencer-watson.jpg\").image(transformation=[\"iphonex\"])","codeSnippet":"CloudinaryImage(\"spencer-watson.jpg\").image(transformation=[\"iphonex\"])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('spencer-watson.jpg'))\n\t->namedTransformation(NamedTransformation::name(\"iphonex\"));","codeSnippet":"(new ImageTag('spencer-watson.jpg'))\n\t->namedTransformation(NamedTransformation::name(\"iphonex\"));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"spencer-watson.jpg\", array(\"transformation\"=>array(\"iphonex\")))","codeSnippet":"cl_image_tag(\"spencer-watson.jpg\", array(\"transformation\"=>array(\"iphonex\")))","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().named(\"iphonex\")).imageTag(\"spencer-watson.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().named(\"iphonex\")).imageTag(\"spencer-watson.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"spencer-watson.jpg\", :transformation=>[\"iphonex\"])","codeSnippet":"cl_image_tag(\"spencer-watson.jpg\", :transformation=>[\"iphonex\"])","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().Named(\"iphonex\")).BuildImageTag(\"spencer-watson.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Named(\"iphonex\")).BuildImageTag(\"spencer-watson.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('spencer-watson.jpg').transformation(Transformation()\n\t.namedTransformation(NamedTransformation.name(\"iphonex\")));","codeSnippet":"cloudinary.image('spencer-watson.jpg').transformation(Transformation()\n\t.namedTransformation(NamedTransformation.name(\"iphonex\")));","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().setNamed(\"iphonex\")).generate(\"spencer-watson.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setNamed(\"iphonex\")).generate(\"spencer-watson.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().named(\"iphonex\")).generate(\"spencer-watson.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().named(\"iphonex\")).generate(\"spencer-watson.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('spencer-watson.jpg').transformation(Transformation()\n\t.namedTransformation(NamedTransformation.name(\"iphonex\")));","codeSnippet":"cloudinary.image('spencer-watson.jpg').transformation(Transformation()\n\t.namedTransformation(NamedTransformation.name(\"iphonex\")));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"spencer-watson.jpg\")\n\t namedTransformation(NamedTransformation.name(\"iphonex\")) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"spencer-watson.jpg\")\n\t namedTransformation(NamedTransformation.name(\"iphonex\")) \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(\"spencer-watson.jpg\", {transformation: [\"iphonex\"]})","codeSnippet":"$.cloudinary.image(\"spencer-watson.jpg\", {transformation: [\"iphonex\"]})","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(\"spencer-watson.jpg\").namedTransformation(name(\"iphonex\"));","codeSnippet":"new CloudinaryImage(\"spencer-watson.jpg\").namedTransformation(name(\"iphonex\"));","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\/t_iphonex\/spencer-watson.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"transformation":"iphonex"}],"transformation_string":"t_iphonex","url_suffix":"","version":"","secure":true,"public_id":"spencer-watson.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" > 加载代码示例

读更多命名变换来并如何实现来.

现在你已经看到如何变换图像测试iPhoneX屏幕并用多图或产品测试iPhoneX这只是无限酷事之一 你可以用云处理图像操作参数.查查演示文集