重现“Google Pixel 3a”网站的相机功能演示

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

谷歌上周发布了 Pixel 3a。在其网站上，它精彩地演示了该机相机的各项功能：景深编辑器和色彩突出。

深度编辑器（更改背景模糊/散景）：

色彩鲜艳演示（将背景颜色更改为黑白）

Pixel相机确实很棒。它在官网上的演示也很有意思。
你可以滑动图片下方的滑块，增强或减弱特效。非常酷。

（重新）创建该演示：

我们来做背景虚化或散景效果。这张很棒的图片来自 Unsplash。

注意：本文并非教你如何编写代码来实现背景模糊或动态改变背景饱和度。谷歌网站上也没有采用这些技术。

具体做法如下（以及谷歌的做法）：

两张图片：一张未应用任何特效，另一张应用了最大特效。两张图片上下排列。滑块可以增加/减少opacity上方图片的特效。
真是巧妙的设计！

操作方法如下：

重叠

来自 Unsplash 的图片是我们图片的原始版本（版本 1） ，未应用任何特效
。 我在 Photoshop 中模糊了该图片的背景。（提示：您也可以在Snapseed等基础图像编辑应用程序中完成此操作）。
背景模糊后的编辑图片是我们应用了最大特效的版本（版本 2）。
要堆叠这两张图片，我们只需为它们指定position: absolute相同的位置属性（top例如，left……）。

所以，在HTML中：

  <div class="images">
    <img src="//version-1">
    <img id="blur-img" class="blur-img" src="//version-2">
  </div>

在 CSS 中：

  img {
    width: 300px;
    height: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }
  .blur-img {
    opacity: 0;
  }

现在，（在 HTML 中指定的）图像id="blur-img"将正好放置在版本 1 图像的上方。我们将opacity版本 2 图像（模糊图像）的宽度设置为00。
因此，唯一可见的图像将是版本 1（原始图像）。

滑过

HTMLinput元素type="range"用作滑块。它接受最小值min和max最大值。为了方便起见，我们将最小值设置为 0 0，最大值设置为 1。100在
JavaScript 中，我们需要获取范围输入框的值。
根据范围输入框的值，顶部图像（）的透明度id="blur-img"将从0隐藏变为1可见。

所以，在JS中，添加一个方法来处理这种情况：

const changeBlur = (value) => {
  document.getElementById("blur-img").style.opacity = value/100;
}

我们除以value是100因为范围输入将返回介于0和之间的值100，而图像的不透明度需要介于0和 之间1。

在 HTML 中，添加范围输入框：

<input class="slider" type="range" min="0" max="100" value="0"
oninput="changeBlur(this.value)">

🎉 差不多就是这样了。代码虽然不多，但效果却非常出色。

以下是背景模糊效果的 CodePen 演示：

以下是色彩突出效果的 CodePen 演示：