手書きメモの圧縮と改善

ファイルサイズを縮小しながら、スキャンされた要約を消去するプログラムを作成しました。



元の画像と結果:





左:300 DPI、7.2 MB PNG / 790 KB JPGでのソーススキャン。 右:同じ解像度での結果、121 KB PNG [1]



注:ここで説明するプロセスは、 Office Lensとほぼ同じです。 他の同様のプログラムがあります。 私は急進的な何かを思いついたと言っているのではありません-それはちょうど便利なツールの私の実装です。



お急ぎの場合は、GitHubリポジトリを確認するか、結果セクションに移動してインタラクティブな3Dカラークラスターダイアグラムを操作してください。



やる気



一部のテーマに関する教科書はありません。 そのような学生のために、彼らがメモを他の人と共有し、彼らが学んだ量をチェックするとき、私は毎週の「通信」を手配するのが好きです。 アブストラクトはコースのWebサイトにPDF形式で投稿されます。



学部には、すぐにPDFにスキャンする「スマート」コピー機がありますが、そのようなスキャンの結果は、快適ではありません。 生徒の宿題スキャンの例を次に示します。







コピー機は、2つのことのいずれかをランダムに選択しているように見えます。文字の2値化 (x文字)、またはひどいJPEGブロックへの変換(平方根​​文字)です。 明らかに、そのような結果は改善できます。



一般的なビュー



そのような美しい学生の抽象的なページをスキャンすることから始めましょう:











元の300 DPI PNGの重量は約7.2 MBです。 85の圧縮レベルのJPGの画像は約790 KB 2かかります 。 通常、PDFはPNGまたはJPGの単なるコンテナであるため、PDFに変換する場合、ファイルをさらに強力に圧縮することはありません。 1ページあたり800キロバイトは非常に多く、ダウンロードを高速化するために、100 KBに近い値を取得したい3



この学生は非常に慎重にメモを取りますが、スキャン結果は少し厄介に見えます(彼のせいではありません)。 シートの裏側が目立って見えるため、読者の注意をそらし、平らな背景と比較してJPGまたはPNGの効果的な圧縮を妨げます。



noteshrink.py



ものnoteshrink.py



次のとおりです。







これは、サイズがわずか121 KBの小さなPNGファイルです。 私が一番好きなものを知っていますか? サイズを小さくすることに加えて、あらすじが読みやすくなりました!



色と処理の基本



コンパクトでクリーンなイメージを作成する手順は次のとおりです。



  1. 元のスキャン画像の背景色を決定します。
  2. しきい値を他の色に設定して、前景を分離します。
  3. フォアグラウンドで少数の「代表色」を選択して、インデックス付きPNGに変換します。


トピックを掘り下げる前に、カラー画像がデジタルで保存される方法を思い出しておくと役立ちます。 人間の目には3種類の色に敏感な細胞があるため、赤、緑、青の光の強度を変更することで任意の色を復元できます4 。 その結果、3次元色空間RGB 5のドットに色を割り当てるシステムができます。







真のベクトル空間では、無制限の数の連続的に変化する強度値を使用できますが、デジタルストレージでは、通常、各チャネルの赤、緑、青の8ビットを強調して色をサンプリングします。 ただし、色を連続3次元空間の点と見なすと、プロセスの説明でさらに示すように、強力な分析ツールが使用可能になります。



背景色の検出



ページの主要部分は空白であるため、紙の色はスキャン画像で最も一般的な色になると予想されます。 また、スキャナーが常に空白の紙の各ポイントを同じRGBトリプレットとして表していれば、問題は生じません。 残念ながら、そうではありません。 色のランダムな変化は、ガラス上のほこりや斑点、紙自体の色の変化、センサーのノイズなどにより発生します。 したがって、実際の「ページの色」は、数千の異なるRGB値に分散できます。



元のスキャン画像のサイズは2081×2531、総面積は5,267,011ピクセルです。 すべてのピクセルを考慮することができますが、元の画像の代表的なサンプルを取得する方がはるかに高速です。 デフォルトでは、 noteshrink.py



は元の画像の5%を使用します(300 DPIスキャンには十分です)。 しかし、元の画像からランダムに選択された10,000ピクセルのさらに小さなサブセットを見てみましょう。











実際のスキャンのようには見えません-ここにはテキストはありませんが、色の分布はほとんど同じです。 どちらの画像もほとんどが灰色がかった白で、少数の赤、青、暗い灰色のピクセルがあります。 同じ10,000ピクセルが明るさ(R、G、Bチャンネルの強度の合計)でソートされています:











