画像の色コードを出力ツールを作ってみる

はじめに

画像ファイルをUploadして

画像に含まれる色コードを文字で出力するツールを作ってみる

プロジェクトの作成

画像をRGB形式に変換し、画像の幅と高さを取得。

画像の各ピクセルを走査し、color-thiefクレートのget_palette関数を使って、

pixel_dataから主要な色を抽出。

（color-thiefクレートのget_palette関数：画像の代表的なカラーパレットを返します。）

lib.rs

#[wasm_bindgen]
pub fn color_ratio(image_data: &[u8]) -> String {
    let img = match ImageReader::new(Cursor::new(image_data))
        .with_guessed_format()
        .unwrap()
        .decode()
    {
        Ok(img) => img,
        Err(_) => return "Error decoding image".to_string(),
    };

    let rgb_img = img.to_rgb8();
    let width = rgb_img.width();
    let height = rgb_img.height();

    let mut pixel_data: Vec<u8> = Vec::with_capacity((width * height * 3) as usize);

    for y in 0..height {
        for x in 0..width {
            let pixel = rgb_img.get_pixel(x, y);
            pixel_data.extend_from_slice(&pixel.0);
        }
    }
    match get_palette(&pixel_data, ColorFormat::Rgb, 10,255) {
        Ok(palette) => {
            let mut result = String::new();
            for color in palette {
                result.push_str(&format!("#{:02X}{:02X}{:02X}", color.r, color.g, color.b));
                result.push('\n');
            }
            result
        }
        Err(_) => "Error getting color palette".to_string(),
    }
}

完成！

今回の成果物

デモURL

デモ画像

例：

#B6AE80 => くすんだ黄緑色 (Dusty Green)

#A4ACA0 => 灰色がかった緑 (Grayish Green)

#949C94 => 灰色 (Gray)

#7A6939 => 暗い黄土色 (Dark Ochre)

#E4DEB5 => 薄いベージュ (Pale Beige)

#06080A => ほぼ黒 (Near Black)

#97937D => くすんだ緑灰色 (Dull Green Gray)

#72490B => 暗い茶色 (Dark Brown)

ソース

まとめ

画像の色コードをRustとWasmを使って、出力してみた。

今回はcolor-thiefクレートを使って代表的な色コードを出力する処理を行ったが

時間があれば、自力で処理を書いても勉強になりそう。