リアルタイムPhotoshopの構築🎨

我々は、この週末驚くべき何かをするつもりです-我々は、Photoshopを再作成しています!
まあ、完全にはないが、私たちは、イメージフィルタを再作成します.
私は人々が各フィルタの効果が何であるかを理解できるように遊び場を構築することを選択!私はあなたがそれが役に立つことを願っています.
この記事では次のように述べます.

CSS変数

CSSフィルタ

JavaScriptの設定

実際にそれがどのように動作するかを表示しようとするので、このcodepenで遊んでください.

HTML構造

我々のアプリケーションは、左側に1つのイメージを持っているし、右側に我々のスライダコントロールので、これを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(今日は使用しません)

ぼかし

明るさ

コントラスト

ドロップシャドウ

グレイスケール

色相回転

インバート

不透明度

飽和する

セピア色

それで、これに対処して、フィルタを我々のイメージに加えましょう.

#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;
}

すごい!大規模なコードブロックが、基本的には、1つだけのフィルタ要素を持つことができますので、“チェーン”お互いの後にフィルタ!
OK、クール、我々は今我々のイメージ上のすべてのフィルタを設定するが、何も変更?
正しい!これらはすべてのフィルタのすべてのデフォルト値ですので、いくつかを追加しましょうJavaScript スライダーを我々の変数に影響させる.

JavaScriptの設定

まず最初に、我々のイメージオブジェクトを始めて、得ましょう.

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 or