遠くから見ると、画像の80〜90%の下部は同じ色のように見えますが、よく調べてみると、非常に多くのバリエーションがあります。 実際、画像にはほとんどの場合RGB値(240、240、242)の色が含まれており、10,000ピクセルのうち226だけで表されます-合計の3%以下です。



モードはサンプルの非常に小さな割合を表すため、色の分布にどれだけ密接に対応するかという疑問が生じます。 最初に色深度を減らすと、ページの背景色を決定するのが簡単になります。 4 つの最下位ビットをゼロにすることにより、チャネルごとに深さを8ビットから4ビットに下げると、サンプルは次のようになります











現在、最も一般的な値はRGB(224、224、224)であり、選択されたポイントの3623(36%)です。 実際、色の深さを減らして、類似のピクセルをより大きな「バスケット」にグループ化し、明示的なピークを見つけやすくしました6



信頼性と精度の間にはトレードオフがあります。小さなバスケットは色の精度を向上させますが、大きなバスケットははるかに信頼性が高くなります。 最後に、背景色を選択するために、チャネルごとに6ビットに決めました。これは、2つの極端な方法の中で最良のオプションのように思えました。



前景のハイライト



背景色を決定したら、背景への近接度に応じて残りのピクセルのしきい値を選択する必要があります。 2つの色の類似性を判断する自然な方法は、RGB空間での座標間のユークリッド距離を計算することです。 しかし、この単純な方法はいくつかの色を誤ってセグメント化します











以下は、色と背景からのユークリッド距離の表です。



見つかった場所 R G B 背景からの距離
背景 238 238 242 -
灰色の バックページから見た 160 168 166 129.4
黒人 フロントページインク 71 73 71 290.4
フロントページインク 219 83 86 220.7
ピンク 左の縦線 243 179 182 84.3


ご覧のとおり、背景として分類する必要がある半透明インクの濃い灰色の色は、前景として分類するラインのピンク色よりも実際にページの白い色からはるかに離れています。 ピンクを前景にするユークリッド距離のしきい値には、必ず半透明のインクが含まれます。



この問題を回避するには、RGB空間からHue-Saturation-Value (HSV)空間に移動し、RGBキューブをシリンダーに変換します(セクション7を参照)。







HSVシリンダーでは、虹色の色が外側の上端の周囲に分布しています。 色相 (色調)は円上の角度に対応します。 円柱の中心軸は、下部の黒から上部の白になり、中間に灰色の陰影があります-この軸はすべて彩度または色強度がゼロで、外側の円の明るい陰影の場合、彩度は1.0です。 最後に、色の値の値は、下部の黒から上部の明るい色合いまで、色の全体的な明るさを特徴付けます。



それでは、HSVモデルの色を見てみましょう。



カラー値 彩度 値による背景との違い 背景との彩度の違い
0.949 0.017 - -
灰色の 0.659 0,048 0.290 0,031
黒人 0.286 0,027 0.663 0.011
0.859 0.621 0,090 0.604
ピンク 0.953 0.263 0.004 0.247


予想どおり、白、黒、グレーの色の値は大きく異なりますが、同様の低レベルの彩度があります-赤やピンクよりもはるかに低いです。 HSVモデルの追加情報を使用して、次のいずれかの基準を満たしている場合、ピクセルを前景に属するものとして正常にマークできます。





最初の基準はペンから黒インクを取り、2番目の基準は赤インクとピンクの線を取ります。 どちらの基準でも、前景の半透明インクからグレーのピクセルが正常に削除されます。 さまざまな画像に対して、さまざまな彩度のしきい値/色の値を使用できます。 詳細については、 結果のセクション参照してください。



代表的な色のセットを選択してください



前景を分離するとすぐに、ページ上のマークに対応する新しい色のセットを取得しました。 それを視覚化しましょう-しかし、今回は色をピクセルのセットとしてではなく、RGB色空間の3Dドットとして考えます。 結果のチャートは、わずかに「混雑」しており、関連する色のストライプがいくつかあります。







リンクによるインタラクティブなチャート



ここでの目標は、少数の色(この場合は8 色)を選択して画像全体を表すことにより、元の24ビット画像をインデックス付き色に変換することです。 まず、色が3ビットのみで決定されるため(8 =2³であるため)、ファイルサイズが小さくなります。 第二に、最終的な画像では同じ色のインクドットに同じ色が割り当てられる可能性が高いため、結果の画像は視覚的にまとまりが強くなります。



これを行うには、上記の「混雑した」ダイアグラムのデータに基づく方法を使用します。 クラスターの中心に対応する色を選択すると、ソースデータを正確に表す色のセットが得られます。 技術的な観点から、 クラスター分析を使用して、 色量子化の問題(それ自体はベクトル量子化の特殊なケースです)を解決します



