Jak používat CSS relativní barvy k získání konečné hexadecimální barvy v JavaScriptu

Pochopení, jak pracovat s CSS relativními barvami v JavaScriptu

Relativní barvy CSS poskytují vývojářům větší flexibilitu stylů tím, že jim umožňují dynamicky upravovat barvy na základě již existujících hodnot barev. Můžete si například přát upravit průhlednost alfa barvy a také její červené a modré kanály. Fluidní konstrukční systémy mají více možností, protože k této technice.

Práce s těmito dynamicky generovanými daty v JavaScriptu však může být obtížná. Pokud se pokusíte použít getComputedStyle pro načtení vypočítané barvy může vrátit nezpracovaný řetězec namísto opravy změn CSS, které jste provedli. To omezuje programovou manipulaci a analýzu výsledné výstupní barvy.

V tomto díle zkoumáme proces získání kompletní vypočítané hexadecimální barvy z CSS, bez ohledu na to, zda je definována pomocí sofistikovaných CSS relativní barvy syntax. Řešíme problém, jak získat přesnou hodnotu barvy poté, co CSS engine vypočítá relativní modifikace RGB a alfa kanálů.

Prozkoumáme také další možné možnosti, jako jsou jakékoli knihovny třetích stran nebo vestavěná rozhraní API prohlížeče, která vám mohou pomoci při extrahování těchto informací o barvě ve formátu, který lze použít ve vašem kódu JavaScript, který má být dále upraven.

JavaScript: Využití CSS relativních barev k extrahování konečné hexadecimální barvy

V prvním skriptu jsme použili JavaScript k získání a práci s dynamicky počítanými barvami v CSS s využitím výhod vestavěných funkcí prohlížeče. Hlavní problém je v tom, že CSS relativní barvy umožňuje variabilní nastavení barevného kanálu, které není zastoupeno ve výstupu při použití konvenčnějších technik, jako je getComputedStyle. Vymýšlíme řešení tak, že použijeme a plátno živel. Přesné hodnoty RGB můžeme získat vykreslením vypočítané barvy na plátno o rozměrech 1x1 pixel. Schopnost canvas API manipulovat s obrazovými daty na úrovni pixelů, včetně barev, umožňuje tento proces.

Hodnoty RGBA každého pixelu jsou extrahovány pomocí getImageData jakmile je barva umístěna na plátno. Dále jsou tyto hodnoty převedeny do hexadecimálního formátu pomocí převodů čísel na řetězec a bitových operací v JavaScriptu. Zde jsou důležité pokyny, např fillRect a getContext('2d'), mají na starosti generování barvy a výrobu kreslitelného povrchu. Když požadujeme přesnou barvu, kterou prohlížeč vykreslí v souladu s CSS pravidla – včetně jakýchkoli úprav průhlednosti nebo barevných kanálů – tato technika funguje dobře. Je to vynikající způsob řešení problému bez použití jiných knihoven.

Ve druhé metodě jsme zjednodušili manipulaci s barvami pomocí nástroje třetí strany s názvem Chroma.js. Barvy lze snadno převádět mezi různými formáty pomocí Chroma.js, což poskytuje abstraktnější metodu interakce s barvami. Chroma.js automaticky zpracovává převod do hex nebo jiných formátů, jako je RGB nebo HSL, jakmile je vypočtená barva získána z DOM. Při práci na projektech, které vyžadují složitější úpravy barev nebo převody formátů, je tento přístup perfektní. Kód je díky tomu jednodušší, čistší a snadněji se udržuje.

I když z opačných úhlů pohledu, obě strategie se zabývají stejným problémem. K určení konečné hexadecimální barvy první používá bitové výpočty a nativní rozhraní API prohlížeče, zatímco druhý využívá možnosti speciálního balíčku pro manipulaci s barvami. Můžete použít Chroma.js pro větší flexibilitu a snadné použití, nebo můžete jít s nativním způsobem, abyste se vyhnuli přidávání závislostí, v závislosti na potřebách vašeho projektu. JavaScript umožňuje další manipulaci s načtenou hexadecimální barvou v obou scénářích a poskytuje příležitosti pro dynamický styl a barevné animace.

// 1. First, grab the element whose color you want to extract
const element = document.querySelector('.my-element');

// 2. Use getComputedStyle to get the color property
let computedColor = getComputedStyle(element).color;

