画像フィルターと補正

Q: 変更を元に戻せますか？

**オリジナル**のプリセットをクリックすると、すべてのスライダーがリセットされます。元の画像が変更されることはありません。

明るさ、コントラスト、彩度、色相、グレースケール、セピア、反転、ぼかしを調整したり、プリセットを適用したりできます。書き出しはどのブラウザでもプレビューと一致します。

ここに画像をドロップするか、クリックして選択

クリップボードから画像を貼り付けることもできます（Ctrl+V / ⌘V）

すべてブラウザ内で実行されます。データがアップロードされることはありません。

画像フィルターとは？

画像に写真の補正とエフェクトを適用します。brightness、contrast、saturation、grayscale、sepia、invert、hue rotation、blur を、スライダーで個別に、または白黒、セピア、ヴィンテージ、ビビッド、クール、ネガなどのプリセットで調整できます。処理前後の表示で効果を確認でき、書き出されるファイルは見たままの内容です。

画像フィルターの使い方

画像をドロップ、選択、または貼り付けます。
プリセットをクリックするか、各調整のスライダーを動かします。
処理前と処理後のプレビューを比較します。
出力形式を選び、フィルターをかけた画像をダウンロードします。

例

入力

Pure red pixel (#FF0000), Grayscale 100%

出力

#363636 (0.2126 × 255 ≈ 54 for each channel)

画像フィルターを使うべき場面

写真、スクリーンショット、SNS画像の簡単な補正や、個性的な見た目づくりに使います。本格的な写真編集ソフトではなく、カーブ、レイヤー、マスク、部分補正はなく、非常に大きな画像は処理に少し時間がかかります。

画像フィルターの仕組み

フィルターは、W3CのFilter Effects仕様の式（CSSの filter と同じ計算）に従い、JavaScriptでピクセルごとに計算されます。明るさとコントラストには線形の伝達関数、saturate、hue-rotate、grayscale、sepiaにはカラーマトリクス、そして反転の関数を、この順に適用し、各ステップの後でクランプします。ぼかしは、乗算済みアルファに対する3回のボックスブラーで近似したガウスぼかしです。canvasの filter プロパティを使わないため、Safariのように対応していないブラウザでも、書き出しにエフェクトが含まれます。