실시간 포토샵 만들기 🎨

이번 주말에 우리는 놀라운 일을 할 것입니다. Photoshop을 다시 만들 것입니다!

음, 전부는 아니지만 가변 CSS 필터를 사용하여 Photoshop에서 이미지 필터를 다시 만들 것입니다.

나는 사람들이 각 필터의 ​​효과가 무엇인지 이해할 수 있도록 놀이터를 만들기로 선택했습니다! 도움이 되셨기를 바랍니다.

이 기사에서 다룰 내용은 다음과 같습니다.

CSS 변수

CSS 필터

CSS 변수를 설정하는 JavaScript

실제로 사용해 보면 어떻게 작동하는지 알 수 있으므로 이 Codepen을 가지고 놀아 보십시오.

HTML 구조

우리의 응용 프로그램은 왼쪽에 하나의 이미지가 있고 오른쪽에 슬라이더 컨트롤이 있을 것이므로 먼저 HTML로 만들어 보겠습니다.

<div class="container">
  <img
    src="https://images.unsplash.com/photo-1508671323699-6df22ecaec2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=250&q=80"
    id="main-image"
  />
  <div class="toolbox">
    <label>
      Blur
      <input id="blur" max="20" min="0" step="1" type="range" value="0" />
    </label>
    <label>
      Brightness
      <input id="brightness" max="1" min="0" step="0.1" type="range" value="1" />
    </label>
    <label>
      Contrast
      <input id="contrast" max="200" min="0" step="1" type="range" value="100" />
    </label>
    <label>
      Grayscale
      <input id="grayscale" max="100" min="0" step="1" type="range" value="0" />
    </label>
    <label>
      Hue
      <input id="hue" max="360" min="0" step="1" type="range" value="0" />
    </label>
    <label>
      Invert
      <input id="invert" max="100" min="0" step="1" type="range" value="0" />
    </label>
    <label>
      Opacity
      <input id="opacity" max="100" min="0" step="1" type="range" value="100" />
    </label>
    <label>
      Saturate
      <input id="saturate" max="200" min="0" step="1" type="range" value="100" />
    </label>
    <label>
      Sepia
      <input id="sepia" max="100" min="0" step="1" type="range" value="0" />
    </label>
  </div>
</div>

보시다시피 HTML range 유형 슬라이더를 사용하고 각 필터의 ​​일반 값인 기본값을 제공합니다.

일반 스타일 추가

일반적인 스타일을 추가하여 시작하겠습니다.

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #eee;
}
.toolbox {
  margin-left: 50px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
label {
  margin-bottom: 5px;
}

멋진 것은 없지만 모든 것을 사용하고 Flex to center 요소에 기본 여백을 추가합니다.

CSS 변수 추가

오늘의 주제에서 우리는 CSS Variables을 다루고 있습니다. 이들은 JavaScript로 쉽게 변경할 수 있기 때문에 매우 유용합니다!

:root {
  --blur: 0;
  --brightness: 1;
  --contrast: 100;
  --grayscale: 0;
  --hue: 0;
  --invert: 0;
  --opacity: 100;
  --saturate: 100;
  --sepia: 0;
}

위에서 우리가 사용하고 있는 모든 변수를 볼 수 있습니다. 우리가 생성한 HTML 입력과 일치합니다!

그래서 우리는 모두 기본 시작점 값을 갖도록 설정했지만 어떻게 작동합니까?

CSS 필터

CSS Disco Text에 대한 기사에서 보았듯이 CSS 필터는 정말 멋집니다.

사용할 수 있는 필터는 다음과 같습니다.

url(오늘은 사용하지 않음)

흐림

밝기

대비

drop-shadow (또한, 사용되지 않음)

그레이스케일

색조 회전

인버트

불투명도

포화하다

세피아

이제 이 문제를 해결하고 이미지에 필터를 추가해 보겠습니다.

#main-image {
  transition: all 300ms ease-in-out;
  filter: blur(calc(1px * var(--blur))) brightness(var(--brightness)) contrast(
      calc(1% * var(--contrast))
    ) grayscale(calc(1% * var(--grayscale))) hue-rotate(calc(1deg * var(--hue))) invert(
      calc(1% * var(--invert))
    )
    opacity(calc(1% * var(--opacity))) saturate(calc(1% * var(--saturate))) sepia(calc(1% *
          var(--sepia)));
  border: 5px solid #fff;
}

우와! 대규모 코드 블록이지만 기본적으로 하나의 필터 요소만 가질 수 있으므로 필터를 서로 "연결"합니다!

좋습니다. 이제 이미지에 모든 필터를 설정했지만 아무 것도 변경되지 않았나요?

옳은! 이들은 모두 각 필터의 ​​기본값이므로 일부JavaScript를 추가하여 슬라이더가 변수에 영향을 미치도록 합시다.

자바스크립트 CSS 변수 설정

먼저 이미지 개체를 시작하고 가져옵니다.

var img = document.getElementById('main-image');

자, 이제 모든 슬라이더를 찾아야 합니다.

var inputs = document.querySelectorAll('input');

다음으로 각 입력을 반복하고 이벤트 리스너를 연결합니다.

[].forEach.call(inputs, function(input) {
  input.addEventListener('input', e => {
    img.style.setProperty('--' + input.id, input.value);
  });
});

입력 이벤트에 이벤트 리스너를 추가하므로 슬라이더가 변경될 때마다 함수를 실행합니다.
그런 다음 함수는 이미지 변수를 가져오고 setProperty 함수를 사용하여 변수(예: --blur )를 입력 값으로 설정합니다!

브라우저 지원

앞에서 언급했듯이 CSS 필터는 멋지지만 아직 널리 지원되지는 않습니다 😩.

polyfill 이 있지만 제한적이기도 합니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나