CSS 상대 색상을 사용하여 JavaScript에서 최종 16진수 색상을 얻는 방법

JavaScript를 사용하여 CSS 상대 색상에서 최종 16진수 색상 추출

이 방법은 내장된 브라우저 API와 바닐라 JavaScript를 사용하여 CSS 상대 색상을 조작합니다.

// 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

16진수 색상 변환을 위해 타사 라이브러리(Chroma.js) 사용

이 접근 방식은 Chroma.js 패키지를 사용하여 프로세스를 더 단순하게 만들어 색상 조작의 정확성과 유연성을 보장합니다.

// 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

단위 테스트: 최종 색상 출력 확인

이 단위 테스트는 JavaScript 솔루션에서 반환된 최종 16진수 색상이 올바른지 확인합니다.

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

JavaScript에서 CSS 상대 색상 추출에 대해 자주 묻는 질문

1. 어떻게 getComputedStyle 상대 색상을 다룰 때 작동합니까?
2. getComputedStyle CSS 속성이 계산된 최종 값을 얻습니다. 그럼에도 불구하고 최종 계산된 색상이 아닌 상대 색상을 문자열로 반환하는 경우가 많습니다.
3. 최종 색상을 추출할 수 있습니까? canvas 나에게 맞는 요소가 있나요?
4. 예, 작은 크기를 활용하여 색상을 렌더링하고 픽셀 데이터를 추출하여 최종 16진수 색상을 얻을 수 있습니다. canvas 그리고 getContext('2d') 접근하다.
5. 역할은 무엇입니까? chroma.js 이 과정에서?
6. Five를 사용하면 다양한 형식의 색상 작업이 더 쉬워지고 색상 변환이 더 간단해집니다. 예를 들어 RGB를 16진수로 빠르게 변환할 수 있습니다.
7. CSS 상대 색상은 무엇에 사용됩니까?
8. 개발자는 반응형 디자인을 위해 알파 투명도를 구현하고 CSS 상대 색상을 사용하여 RGB 값을 높이거나 줄여 색상 채널을 동적으로 수정할 수 있습니다.
9. JavaScript를 사용하여 스타일 변경을 감지할 수 있나요?
10. 예, 필요에 따라 색상을 다시 계산하고 스타일 변화를 실시간으로 들을 수 있습니다. 7 API.

JavaScript에서 CSS 상대 색상 추출에 대한 최종 생각

CSS 상대 색상에서 최종 색상을 결정하는 것은 어려울 수 있습니다. getComputedStyle 종종 원래 문자열만 생성합니다. Chroma.js와 같은 라이브러리를 사용하면 이 방법을 훨씬 더 간단하게 만들 수 있습니다. 캔버스 픽셀 데이터 추출을 위해

개발자는 JavaScript 도구 및 API를 활용하여 이러한 색상을 효율적으로 추출, 변경 및 적용할 수 있습니다. CSS 상대 색상 출력을 동적으로 처리하기 위한 확장 가능한 방법은 프로젝트 요구 사항에 따라 기본 솔루션과 타사 라이브러리 모두에서 제공됩니다.