.NET TIPS

ピクセルの色をHTMLカラーへ変換するには？

デジタルアドバンテージ
2003/05/23

　.NET Frameworkで画像を扱う場合、画像上の各ピクセルの値（色）はColor構造体（System.Drawing名前空間）によりARGB形式（アルファ値（透明度）、赤、緑、青のデータを順に記述したもの。各要素は8bit）で表される。一方、HTMLでは、色は‘#’記号を先頭に付けた16進数の文字列で表される（例えば、赤は「#FF0000」、青は「#0000FF」）。

　このColor構造体の値と、HTMLカラーの文字列は、ColorTranslatorクラス（System.Drawing名前空間）で用意されているstaticなメソッドにより相互に変換することができる。

　まず、Color構造体の値からHTMLカラー文字列への変換には、ToHtmlメソッドを使用する。次のコードは、Color構造体のFromArgbメソッドにより赤を示すColor構造体のオブジェクトを作成し、それをHTMLカラー文字列へと変換している。

Color argbRed = Color.FromArgb(255, 0, 0);
string htmlRed = ColorTranslator.ToHtml(argbRed); // #FF0000

　逆の変換は、次のようにしてFromHtmlメソッドを使用する。

Color argbRed2 = ColorTranslator.FromHtml(htmlRed);

　ColorTranslator.ToHtmlメソッドを利用して少し面白いサンプル・プログラムを作成してみた。このプログラムは、この.NET TIPSコーナーのアイコン（JPEG画像）を読み込み、それを「HTMLのテーブル」に変換して出力する。

// tableart.cs

using System;
using System.IO;
using System.Net;
using System.Text;
using System.Drawing;

class TableArt {
  public static void Main() {

    string url = "http://www.atmarkit.co.jp/fdotnet/"
                   + "dotnettips/index/dotnettips_s.jpg";
    WebClient wc = new WebClient();
    Stream stream = wc.OpenRead(url);
    Bitmap bitmap = new Bitmap(stream);
    stream.Close();

    StringBuilder sb = new StringBuilder();

    sb.Append(@"
      <html>
        <head>
          <style>
            td {width=5; height=5; }
          </style>
        </head>
        <body>
          <table bgcolor=black border=0
                  cellspacing=1 cellpadding=0>
    ");

    for (int y = 0; y < bitmap.Height; y++) {
      sb.Append("\n<tr>");
      for (int x = 0; x < bitmap.Width; x++) {
        sb.Append("<td bgcolor=");
        sb.Append(
          ColorTranslator.ToHtml(bitmap.GetPixel(x, y)));
        sb.Append("></td>");
      }
      sb.Append("</tr>");
    }
    sb.Append(@"
          </table>
        </body>
      </html>");

    Console.WriteLine(sb);
  }
}

// コンパイル方法：csc tableart.cs
JPEG画像をTABLEタグに変換するC#のサンプル・プログラム（tableart.cs）

　このサンプル・プログラムはHTMLを出力するので、出力結果を次のように適当なHTMLファイルに保存してからIEで表示していただきたい。

tableart.exe > result.html

　このようにして作成したHTMLファイルをIEで表示すると次のような画面になる。

サンプル・プログラムで出力されるHTMLをファイルに保存し、IEで表示した画面

　上のIE内の画像は、一見すると画像ファイルを表示しているだけのように見えるが、幅と高さが5ピクセルのセルからなるHTMLベースのテーブル（<table>タグを利用して記述している）で、ピクセルの色をセルの背景色にすることで表示を実現している。

　なお、Web上の画像を読み込むための方法は、「TIPS：画像を読み込むには？」で解説している。画像を読み込んで作成したBitmapクラスのオブジェクトに対しては、GetPixelメソッドにより指定した位置のピクセルの色をColor構造体の値として取得することができる。

　また、サンプル・プログラムではHTML文を含んだ長い1つの文字列を作成するのにStringBuilderクラスを利用している。こちらについては「TIPS：文字列を連結するには？」を参考にしていただきたい。End of Article

カテゴリ：クラス・ライブラリ　処理対象：ビットマップ
使用ライブラリ：Color構造体（System.Drawing名前空間）
使用ライブラリ：ColorTranslatorクラス（System.Drawing名前空間）
関連TIPS：画像を読み込むには？
関連TIPS：文字列を連結するには？
　
この記事と関連性の高い別の.NET TIPS
［ASP.NET］DataGridコントロールでマウスのある行を強調表示するには？
HTMLカラーの色名表記と16進表記を相互に変換するには？
画像の背景部分を透明にするには？
［Silverlight 2］HTML要素にフォーカスを設定するには？
文字列やテキストをHTMLエンコードするには？
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。
generated by

「.NET TIPS」

TechTargetジャパン

Insider.NET フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH