画像フィルター

画像フィルターはリアルタイムですべてのピクセルの色を変換することで機能します。各フィルターは各ピクセルの赤・緑・青チャンネルに小さな数学的処理を適用します：brightness(150%)は1.5倍に乗算して画像を明るくし、grayscale(100%)はチャンネルを平均化して単一のグレートーンに変換し、blur(4px)は畳み込みカーネルを使用して各ピクセルを隣接ピクセルと混合します。これはHTML Canvas APIを通じてGPU上で実行されるため、スライダーをドラッグした瞬間にプレビューが更新されます——待機なし、アップロードなし、サーバー往復なし。

大きく2つのグループに分けられます。調整フィルターはトーンと色を変えながら写真を自然な見た目に保ちます——明度、コントラスト、彩度、色相回転がここに含まれます。エフェクトフィルターは画像を独特のルックに再スタイリングします——グレースケール（白黒）、セピア（温かみのあるヴィンテージ）、反転（ネガ）、ぼかし（ソフトフォーカス）、透明度（透過）。このエディターは9つすべてのCSSフィルター関数を提供します。

上のボックスに写真をドロップし（またはクリックして参照、Ctrl/Cmd+Vで貼り付け）、プリセットサムネイルをクリックするか調整スライダーをドラッグします。プレビューはリアルタイムで更新され、前後比較ハンドルでいつでも元の画像と比較できます。気に入った結果が得られたら、PNG ダウンロードまたは JPG ダウンロードをクリックしてフル解像度で保存します。何もアップロードされません——すべてのステップがブラウザ内で実行されます。

CSSフィルタープロパティは、フィルター関数のチェーンを使用してHTMLの任意の要素にグラフィカルエフェクトを適用します：brightness()、contrast()、saturate()、grayscale()、sepia()、hue-rotate()、invert()、blur()、opacity()。例えば、filter: contrast(120%) saturate(140%) sepia(15%); は力強くわずかに温かみのあるルックを作り出します。このツールはスライダーを動かすと同時にその正確な文字列を構築するため、スタイルシートにそのままコピーして貼り付けることができます。

Instagramスタイルのフィルターは基本的なCSSフィルター関数のプリセットの組み合わせです。Clarendon風のルックはおおよそcontrast(120%) saturate(135%)、褪せたフィルムのルックはcontrast(85%) brightness(110%) sepia(12%)、力強いVividトーンはcontrast(130%) saturate(160%)を積み重ねます。ギャラリーのプリセットサムネイルをクリックすれば写真に即座に適用され、個々のスライダーでさらに調整できます。VSOCやLightroom presetなどの有料エディターと同等の視覚的結果を——アプリなし、サブスクリプションなし、アップロードなしで。

白黒にするには、グレースケールを100%に設定します——B&Wプリセットがワンクリックで実行し、Noirはドラマチックな効果のために追加コントラストを加えます。セピアにするにはセピアスライダーを上げます；sepia(80%)でクラシックなブラウントーンのプリントが得られます。ヴィンテージルックには両方を組み合わせます：VintageプリセットはsepiA(55%) contrast(108%) brightness(104%) saturate(120%)を使用して、温かく柔らかく洗いざらされたフィルム感を演出します。

ツールによって異なります。Fotor、LunaPI、Pixlrなど多くのオンラインエディターは処理のために写真をサーバーにアップロードします。つまり、あなたの画像が他人のマシンに置かれ、分析やモデルトレーニングのために保持される可能性があります。UtiloKitの画像フィルターはブラウザ内のHTMLキャンバス上で完全に実行されます：画像はローカルで読み込まれ、ローカルで処理され、ローカルでダウンロードされます——アップロードされることも、保存されることも、あなた以外に見られることも一切ありません。