"Google Pixel 3a"웹사이트의 카메라 기능 데모 다시 만들기

구글은 지난주 픽셀 3a를 출시했다. website 에서 카메라의 기능인 깊이 편집기 및 컬러 팝을 훌륭하게 시연합니다.


깊이 편집기(배경 흐림/보케 변경):


컬러 팝 데모(배경색을 흑백으로 변경)

픽셀 카메라는 의심할 여지 없이 놀랍습니다. 그리고 웹 사이트의 데모는 흥미 롭습니다.
사진 아래의 슬라이더로 재생할 수 있습니다. 효과를 높이거나 낮춥니다. 꽤 멋지다.

(재)해당 데모 만들기:

Background-blur 또는 Bokeh 효과를 적용해 보겠습니다. Unsplash에서 놀라운 이미지this를 얻었습니다.


참고: 이것은 실제로 배경을 흐리게 하거나 배경 채도를 동적으로 변경하는 방법에 대한 코딩 문서가 아닙니다. 그것은 Google이 웹사이트에서 하는 일도 아닙니다.

수행 방법은 다음과 같습니다(및 Google이 수행하는 방법).

두 개의 이미지: 하나는 효과가 적용되지 않은 상태이고 다른 하나는 최대 효과가 적용된 상태입니다. 하나의 이미지가 다른 이미지 위에 있습니다. 슬라이더는 상단 이미지의 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;
  }

이제 id="blur-img"(HTML로 지정됨)가 있는 이미지가 정확히 버전 1 이미지 위에 배치됩니다. 그리고 버전 2 이미지(흐릿한 이미지)의 opacity를 0로 설정합니다.
따라서 표시되는 유일한 이미지는 version-1(원본 이미지)입니다.

슬라이딩

input가 있는 type="range" HTML 요소는 슬라이더 역할을 합니다. min 및 max 값을 사용합니다. 편의를 위해 min을 0로, max를 100로 설정했습니다.
JS를 사용하면 범위 입력 값을 가져와야 합니다.
범위 입력 값에 따라 상단 이미지( 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 데모는 다음과 같습니다.