MDUI文件
複製 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 的值為圖片主色調的十六進制顏色值(如 #ff0000)。

本頁目錄