在2017年9月12日的iPhone 10周年纪念活动上，iPhone 8、8 plus和iPhone X的发布引起了极大的轰动。iphonex（发音为"iphone10"）有一个5.8英寸的超级视网膜屏幕，它在其他苹果中脱颖而出，为这款机器打出了"全屏幕"的标语。此外，这款手机的分辨率为2436 x 1125，是迄今为止分辨率最高的iPhone。自发布以来，设计师和原型设计人员显然已经全力以赴地开发产品和设计，以配合即将到来的iPhoneX网络研讨会这无疑是iphonex最吸引人的特性之一！（还有上面那张美妙的肖像画）。最上面的缺口。大胆，优雅，周围有流动，仍然迷人，即使下面的画像中的人似乎不那么激动。我们得想办法让他开心，如何让这个缺口真正美丽，对我们的形象有用。让我们用云图像转换来做这个工具iphonex屏幕的独特之处在于，容纳摄像头和其他传感器的黑暗空间（缺口）实际上是硬玻璃屏幕的一部分，显示的内容围绕着这个缺口流动。这是在设计适合全屏幕iPhone的UI/UX产品时需要考虑的一个非常重要的方面。在这篇文章中，我们将讨论一种修复图像的方法，测试它在iphonex上的外观？使用Cloudinary可以动态地进行图像管理和操作。我说的是动态的，这意味着图像是通过动态传递url来操作的！Cloudinary还为移动设计提供了移动优先的图像优化，最棒的是，它易于使用。这些图像在CDN上立即可用请求。云数据库的图像管理和操作服务将在本文中用于模拟图像在iphonex屏幕上的显示方式。有了它，您可以测试您的图像和产品，看看它们在这种新型的屏幕X.之前我们开始，让我们来看看我们将成为的示例图像操纵。操纵图像要执行此测试，需要缺口图像。接下来，上传要操作的图像。在我们的例子中，我们上传了上面显示的游泳池图像上面。现在我们需要运用操纵。Cloudinary中的图像采取以下形式：复制到剪贴板https://res.cloudinary.com//image/upload//因此，要调整游泳池图像，我们使用下面的URL，并处理部分：https://cloudinary-res.cloudinary.com/image/upload//Spencer_Watson.jpgCloudinary公司提供了许多图像URL操作参数，可以在这里找到它们。对于这个测试，我们将使用很多参数。这个网址一开始看起来可能有点吓人，但向下滚动一点，我们会带你浏览整个过程URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll公司：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/if_ar_gt_1/c_fill，h_562，w_1218/c_刻度，l_iphone_x_槽口，w_325/a_90/a_hflip/fl_层应用，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。jpgRuby:复制到剪贴板cl_image_tag（"spencer-watson-36.jpg"，：transformation=>[{：如果=>"ar_gt_1"}，{:height=>562，：width=>1218，：crop=>"fill"}，{:overlay=>"iphone_x_notch"，：width=>325，：crop=>"缩放"}，{：角度=>90}，{:angle=>"hflip"}，{:flags=>"层应用"，：gravity=>"west"}，{:if=>"else"}，{:height=>1218，：width=>562，：crop=>"fill"}，{:gravity=>"北"，：overlay=>"iphone_x_notch"，：width=>325，：crop=>"scale"}，{：如果=>"结束"}，{:background=>"#000000"，：radius=>54}])PHP:复制到剪贴板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"），阵列（"角度"=>90），数组（"angle"=>"hflip"），数组（"flags"=>"layer_apply"，"gravity"=>"west"），数组（"if"=>"else"），数组（"height"=>1218，"width"=>562，"crop"=>"fill"），数组（"重力"=>"北"，"覆盖"=>"iphone_x_槽口"，"宽度"=>325，"裁剪"=>"缩放"），数组（"if"=>"end"），数组（"background"=>"#000000"，"radius"=>54）)))Python:复制到剪贴板CloudinaryImage（"spencer-watson-36.jpg"）.image（转换=[{'if'："ar_gt_1"}，{'height'：562，'width'：1218，'crop'："fill"}，{'overlay'："iphone凹口"，"宽度"：325，"裁剪"："缩放"}，{"角度"：90}，{'angle'："hflip"}，{'flags'："层应用"，"重力"："west"}，{'if'："else"}，{'height'：1218，'width'：562，'crop'："fill"}，{'gravity'："北"，"overlay"："iphone_x_notch"，'width'：325，'crop'："scale"}，{'if'："结束"}，{'background'："#000000"，'半径'：54}])节点.js：复制到剪贴板cloudinary.image（"spencer-watson-36.jpg"，{转换：[{如果："ar_gt_1"}，{高562，宽1218，裁剪："填充"}，{覆盖："iphone_x_槽口"，宽度：325，裁剪："scale"}，{角度：90}，{角度："hflip"}，{标志："层应用"，重力："西"}，{如果："else"}，{高：1218，宽：562，裁剪："填充"}，{重力："北"，覆盖："iphone_x_槽口"，宽度：325，裁剪："缩放"}，{如果："结束"}，{背景："#000000"，半径：54}]})Java:复制到剪贴板cloudinary.url（）.转换（新转换（）.if（"ar\u gt_1"）.chain（）.height（562）.width（1218）.裁剪（"fill"）.chain（）.overlay（new Layer（）.publicId（"iphone_x_notch"））.width（325）.crop（"scale"）.chain（）.角度（90）.链条（）.angle（"hflip"）.chain（）.flags（"层应用"）.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（"结束"）.chain（）.background（"#000000"）.radius（54））.imageTag（"spencer-watson-36.jpg"）；JS:复制到剪贴板cloudinary.imageTag（'spencer-watson-36.jpg'，{转换：[{如果："ar_gt_1"}，{高562，宽1218，裁剪："填充"}，{覆盖：新建云层（）.publicId（"iphone_x_notch"），宽度：325，裁剪："scale"}，{角度：90}，{角度："hflip"}，{标志："层应用"，重力："西"}，{如果："else"}，{高：1218，宽：562，裁剪："填充"}，{重力："北"，叠加：新云层（）.publicId（"iphone_x_notch"），宽度：325，裁剪："scale"}，{如果："结束"}，{背景："#000000"，半径：54}]}).toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"spencer-watson-36.jpg"，{转换：[{如果："ar_gt_1"}，{高562，宽1218，裁剪："填充"}，{覆盖：新建云层（）.publicId（"iphone_x_notch"），宽度：325，裁剪："scale"}，{角度：90}，{角度："hflip"}，{标志："层应用"，重力："西"}，{如果："else"}，{高：1218，宽：562，裁剪："填充"}，{重力："北"，叠加：新云层（）.publicId（"iphone_x_notch"），宽度：325，裁剪："scale"}，{如果："结束"}，{背景："#000000"，半径：54}]})反应：复制到剪贴板36Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（新转换（）.If（"ar\u gt_1"）.Chain（）.Height（562）.Width（1218）.裁剪（"fill"）.Chain（）.Overlay（new Layer（）.PublicId（"iphone_x_notch"））.Width（325）.Crop（"scale"）.Chain（）.角度（90）.链条（）.Angle（"hflip"）.Chain（）.Flags（"层应用"）.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（"结束"）.Chain（）.Background（"#000000"）.Radius（54））.BuildImageTag（"spencer-watson-36.jpg"）Android:复制到剪贴板媒体管理器.get（）.url（）.transformation（新转换（）.if（"ar\u gt_1"）.chain（）.height（562）.width（1218）.裁剪（"fill"）.chain（）.overlay（new Layer（）.publicId（"iphone_x_notch"））.width（325）.crop（"scale"）.chain（）.角度（90）.链条（）.angle（"hflip"）.chain（）