// 3. Create a canvas to convert the computed color to hex format
let canvas = document.createElement('canvas');
canvas.width = 1; // Small canvas, just for color conversion
canvas.height = 1;
let ctx = canvas.getContext('2d');

// 4. Set the fill style to the computed color and fill the canvas
ctx.fillStyle = computedColor;
ctx.fillRect(0, 0, 1, 1);

// 5. Extract the color in hex format using getImageData
let pixelData = ctx.getImageData(0, 0, 1, 1).data;
let hexColor = "#" +
  ((1 << 24) | (pixelData[0] << 16) | (pixelData[1] << 8) | pixelData[2])
    .toString(16)
    .slice(1); // Convert to hex and remove the alpha

console.log(hexColor); // This will log the final hex color value

// 1. First, include Chroma.js in your project (e.g., via CDN or NPM)
// <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js">
const element = document.querySelector('.my-element');

// 2. Retrieve the computed color using getComputedStyle
let computedColor = getComputedStyle(element).color;

// 3. Use Chroma.js to convert the computed color to hex
let chromaColor = chroma(computedColor);
let hexColor = chromaColor.hex();

console.log(hexColor); // Log the final hex color

// Chroma.js also supports other formats such as RGB or HSL
let rgbColor = chromaColor.rgb();
let hslColor = chromaColor.hsl();

console.log(rgbColor); // Logs RGB array
console.log(hslColor); // Logs HSL array

describe('Color Extraction Tests', () => {
  it('should return the correct hex color using canvas', () => {
    let color = getHexColorFromCanvas('.my-element');
    expect(color).toBe('#e6aabb'); // Expected final hex color
  });

  it('should return the correct hex color using Chroma.js', () => {
    let color = getHexColorUsingChroma('.my-element');
    expect(color).toBe('#e6aabb'); // Expected final hex color
  });
});

// Functions used for the tests
function getHexColorFromCanvas(selector) {
  const element = document.querySelector(selector);
  let computedColor = getComputedStyle(element).color;
  let canvas = document.createElement('canvas');
  canvas.width = 1;
  canvas.height = 1;
  let ctx = canvas.getContext('2d');
  ctx.fillStyle = computedColor;
  ctx.fillRect(0, 0, 1, 1);
  let pixelData = ctx.getImageData(0, 0, 1, 1).data;
  return "#" + ((1 << 24) | (pixelData[0] << 16) | (pixelData[1] << 8) | pixelData[2]).toString(16).slice(1);
}

function getHexColorUsingChroma(selector) {
  const element = document.querySelector(selector);
  let computedColor = getComputedStyle(element).color;
  return chroma(computedColor).hex();
}

Pokročilé techniky pro práci s relativními barvami CSS v JavaScriptu

Použití proměnných k dosažení dynamických barevných modifikací je silnou, ale někdy opomíjenou vlastností CSS relativní barvy. Můžete například použít JavaScript k vytvoření proměnných CSS, které reprezentují základní barvy, a změnit je v reálném čase, což umožňuje responzivní návrhové systémy a dynamická témata. Tato metoda umožňuje škálovatelná a udržovatelná barevná schémata v současných online aplikacích při použití s ​​funkcemi relativních barev CSS.

Použití CSS Typed Object Model (Typed OM) je další metodou pro řešení problému získání konečné vypočítané barvy. Vývojáři mohou díky Typed OM pracovat programověji a systematičtěji s atributy CSS. K hodnotám CSS lze nyní přistupovat jako k objektům JavaScript díky Typed OM, což eliminuje potřebu řetězcových metod. Relativní barvy a další složité transformace CSS těžit z toho, protože poskytuje přesnější kontrolu nad manipulací s majetkem.

A konečně, pokud chcete sledovat změny ve stylech prvků, zejména když se proměnné CSS nebo relativní hodnoty barev dynamicky mění, zvažte použití JavaScriptu MutationObserver. MutationObserver může sledovat úpravy modelu DOM, jako jsou úpravy vložených stylů prvku. Logiku JavaScriptu můžete nechat přepočítat barvu a aktualizovat ji v souladu s případnými změnami stylu. Tato technika funguje zvláště dobře pro vysoce dynamická rozhraní, kde dochází ke změnám stylu pravidelně v reakci na vstupy od uživatele nebo externích zdrojů.