Apple 是如何在 Apple Music 的专辑封面背后创造出模糊的？

Posted 2023-03-10

【中文标题】Apple 是如何在 Apple Music 的专辑封面背后创造出模糊的？

【英文标题】：How did Apple create the blur behind the album cover in Apple Music?

【发布时间】：2016-12-12 06:00:26

【问题描述】：

它似乎是一个模糊的阴影，但我似乎找不到合适的工具来重新创建它。我看过ciImage，但不知道启动它的好方法。指导将不胜感激！

【问题讨论】：

只是在视觉上盯着事情看——并且知道你可以链接各种 CI 过滤器（使用一个的输出作为下一个的输入）——我敢打赌他们是（1）使用模糊“扩展最底层（注意左上角的金色）然后（2）在它上面分层一些东西（这不是CI）就像一个稍微弯曲的白色层，然后在专辑顶部（他们不再这么称呼它了吗？）艺术品。

【参考方案1】：

您可以使用 UIImage 和 Core Image Filters (CIFilters) 来实现效果。

通过使用具有相同图像的两个 UIImageViews（或以编程方式复制封面 ImageView），然后将 CIGaussianBlurFilter 和 CIExposureAdjust 应用到一个在背景上。

如果你做得对，它可能看起来像这样。

【参考方案2】：

你可以使用UIVisualEffectView来做到这一点

let blurEffect = UIBlurEffect(style: .Light)
let visualEffectView = UIVisualEffectView(effect:blurEffect)
visualEffectView.frame = imageView.bounds
imageView.addSubview(visualEffectView) // album artwork imageview, 

【讨论】：

我认为这只会模糊艺术封面。此外，背景似乎是一条半径很大的阴影路径；不知何故，阴影路径的颜色就是艺术品的颜色。我试过artworkImage.layer.shadowColor = UIColor(patternImage: image)，但它只是按原样显示图像。

看看github.com/NobelLiu/NLImageColor/blob/master/NLImageColor/…

【参考方案3】：

纯 html、CSS 和 JS。

✍? CodePen：https://codepen.io/livehelp/pen/yLXmqWB?editors=1000

? 重要提示：要查看正确位于下方的反射，请勿使用蓝色的“运行代码片段”按钮。而是点击蓝色的“展开代码片段”链接，然后点击蓝色的“运行代码片段”按钮。

<style>
body margin: 5%;  
img  width:300px; position:relative; z-index:1; border-radius: 10px;   
#srblur 
position:relative;
transform: translate(-100%, 7%) scale(1.1);
z-index:0;
filter: blur(20px);
opacity:0.7;

</style>
<img src="https://images-na.ssl-images-amazon.com/images/I/71-S-DJ5YML._SL1000_.jpg" />
<script>  
  var elmnt = document.getElementsByTagName("img")[0];
  var cln = elmnt.cloneNode(true);
  document.body.appendChild(cln);
  cln.id = "srblur";
</script>