.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
HTMLカラーの色名表記と16進表記を相互に変換するには？
［ASP.NET］DataGridコントロールでマウスのある行を強調表示するには？
画像の背景部分を透明にするには？
［ASP.NET］DataGridコントロールの各セルにアクセスするには？
列挙体の名前を列挙するには？
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回　簡潔なコーディングのために （2017/7/26）
    　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
    　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回　明瞭なコーディングのために （2017/7/19）
    　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator （2017/7/18）
    　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日 月間
＠IT