Chọn màu của bất kỳ pixel nào trên màn hình bằng API EyeDropper

EyeDropper API cho phép tác giả sử dụng công cụ chọn màu do trình duyệt cung cấp trong quá trình tạo bộ chọn màu tuỳ chỉnh.

Patrick Brosset

Thomas Steiner

EyeDropper API là gì?

Nhiều ứng dụng sáng tạo cho phép người dùng chọn màu từ các phần của cửa sổ ứng dụng hoặc thậm chí từ toàn bộ màn hình, thường là bằng cách sử dụng ẩn dụ về ống nhỏ giọt.

Ví dụ: Photoshop cho phép người dùng lấy mẫu màu từ canvas để họ không phải đoán màu và có nguy cơ đoán sai. PowerPoint cũng có công cụ chọn màu, rất hữu ích khi bạn đặt màu viền hoặc màu nền cho một hình dạng. Ngay cả Công cụ cho nhà phát triển của Chromium cũng có một công cụ chọn màu mà bạn có thể dùng khi chỉnh sửa màu trong bảng điều khiển kiểu CSS để không phải ghi nhớ hoặc sao chép mã màu từ nơi khác.

Nếu đang tạo một ứng dụng sáng tạo bằng công nghệ web, bạn có thể muốn cung cấp một tính năng tương tự cho người dùng. Tuy nhiên, việc này rất khó thực hiện trên web, nếu có thể, đặc biệt nếu bạn muốn lấy mẫu màu từ toàn bộ màn hình của thiết bị (ví dụ: từ một ứng dụng khác) chứ không chỉ từ thẻ trình duyệt hiện tại. Không có công cụ nhỏ giọt do trình duyệt cung cấp mà các ứng dụng web có thể sử dụng cho nhu cầu của riêng mình.

Phần tử <input type="color"> sắp xuất hiện. Trên các trình duyệt dựa trên Chromium chạy trên thiết bị máy tính, công cụ này cung cấp một ống nhỏ giọt hữu ích trong trình đơn thả xuống của bộ chọn màu. Tuy nhiên, khi sử dụng cách này, ứng dụng của bạn sẽ phải tuỳ chỉnh bằng CSS và bao bọc trong một đoạn JavaScript để cung cấp cho các phần khác của ứng dụng. Việc chọn cách này cũng có nghĩa là các trình duyệt khác sẽ không có quyền truy cập vào tính năng này.

EyeDropper API sẽ lấp đầy khoảng trống này bằng cách cung cấp một cách lấy mẫu màu trên màn hình.

Cách sử dụng EyeDropper API

Hỗ trợ trình duyệt

Browser Support

• 95
• 95
• x
• x

Source

Phát hiện tính năng và hỗ trợ trình duyệt

Trước tiên, hãy đảm bảo rằng API có sẵn trước khi sử dụng.

if ('EyeDropper' in window) {
  // The API is available!
}

EyeDropper API được hỗ trợ trên các trình duyệt dựa trên Chromium như Edge hoặc Chrome kể từ phiên bản 95.

Sử dụng API

Để sử dụng API này, hãy tạo một đối tượng EyeDropper rồi gọi phương thức open() của đối tượng đó.

const eyeDropper = new EyeDropper();

