6つの興味深い画像グレースケール変換アルゴリズム

[楊静卓のブログより引用]序文

白黒写真の時代は過ぎ去りましたが、今、昔の写真を見ると、昔に戻ったような気分になりませんか？ なかなか素敵ですよね？

この記事を読めば、カラー写真を様々な白黒写真に変換できるようになります。

この記事には、グレースケール アルゴリズムの完全なオンライン例が記載されています。例が多数あるため、少し遅くなる場合があります。

例のソースコードはblog/demoにあります。

三原色とグレースケール

原色は他の色を混ぜても得られない基本的な色です。一般的に、加法混色の三原色は赤、緑、青です。三原色を異なる割合で混ぜると、他の新しい色を作り出すことができます。この原色システムは、赤 (R)、緑 (G)、青 (B) で構成される色システムであり、「RGB 色空間」と呼ばれることもあります。

これら 3 つの原色を均等に重ねると灰色になり、3 つの原色の強度を最大にして均等に重ねると白色になります。グレースケールは、色が存在せず、すべての RGB カラー コンポーネントが等しいことを意味します。

画像のピクセルデータを取得する

アルゴリズムは言語を区別しません。ここではフロントエンドを例として使用します。キャンバスを使用して、画像の特定の領域のピクセルデータを取得できます

//疑似コード
var img = 新しい画像();
画像ファイル
var myCanvas = document.querySelector(canvasId);
 var canvasCtx = myCanvas.getContext( "2d" );
 canvasCtx.drawImage(画像、0、0、画像の幅、画像の高さ);
 //画像ピクセルデータ
var data = canvasCtx.getImageData(0, 0, img.width, img.height);

getImageData() を使用して ImageData オブジェクトを返します。このオブジェクトには、必要なデータであるデータ属性があります。データは Uint8ClampedArray で記述される 1 次元配列で、RGBA 順序のデータを含み、0 から 255 (両端を含む) までの整数で表されます。 したがって、ピクセルには 4 つのデータ (RGBA) があり、RGB は赤、緑、青、A は透明度を表します。

たとえば、この記事の 720 * 480 の果物の画像には合計 720 * 480 = 259200 ピクセルがあり、各ピクセルには 4 つのデータがあるため、データ配列の合計の長さは 259200 * 4 = 1036800 になります。

画像データが非常に長いことがわかります。一度に多くの画像を処理すると計算量もかなり多くなります。そのため、この例ではワーカーを使用して、重い計算タスクをバックグラウンド スレッドに引き渡します。

アルゴリズムの基本ステップ

1. 各ピクセルの赤、緑、青の値を取得します。
2. グレースケール アルゴリズムを使用してグレースケール値を計算します。
3. ピクセルの元の赤、緑、青の値の代わりに、このグレースケール値を使用します。

たとえば、グレースケール アルゴリズムは次のとおりです。

グレー = (赤 + 緑 + 青) / 3

計算プロセス:

 //疑似コード
(varイメージ内のピクセル) {
  var Red = Image[ピクセル].Red
  var Green = Image[ピクセル].Green
  var Blue = Image[ピクセル].Blue 
 
  var グレー = (赤 + 緑 + 青) / 3 
 
  Image[ピクセル].Red = グレー
  Image[ピクセル].Green = グレー
  Image[ピクセル].Blue = グレー
}

簡単ですよね？

美味しい鮮やかな色の果物が沢山ありますが、もうすぐ灰色になってしまいます！！

アルゴリズム 1 - 平均化

アルゴリズム 1 の使用:

これは最も一般的なグレースケール アルゴリズムであり、単純かつ強力です。式は次のとおりです。

グレー = (赤 + 緑 + 青) / 3

このアルゴリズムは、適切なグレースケール値を生成でき、式が単純なため、保守と最適化が容易です。しかし、欠点がないわけではありません。シンプルで高速ですが、人間の目の知覚の観点から見ると、画像のグレースケールの影と明るさが十分ではありません。したがって、より複雑な計算が必要になります。

アルゴリズム2 - 人間の目の知覚に基づく

アルゴリズム2の使用:

アルゴリズム 1 とアルゴリズム 2 で生成された画像に大きな違いはないように思われるので、画像の上半分にアルゴリズム 1 を使用し、下半分にアルゴリズム 2 を使用する例を追加します。

上がアルゴリズム 1、下がアルゴリズム 2 です。

よく見ると真ん中に黒い線が見えます。上部 (アルゴリズム 1) は下部 (アルゴリズム 2) よりも色が薄くなっています。それでもわからない場合は、右端のレモンに注目してください。アルゴリズム 1 で生成されたレモンは反射が強く、アルゴリズム 2 で生成されたレモンは反射が弱くなります。

2 番目のアルゴリズムは、人間の目がさまざまな光に対して異なるレベルの感度を持っていることを考慮に入れています。人間の目には色を識別する錐体光受容細胞がいくつかあり、それぞれ黄緑色、緑色、青紫色の光に最も敏感です。眼球内の錐体細胞は赤、緑、青に対してそれほど敏感ではありませんが、裸眼の錐体細胞が感知できる光の帯域幅は非常に広く、赤、緑、青はこれら 3 つの色の光受容体を独立して刺激することができます。