この作業のために、特定の方法論ツール-k- means methodを選択しました。 その目標は、各ポイントから最も近い中心までの平均距離を最小化する一連の平均または中心を見つけることです。 データセット8で7つの異なるクラスターを選択するとどうなります







ここでは、黒のアウトラインを持つドットは前景色に対応し、色付きの線はそれらをRGB空間の最も近い中心に接続します。 画像がインデックス付きの色に変換されると、各前景色は最も近い中心の色に置き換えられます。 最後に、大きな円は、各中心から最も遠い接続色までの距離を示します。



ガジェットとベルとホイッスル



色と彩度のしきい値を設定することに加えて、 noteshrink.py



はいくつかの注目すべき機能があります。 デフォルトでは、パレットの明るさとコントラストを上げ、最小強度値と最大強度値をそれぞれ0と255に変更します。 これがないと、スキャンしたサンプルの8色パレットは次のようになります。











調整されたパレットはより明るくなります。











前景色を分離した後、背景を強制的に白にするオプションがあります。 ファイルサイズをさらに小さくするために、 noteshrink.py



optipngpngcrushpngquantなどのPNG最適化ツールを自動的に実行できます。



出力で、プログラムはImageMagickの変換プログラムを使用して複数の画像を含むこのような PDFファイルを作成します。 追加のボーナスとして、 noteshrink.py



(コンソールのglobのようなアルファベット順ではなく)ファイル名を自動的に昇順で数値順にソートします。 これは、ダムスキャンプログラム9 scan 9.png



scan 10.png



などのファイル名を生成し、PDF内のページを順番どおりに配置します。



結果



プログラム出力のいくつかの例を次に示します。 最初の( PDF )はデフォルトのしきい値で見栄えがよくなります:







カラークラスターの可視化:











以下( PDF )では、グレーブルーの線が鈍すぎるため、飽和しきい値を0.045に下げる必要がありました。







カラークラスター:











最後に、グラフ用紙スキャンの例( PDF )。 彼女の場合、背景と線のコントラストが小さすぎるため、しきい値を0.05に設定しました。







カラークラスター:











合計で、4つのPDFファイルは約788 KBを占有し、1ページあたり平均約130 KBです。



結論と今後の作業



コースの要約を含むPDFファイルの準備に使用できる便利なツールを作成できたことを嬉しく思います。 さらに、 色の量子化に関するWikipediaの記事に示されている重要な2Dビジュアライゼーションを改善するように促され、最後にthree.js (非常に面白いツール、再び使用します) )



このプロジェクトに戻ったら、別の量子化スキームを試してみたいと思います。 今週、一連の色の最近傍のグラフで スペクトルクラスタリングを使用するというアイデアを思いつきました-興味深い新しいアイデアを思いついたように思えましたが、そのようなアプローチを提案する2012年の記事を見つけました。 まあ。



また、混合物のガウスモデルの形成にEMアルゴリズムを試すこともできます。これは、色の分布を表します。 これが過去に頻繁に行われたかどうかはわかりません。 他の興味深いアイデア: L * a * b *のような「知覚的に均一な」色空間でクラスター化する試みと、特定の画像の最適なクラスター数を自動的に決定する試み。



一方、ブログの他のトピックに対処する必要があるため、ここではこのプロジェクトを終了し、GitHubのnoteshrink.py



リポジトリを参照することをお勧めします。



注釈



1.アブストラクトのサンプルは、私の学生Ursula MonaghanとJohn Larkinの寛大な許可を得て提示されています。



2.ここに示す画像は、ページの読み込みを高速化するために実際には150 DPIに縮小されています。



3.コピー機がうまく行う唯一のことは、このタイプのドキュメントのPDFのサイズを1ページあたり50〜75 KBに減らすことです。



4.赤、緑、青は、加法モデルの原色です。 小学校の絵の先生は、原色が赤、黄、青であることを教えてくれます。 これは嘘です [教育システムの複雑な概念を単純化する方法-注。 トランス。]。 ただし、3つの減法混色の原色(黄色、紫、シアン)があります。 加法混色の原色は光の組み合わせ(モニターが発する)を指し、減法混色はインクとインクの顔料の組み合わせを指します。



5.ウィキメディアコモンズのMaklaanの画像。 ライセンス:CC BY-SA 3.0



6.「バスケット」のサイズを増やすことが有用な理由の別の例として Wikipediaのチップ分布図を見てください。



7.ウィキメディアコモンズのSharkDユーザーの画像。 ライセンス:CC BY-SA 3.0



8.なぜk = 7ではなく8ですか? 最終画像には8色が必要で、背景色はすでに設定されているため...



9.はい、見ています、Mac OSからのImage Capture ...



All Articles