Cách sử dụng màu tương đối CSS để lấy màu Hex cuối cùng trong JavaScript

Hiểu cách làm việc với màu sắc tương đối CSS trong JavaScript

Màu sắc tương đối của CSS giúp nhà phát triển tạo kiểu linh hoạt hơn bằng cách cho phép họ sửa đổi màu sắc một cách linh hoạt dựa trên các giá trị màu có sẵn. Ví dụ: bạn có thể muốn sửa đổi độ trong suốt alpha của màu cũng như các kênh màu đỏ và xanh lam của nó. Hệ thống thiết kế chất lỏng có nhiều khả năng hơn nhờ kỹ thuật này.

Tuy nhiên, việc làm việc với những dữ liệu được tạo động này trong JavaScript có thể khó khăn. Nếu bạn cố gắng sử dụng để truy xuất màu được tính toán, nó có thể trả về chuỗi chưa được xử lý thay vì sửa các thay đổi CSS mà bạn đã thực hiện. Điều này hạn chế thao tác lập trình và phân tích màu đầu ra cuối cùng.

Trong phần này, chúng tôi kiểm tra quá trình lấy màu hex được tính toán hoàn chỉnh từ CSS, bất kể nó có được xác định thông qua công cụ phức tạp hay không. cú pháp. Chúng tôi đang giải quyết vấn đề làm cách nào để có được giá trị màu chính xác sau khi các sửa đổi tương đối đối với các kênh RGB và alpha đã được công cụ CSS tính toán.

Chúng tôi cũng sẽ kiểm tra các tùy chọn khả thi khác, chẳng hạn như mọi thư viện của bên thứ ba hoặc API trình duyệt tích hợp có thể hỗ trợ bạn trích xuất thông tin màu này theo định dạng có thể được sử dụng trong mã JavaScript của bạn để sửa đổi thêm.

Yêu cầu	Ví dụ về sử dụng
getComputedStyle	Sau khi tất cả CSS đã được áp dụng, lệnh này sẽ lấy các kiểu tính toán thực tế của phần tử. Sẽ rất hữu ích khi lấy các giá trị CSS động ra khỏi các giá trị tương đối, chẳng hạn như màu sắc.
createElement('canvas')	Sử dụng JavaScript để tự động tạo một
getContext('2d')	Với sự trợ giúp của lệnh này, tập lệnh có thể vẽ hoặc làm việc với dữ liệu hình ảnh ở cấp độ pixel, thêm màu, v.v., bằng cách truy xuất bối cảnh vẽ 2D của một đối tượng.
fillStyle	Xác định mẫu, màu sắc hoặc độ chuyển màu sẽ được áp dụng cho khung vẽ. Trong các ví dụ, nó được sử dụng để đặt màu được tính toán của khung vẽ trước khi trích xuất dữ liệu pixel.
fillRect	Sử dụng fillStyle hiện tại để lấp đầy vùng hình chữ nhật trên khung vẽ. Ở đây, màu được tính toán sẽ lấp đầy vùng pixel 1x1 để xử lý bổ sung.
getImageData	Dữ liệu pixel của canvas được trích xuất bằng lệnh này. Nó được sử dụng để thu được các giá trị RGBA của màu được hiển thị trong pixel 1x1 do fillRect tạo.
chroma	Thư viện của bên thứ ba để sửa đổi màu sắc được gọi là Chroma.js. Phương thức chroma() giúp làm việc với các màu CSS được tính toán dễ dàng hơn bằng cách chuyển đổi màu giữa nhiều định dạng, chẳng hạn như RGB và hex.
toString(16)	Chuyển đổi một số nguyên thành dạng biểu diễn thập lục phân, điều này rất quan trọng khi chuyển đổi giá trị RGB thành thập lục phân. Trong trường hợp này, nó được sử dụng để trộn các giá trị của màu đỏ, xanh lục và xanh lam để tạo mã màu hex cuối cùng.
slice(1)	Loại bỏ ký tự đầu tiên của chuỗi. Slice(1) loại bỏ ký tự đầu thừa khỏi một số trước khi chuyển nó sang dạng thập lục phân, đảm bảo rằng mã hex được định dạng chính xác.