Phương thức open() trả về một lời hứa được thực hiện sau khi người dùng chọn một pixel trên màn hình và giá trị được thực hiện sẽ cung cấp quyền truy cập vào màu của pixel ở định dạng sRGBHex (#RRGGBB). Lời hứa sẽ bị từ chối nếu người dùng rời khỏi chế độ ống nhỏ giọt bằng cách nhấn phím esc.

try {
  const result = await eyeDropper.open();
  // The user selected a pixel, here is its color:
  const colorHexValue = result.sRGBHex;
} catch (err) {
  // The user escaped the eyedropper mode.
}

Mã của ứng dụng cũng có thể huỷ chế độ ống nhỏ giọt. Điều này có thể hữu ích nếu trạng thái của ứng dụng thay đổi đáng kể. Có thể một hộp thoại bật lên sẽ xuất hiện và yêu cầu người dùng nhập dữ liệu. Chế độ ống nhỏ giọt sẽ dừng tại thời điểm đó.

Để huỷ công cụ chọn màu, bạn có thể sử dụng tín hiệu của đối tượng AbortController và truyền tín hiệu đó đến phương thức open().

const abortController = new AbortController();

try {
  const result = await eyeDropper.open({signal: abortController.signal});
  // ...
} catch (err) {
  // ...
}

// And then later, when the eyedropper mode needs to be stopped:
abortController.abort();

Dưới đây là một hàm không đồng bộ có thể tái sử dụng:

async function sampleColorFromScreen(abortController) {
  const eyeDropper = new EyeDropper();
  try {
    const result = await eyeDropper.open({signal: abortController.signal});
    return result.sRGBHex;
  } catch (e) {
    return null;
  }
}

Hãy dùng thử!

Trên Windows hoặc Mac, hãy mở một trong các bản minh hoạ Công cụ chọn màu bằng Microsoft Edge hoặc Google Chrome 95 trở lên.

Hãy thử bản minh hoạ trò chơi màu sắc. Nhấn vào nút Chơi và trong một khoảng thời gian giới hạn, hãy cố gắng lấy mẫu một màu trong danh sách ở dưới cùng sao cho khớp với ô vuông có màu ở trên cùng.

Những điều cần cân nhắc về quyền riêng tư và bảo mật

Đằng sau API web có vẻ đơn giản này là một mối lo ngại tiềm ẩn về quyền riêng tư và tính bảo mật. Điều gì sẽ xảy ra nếu một trang web độc hại có thể bắt đầu nhìn thấy các pixel trên màn hình của bạn?

Để giải quyết mối lo ngại này, quy cách API yêu cầu các biện pháp sau:

• Trước tiên, API này không cho phép chế độ nhỏ giọt bắt đầu mà không có ý định của người dùng. Phương thức open() chỉ có thể được gọi để phản hồi một hành động của người dùng (chẳng hạn như một lượt nhấp vào nút).
• Thứ hai, không thể truy xuất thông tin về pixel nếu không có ý định của người dùng. Lệnh hứa do open() trả về chỉ phân giải thành một giá trị màu để phản hồi hành động của người dùng (nhấp vào một pixel). Vì vậy, người dùng không thể sử dụng công cụ nhỏ giọt ở chế độ nền mà không nhận thấy.
• Để giúp người dùng dễ dàng nhận thấy chế độ nhỏ giọt, các trình duyệt phải làm cho chế độ này trở nên nổi bật. Đó là lý do khiến con trỏ chuột thông thường biến mất sau một khoảng thời gian ngắn và thay vào đó, giao diện người dùng chuyên dụng sẽ xuất hiện. Ngoài ra, còn có một độ trễ giữa thời điểm chế độ ống nhỏ giọt bắt đầu và thời điểm người dùng có thể chọn một pixel để đảm bảo người dùng đã có thời gian nhìn thấy kính lúp.
• Cuối cùng, người dùng có thể huỷ chế độ ống nhỏ giọt bất cứ lúc nào (bằng cách nhấn phím esc).

Phản hồi

Nhóm Chromium muốn biết trải nghiệm của bạn khi sử dụng EyeDropper API.

Cho chúng tôi biết về thiết kế API

Có vấn đề gì về API mà bạn không mong muốn không? Hoặc có phương thức hay thuộc tính nào bị thiếu mà bạn cần triển khai ý tưởng của mình không? Bạn có câu hỏi hoặc nhận xét về mô hình bảo mật? Báo cáo vấn đề về thông số kỹ thuật trên kho lưu trữ GitHub của API hoặc thêm ý kiến của bạn vào một vấn đề hiện có.

Báo cáo vấn đề về việc triển khai

Bạn có phát hiện thấy lỗi trong quá trình triển khai Chromium không? Hoặc việc triển khai có khác với quy cách không? Báo cáo lỗi tại new.crbug.com. Nhớ cung cấp càng nhiều thông tin chi tiết càng tốt, hướng dẫn đơn giản để tái hiện và nhập Blink>Forms>Color vào hộp Thành phần.

Thể hiện sự ủng hộ đối với API

Bạn có dự định sử dụng EyeDropper API không? Sự ủng hộ công khai của bạn giúp nhóm Chromium ưu tiên các tính năng và cho các nhà cung cấp trình duyệt khác thấy tầm quan trọng của việc hỗ trợ các tính năng này. Gửi một tweet đến @ChromiumDev bằng thẻ bắt đầu bằng #EyeDropper và cho chúng tôi biết bạn đang sử dụng Chromium ở đâu và như thế nào.

Đường liên kết hữu ích

• Thông tin giải thích công khai
• Bản nháp đặc tả
• Bản minh hoạ EyeDropper API | Nguồn của bản minh hoạ EyeDropper API
• Lỗi theo dõi Chromium
• Mục nhập trên ChromeStatus.com
• Thành phần Blink: Blink>Forms>Color
• Đánh giá TAG
• Yêu cầu về vị trí WebKit
• Yêu cầu về vị trí của Mozilla
• Ý định vận chuyển

Lời cảm ơn

EyeDropper API được Ionel Popescu trong nhóm Microsoft Edge chỉ định và triển khai. Bài đăng này đã được Joe Medley xem xét.