MDUIDocs
llms.txt のリンクをコピーllms-full.txt のリンクをコピーMarkdown 形式でこのページを表示このページの内容について ChatGPT と相談するプロジェクトの完全なドキュメントについて ChatGPT と相談する
プリセットカラー
カスタムカラー
壁紙から色を抽出
壁紙を選択してください
開発ガイド
AI 補助開発
スタイル
フレームワークとの統合
コンポーネント
関数
jq ライブラリ dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
独立パッケージ

getColorFromImage

getColorFromImage 関数は、指定された画像から主色を抽出します。主色を取得した後、setColorScheme 関数を使ってカラースキームを設定することで、ダイナミックカラー機能を実現できます。

使用方法

関数を必要に応じてインポートします:

import { getColorFromImage } from 'mdui/functions/getColorFromImage.js';

使用例:

const image = new Image();
image.src = 'demo.png';

getColorFromImage(image).then((color) => {
  console.log(color);
});

API

getColorFromImage(image: string | HTMLImageElement | JQ<HTMLImageElement>): Promise<string>

関数は <img> 要素の CSS セレクター、HTMLImageElement オブジェクト、または <img> 要素を含む JQ オブジェクト をパラメーターとして受け取ります。

戻り値は Promise で、Promise の値は画像の主色の16進数カラーコード(例:#ff0000)です。

このページの目次