JavaScript: Sử dụng màu tương đối CSS để trích xuất màu Hex cuối cùng

Trong tập lệnh đầu tiên, chúng tôi đã sử dụng JavaScript để nhận và làm việc với các màu được tính toán động trong CSS bằng cách tận dụng các tính năng tích hợp sẵn của trình duyệt. Vấn đề chính là ở chỗ cho phép điều chỉnh kênh màu thay đổi, điều này không được thể hiện ở đầu ra khi sử dụng các kỹ thuật thông thường hơn như . Chúng tôi nghĩ ra một cách giải quyết bằng cách sử dụng một yếu tố. Chúng tôi có thể nhận được các giá trị RGB chính xác bằng cách hiển thị màu được tính toán trên khung vẽ có kích thước 1x1 pixel. Khả năng thao tác dữ liệu hình ảnh ở cấp độ pixel của API canvas, bao gồm cả màu sắc, giúp quá trình này có thể thực hiện được.

Các giá trị RGBA của mỗi pixel được trích xuất bởi phương pháp sau khi màu đã được đặt trên khung vẽ. Tiếp theo, bằng cách sử dụng chuyển đổi số thành chuỗi và thao tác bitwise trong JavaScript, các giá trị này được chuyển đổi thành định dạng thập lục phân. Ở đây, những chỉ dẫn quan trọng, chẳng hạn Và , chịu trách nhiệm tạo ra màu sắc và tạo ra bề mặt có thể vẽ được. Khi chúng tôi yêu cầu màu chính xác mà trình duyệt hiển thị theo CSS các quy tắc—bao gồm mọi điều chỉnh về độ trong suốt hoặc kênh màu—kỹ thuật này hoạt động tốt. Đó là một phương pháp tuyệt vời để giải quyết vấn đề mà không cần sử dụng các thư viện khác.

Trong phương pháp thứ hai, chúng tôi đã sắp xếp hợp lý các thao tác màu sắc bằng cách sử dụng công cụ của bên thứ ba có tên là Chroma.js. Một cách dễ dàng, màu sắc có thể được chuyển đổi giữa các định dạng khác nhau bằng cách sử dụng Chroma.js, cung cấp phương pháp tương tác với màu sắc trừu tượng hơn. Chroma.js tự động xử lý việc chuyển đổi sang hex hoặc các định dạng khác như RGB hoặc HSL sau khi màu được tính toán được lấy từ DOM. Khi làm việc trên các dự án yêu cầu điều chỉnh màu sắc hoặc chuyển đổi định dạng phức tạp hơn, phương pháp này là hoàn hảo. Kết quả là mã được làm đơn giản hơn, sạch hơn và dễ bảo trì hơn.

Mặc dù từ những quan điểm trái ngược nhau, cả hai chiến lược đều giải quyết cùng một vấn đề. Để xác định màu hex cuối cùng, cách đầu tiên sử dụng tính toán theo bit và API trình duyệt gốc, trong khi cách thứ hai tận dụng khả năng của gói thao tác màu chuyên dụng. Bạn có thể sử dụng Chroma.js để tăng tính linh hoạt và dễ sử dụng hoặc bạn có thể sử dụng cách gốc để tránh thêm phần phụ thuộc, tùy thuộc vào nhu cầu của dự án. JavaScript cho phép thao tác bổ sung với màu hex được truy xuất trong cả hai trường hợp, tạo cơ hội cho kiểu dáng động và hoạt ảnh dựa trên màu sắc.

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

Kỹ thuật nâng cao để xử lý màu sắc tương đối CSS trong JavaScript

