Како користити ЦСС релативне боје да бисте добили коначну хексадецималну боју у ЈаваСцрипт-у

Разумевање рада са ЦСС релативним бојама у ЈаваСцрипт-у

ЦСС релативне боје дају програмерима већу флексибилност стила омогућавајући им да динамички мењају боје на основу већ постојећих вредности боја. На пример, можда ћете желети да измените алфа транспарентност боје, као и њене црвене и плаве канале. Системи пројектовања флуида имају више могућности због ове технике.

Међутим, рад са овим динамички генерисаним подацима у ЈаваСцрипт-у може бити тежак. Ако покушате да користите гетЦомпутедСтиле да би повратио израчунату боју, може да врати необрађени стринг уместо да поправи ЦСС промене које сте направили. Ово ограничава програмску манипулацију и анализу коначне боје излаза.

У овом делу испитујемо процес добијања комплетне израчунате хексадецималне боје из ЦСС-а, без обзира да ли је дефинисана кроз софистицирани ЦСС релативне боје синтаксе. Бавимо се питањем како да добијемо прецизну вредност боје након што ЦСС механизам израчуна релативне модификације РГБ и алфа канала.

Такође ћемо испитати друге могуће опције, као што су библиотеке трећих страна или уграђени АПИ-ји претраживача који вам могу помоћи да издвојите ове информације о боји у формату који се може користити у вашем ЈаваСцрипт коду да би се даље модификовао.

ЈаваСцрипт: Коришћење ЦСС релативних боја за издвајање финалне хексадецималне боје

У првој скрипти користили смо ЈаваСцрипт да бисмо добили и радили са динамички израчунатим бојама у ЦСС-у користећи предности уграђених функција претраживача. Главни проблем је у томе што ЦСС релативне боје омогућава променљиво подешавање канала боје, што није представљено у излазу када се користе конвенционалније технике као што је гетЦомпутедСтиле. Смишљамо решење тако што користимо а платну елемент. Можемо добити прецизне РГБ вредности приказивањем израчунате боје на платну димензија 1к1 пиксела. Могућност цанвас АПИ-ја да манипулише подацима слике на нивоу пиксела, укључујући боју, чини овај процес могућим.

РГБА вредности сваког пиксела се издвајају помоћу гетИмагеДата метод након што је боја постављена на платно. Затим, користећи конверзије броја у низ и битне операције у ЈаваСцрипт-у, ове вредности се трансформишу у хексадецимални формат. Ево важних упутстава, нпр филлРецт и гетЦонтект('2д'), задужени су за генерисање боје и производњу површине која се може цртати. Када захтевамо тачну боју коју прегледач приказује у складу са ЦСС правила — укључујући подешавања транспарентности или канала боје — ова техника добро функционише. То је одличан метод за решавање проблема без коришћења других библиотека.

У другом методу, поједноставили смо манипулације бојама користећи алатку треће стране под називом Цхрома.јс. Са лакоћом, боје се могу конвертовати између различитих формата помоћу Цхрома.јс, који пружа апстрактнији метод интеракције са бојама. Цхрома.јс аутоматски управља конверзијом у хексадецимални или друге формате као што су РГБ или ХСЛ када се израчуната боја добије из ДОМ-а. Када радите на пројектима који захтевају сложенија подешавања боја или конверзије формата, овај приступ је савршен. Као резултат тога, код је учињен једноставнијим, чистијим и лакшим за одржавање.

Иако из супротних перспектива, обе стратегије се баве истим проблемом. Да би се одредила коначна хексадецимална боја, прва користи израчунавања по битовима и изворне АПИ-је претраживача, док друга користи могућности специјалног пакета за манипулацију бојама. Можете да користите Цхрома.јс за повећану флексибилност и једноставност коришћења, или можете да користите изворни начин да избегнете додавање зависности, у зависности од потреба вашег пројекта. ЈаваСцрипт омогућава додатну манипулацију преузетом хексадецималном бојом у оба сценарија, пружајући могућности за динамички стил и анимације засноване на бојама.

// 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();
}

Напредне технике за руковање ЦСС релативним бојама у ЈаваСцрипт-у

Коришћење променљивих за постизање динамичких модификација боја је моћна, али понекад занемарена карактеристика ЦСС релативне боје. На пример, можете да користите ЈаваСцрипт за прављење ЦСС променљивих које представљају основне боје и да их мењате у реалном времену, омогућавајући системе дизајна који реагују и динамичке теме. Овај метод омогућава скалабилне шеме боја које се могу одржавати у савременим онлајн апликацијама када се користе са ЦСС релативним функцијама боја.

Коришћење ЦСС Типед Објецт Модел (Типед ОМ) је додатни метод за решавање питања добијања коначне израчунате боје. Програмери могу да раде програмски и систематичније са ЦСС атрибутима захваљујући Типед ОМ. ЦСС вредностима се сада може приступити као ЈаваСцрипт објектима захваљујући Типед ОМ, што елиминише потребу за методама заснованим на стринговима. Релативне боје и друго сложене ЦСС трансформације има користи од овога, јер даје прецизнију контролу над манипулацијом имовином.

На крају, ако желите да пратите промене у стиловима елемената, посебно када се ЦСС променљиве или релативне вредности боја динамички мењају, размислите о коришћењу ЈаваСцрипт-а МутатионОбсервер. МутатионОбсервер може да прати модификације ДОМ-а, као што су прилагођавања уметнутих стилова елемента. Можете да учините да ваша ЈаваСцрипт логика поново израчуна боју и ажурира је у складу са свим примењивим променама стила. Ова техника посебно добро функционише за веома динамична интерфејса, где се промене стила дешавају редовно као одговор на уносе од корисника или екстерних извора.