人間の赤、緑、青の知覚は、緑 > 赤 > 青の順なので、この観点からすると平均的なアルゴリズムは非科学的です。人間の光に対する知覚の程度に応じて各色の重みを設定する必要があり、それらの状態は同等であってはなりません。

画像処理の一般的な公式は次のとおりです。

グレー = (赤 * 0.3 + 緑 * 0.59 + 青 * 0.11)

ご覧のとおり、各色の係数は大きく異なります。

画像のグレースケール処理に最適な公式については、まだ議論が続いています。類似した公式がいくつかあります。

グレー = (赤 * 0.2126 + 緑 * 0.7152 + 青 * 0.0722)

または

グレー = (赤 * 0.299 + 緑 * 0.587 + 青 * 0.114)

係数には若干の偏差があるだけで、全体的な比率は似ています。

アルゴリズム 3 - 彩度低下

アルゴリズム3の使用:

このアルゴリズムについて説明する前に、RGB について説明しましょう。ほとんどのプログラマーは RGB モデルを使用します。各色は赤、緑、青で構成できます。RGB はコンピューターにとって色をうまく表現できますが、人間が理解するのは困難です。国旗が掲揚されているときに「五星紅旗はRGB(255, 0, 42)です」と言ったら殴られるかもしれません。しかし、私が真っ赤な五つ星の赤い旗を言えば、先生はうなずいて承認するかもしれません。

そのため、理解しやすくするために、色を記述するのに HLS モデルを選択することがあります。3 つの文字はそれぞれ色相、彩度、明度を表します。色相、値は 0 - 360 で、0 (または 360) は赤、120 は緑、240 は青を表し、他の値を使用して色を指定することもできます。彩度は 0.0% から 100.0% までの値を持ち、通常は色の鮮やかさを表します。明るさ、値は 0.0% - 100.0% で、黒の明るさは 0 です。

彩度を下げるプロセスは、RGB を HLS に変換し、彩度を 0 に設定することです。したがって、色を取得して、最も彩度が低い値に変換する必要があります。計算はこの記事で説明されているものよりも複雑ですが、最大 RGB 値と最小 RGB 値の中間点を計算してピクセルの彩度を下げる簡単な式を次に示します。

グレー = ( 数学的最大値(赤、緑、青) + 数学的最小値(赤、緑、青) ) / 2

彩度を下げると、画像の立体感は薄れ、より柔らかくなります。アルゴリズム 2 と比較すると、違いが非常にはっきりとわかります。効果の観点から見ると、ほとんどの人はアルゴリズム 2 を好むかもしれません。アルゴリズム 3 は、これまでで最も弱く暗い画像を処理するものです。

アルゴリズム4 - 分解

***値を取る

最小値を取る

分解アルゴリズムは、彩度低下のより単純な形式と考えることができます。分解は各ピクセルに基づいて行われ、RGB の最大値または最小値のみが取得されます。

*** 値の分解:

グレー = Math.max (赤、緑、青)

最小分解:

グレー = Math.min (赤、緑、青)

上記のように、最大​​分解では明るい画像が得られ、最小分解では暗い画像が得られます。

アルゴリズム 5 - シングルパス

赤チャンネルを撮る

グリーンチャンネルをご利用ください

青チャンネルをご利用ください

画像をグレーアウトするより速い方法です。この方法では計算は必要なく、チャンネルの値が直接グレースケール値として取得されます。

グレー = 赤

または

灰色 = 緑

または

グレー = 青

信じられないかもしれませんが、ほとんどのデジタル カメラはこのアルゴリズムを使用してグレースケール画像を生成します。この変換の結果を予測することは難しいため、このアルゴリズムは主に芸術的な効果に使用されます。

アルゴリズム 6 - カスタム グレースケール シェーディング

シェード数 = 4

これはこれまでで最も興味深いアルゴリズムであり、ユーザーは 2 から 256 までのグレーの濃淡値を指定できます。値が 2 の場合は完全に白い画像になり、値が 256 の場合はアルゴリズム 1 と同じ結果になります。

シェード数 = 16

このアルゴリズムは影の値を選択することで機能し、その式は少し複雑です

変換係数 = 255 / (シェード数 - 1) 
 
平均値 = (赤 + 緑 + 青) / 3 
 
グレー = Math.round((平均値 / 変換係数) + 0.5) * 変換係数

• NumberOfShades の範囲は 2 ～ 256 です。
• 技術的には、どのグレースケール アルゴリズムでも AverageValue を計算できますが、これは初期グレースケールの推定値のみを提供します。
• 「+0.5」は、丸めをシミュレートするために使用されるオプションのパラメーターです。

セクション

これは非常に興味深い記事です。グレースケール アルゴリズムを紹介するだけでなく、画像処理プロセスを理解するのにも役立ちます。