Sử dụng các biến để đạt được các sửa đổi màu động là một tính năng mạnh mẽ, nhưng đôi khi bị bỏ qua. . Ví dụ: bạn có thể sử dụng JavaScript để xây dựng các biến CSS đại diện cho các màu cơ bản và thay đổi chúng theo thời gian thực, hỗ trợ các hệ thống thiết kế đáp ứng và chủ đề động. Phương pháp này giúp các lược đồ màu có thể mở rộng và duy trì được trong các ứng dụng trực tuyến hiện đại khi được sử dụng với các hàm màu tương đối CSS.

Sử dụng CSS Typed Object Model (Typed OM) là một phương pháp bổ sung để giải quyết vấn đề lấy được màu được tính toán cuối cùng. Các nhà phát triển có thể làm việc theo chương trình và hệ thống hơn với các thuộc tính CSS nhờ Typed OM. Giờ đây, các giá trị CSS có thể được truy cập dưới dạng đối tượng JavaScript nhờ Typed OM, loại bỏ nhu cầu về các phương thức dựa trên chuỗi. Màu sắc tương đối và khác được hưởng lợi từ điều này, vì nó cho phép kiểm soát chính xác hơn việc thao túng tài sản.

Cuối cùng, nếu bạn muốn theo dõi những thay đổi trong kiểu phần tử, đặc biệt khi các biến CSS hoặc giá trị màu tương đối được thay đổi linh hoạt, hãy nghĩ đến việc sử dụng JavaScript . MutationObserver có thể theo dõi các sửa đổi đối với DOM, chẳng hạn như các điều chỉnh đối với kiểu nội tuyến của một phần tử. Bạn có thể làm cho logic JavaScript của mình tính toán lại màu và cập nhật màu đó theo mọi thay đổi về kiểu hiện hành. Kỹ thuật này hoạt động đặc biệt tốt đối với các giao diện có tính động cao, trong đó các thay đổi về kiểu dáng diễn ra thường xuyên để đáp ứng với đầu vào từ người dùng hoặc các nguồn bên ngoài.

1. Làm thế nào hoạt động khi xử lý màu sắc tương đối?
2. lấy giá trị cuối cùng mà thuộc tính CSS đã được tính toán; tuy nhiên, nó thường trả về màu tương đối dưới dạng chuỗi thay vì màu được tính toán cuối cùng.
3. Liệu màu cuối cùng có thể được trích xuất bằng một yếu tố có phù hợp với tôi không?
4. Có, có thể hiển thị màu và trích xuất dữ liệu pixel để có được màu hex cuối cùng bằng cách sử dụng một phần nhỏ và tiếp cận.
5. Vai trò của là gì trong quá trình này?
6. Five giúp làm việc với màu sắc ở nhiều định dạng khác nhau dễ dàng hơn và giúp việc chuyển đổi màu sắc trở nên đơn giản hơn. Ví dụ: bạn có thể nhanh chóng chuyển đổi RGB sang hex.
7. Màu sắc tương đối CSS được sử dụng để làm gì?
8. Các nhà phát triển có thể triển khai độ trong suốt alpha cho các thiết kế đáp ứng và sửa đổi linh hoạt các kênh màu bằng cách tăng hoặc giảm giá trị RGB bằng cách sử dụng các màu tương đối CSS.
9. Tôi có thể phát hiện các thay đổi về kiểu bằng cách sử dụng JavaScript không?
10. Có, bạn có thể tính toán lại màu sắc nếu cần và lắng nghe những thay đổi về kiểu dáng trong thời gian thực bằng cách sử dụng API.

Có thể khó xác định màu cuối cùng từ các màu tương đối của CSS vì thường chỉ mang lại chuỗi gốc. Phương pháp này có thể được thực hiện đơn giản hơn nhiều bằng cách sử dụng thư viện như Chroma.js hoặc để trích xuất dữ liệu pixel.

Các nhà phát triển có thể trích xuất, thay đổi và áp dụng các màu này một cách hiệu quả bằng cách sử dụng các công cụ và API JavaScript. Các phương pháp có thể mở rộng để xử lý đầu ra màu tương đối CSS một cách linh hoạt được cung cấp bởi cả giải pháp gốc và thư viện bên thứ ba, tùy thuộc vào nhu cầu của dự án của bạn.