net における 画像処理&表示のキホン · microsoft mvp for visual developer –visual...
TRANSCRIPT
![Page 1: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/1.jpg)
~PictureBox に自前で描画したらコロス~
渋木宏明(ひどり)
Microsoft MVP for Visual Developer – Visual C#
![Page 2: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/2.jpg)
![Page 3: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/3.jpg)
対象
Windows.Forms アプリケーション
一部、ASP.NET アプリケーションにも適用
WPF アプリケーションは対象外
![Page 4: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/4.jpg)
「画像」の定義
一般に、計算機で扱うことができるのは「デジタル画像」
今回は .NET の System.Drawing.Bitmap
クラスで扱える「デジタル画像」
せいぜい表示画面サイズ程度の静止画
![Page 5: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/5.jpg)
![Page 6: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/6.jpg)
問 – この実装は適切?
シナリオ
画像ファイルを読み込み、PictureBox コントロールに表示する
実装例
Sample1 参照
![Page 7: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/7.jpg)
答 –適切とは言えない
問題点
僅かながらも、陰で無駄な処理が行われる
実行環境によっては、いわゆる「チラつき」が生じる
「描画結果を保存」等の応用で苦しむことになる
![Page 8: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/8.jpg)
問題の背景
Windows の、ウィンドウおよびコントロールの描画手順が大元の原因
原則として、Paint イベントは「背景色による塗りつぶし」が行われた後に発生する
画面外や他のウィンドウと重なった箇所などは、描画が行われない
![Page 9: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/9.jpg)
結果的に…
後から「画像」によって上書きされる個所への「背景色による塗りつぶし」はまったくの無駄な処理となる
実行環境によっては、「背景色の塗りつぶし→画像の描画」が順に実行さる過程が「チラつき」として認識されることがある
画面外や他のウィンドウと重なった箇所に「表示されたはず」の領域を含む表示結果をファイル保存したりはできない
![Page 10: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/10.jpg)
さらにもう1点
Image.FromFile() メソッドは問題アリ
Image.FromFile() メソッドを使用してBitmap クラスのインスタンスを作成すると、画像ファイルが「使用中」のままになる
この問題は .NET Framework 2.0 SP1 でも改善されていない
.NET Framework 2.0 SP1 をコアとする、.NET Framework 3.0, 3.5 でも同様
![Page 11: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/11.jpg)
よりよい実装は?
戦略
「画像」は Bitmap クラスを使用して扱う
PictureBox コントロールには「画像の表示」だけを任せる
MemoryStream クラスとImage.FromStream() メソッドを使用して、Image.FromFile() メソッドの問題点を回避
実装例
Sample2 参照
![Page 12: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/12.jpg)
おまけ
Windows.Forms のダブル バッファリングを利用するのも1案
MSDN ライブラリ「方法 : フォームとコントロールのダブルバッファリングを行うことによってグラフィックスのちらつきを軽減する」http://msdn2.microsoft.com/ja-
jp/library/3t7htc9c(VS.80).aspx
WPF ではこの辺の事情がガラッと変わってしまう!
![Page 13: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/13.jpg)
![Page 14: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/14.jpg)
簡単な画像処理 –その1
シナリオ
画像ファイルを読み込み、PictureBox コントロールに表示する
画像に適当な図形を上書き描画する
描画結果をファイル保存する
実装例
Sample3
![Page 15: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/15.jpg)
簡単な画像処理 –その2
シナリオ
画像ファイルを読み込み、PictureBox コントロールに表示する
画像に「ぼかし(簡略化した平滑化)」処理を行う
「ぼかし」処理に要した時間を表示する
実装例
Sample4
![Page 16: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/16.jpg)
「ぼかし」処理の概要
着目点およびの周囲8点の Color を取得
R, G, B それぞれの平均値を求め、新たに着目点の Color とする
着目点
着目点および周囲8点の色情報を平均化
![Page 17: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/17.jpg)
結果
とても遅い…
Bitmap.GetPixel(), Bitmap.SetPixel() メソッドが「遅い」から!?
![Page 18: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/18.jpg)
問題の背景
Bitmap.GetPixel(), Bitmap.SetPixel() メソッドが「遅い」のは定説
多量のピクセル処理が必要なシナリオには不適
![Page 19: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/19.jpg)
解決策は?
戦略
Bitmap.LockBits() メソッドを使用して、Bitmap クラスが保持するビットマップデータを直接操作
実装例
Sample5 参照
注意: 長くなるので、エラー処理などかなり簡略化してます
![Page 20: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/20.jpg)
実装のポイント
unsafe を避けるため、Bitmap クラスが保持するビットマップデータをMarshal.Copy() メソッドで int 型の配列にコピーしている
多くの場合、ビットマップデータのコピーのコストよりもフィルタ処理のコストの方が高いため、元が取れる
処理性能の限界に挑戦する場合、局所的にunsafe を使用することになるが、そこまでするなら C++ 等で記述した方が早くね?
![Page 21: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/21.jpg)
まとめ
「画像」は Bitmap クラスで扱う
「画像表示(静止画像の表示)」はPictureBox に任せる
多量のピクセル処理を伴う「画像処理」には Bitmap.LockBits() を使用する
![Page 22: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/22.jpg)
![Page 23: NET における 画像処理&表示のキホン · Microsoft MVP for Visual Developer –Visual C#. 対象 Windows.Forms アプリケーション 一部、ASP.NET アプリケーションにも](https://reader033.vdocuments.site/reader033/viewer/2022050717/5e148fc9a239f570c52ed960/html5/thumbnails/23.jpg)
HIDORI on The Webhttp://hidori.jp/
渋木宏明(ひどり) bloghttp://hidori.spaces.live.com/