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

API EyeDropper 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 xây dựng công cụ chọn màu tùy chỉnh.

Patrick Brosset

Thomas Steiner

API EyeDropper 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 sử dụng phép ẩn dụ của công cụ chọn màu.

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ơ nhận sai. PowerPoint cũng có một công cụ chọn màu, hữu ích khi thiết lập đường viền hoặc màu nền cho một hình dạng. Ngay cả Công cụ của Chromium cho nhà phát triển cũng có công cụ chọn màu mà bạn có thể sử dụng khi chỉnh sửa màu trong bảng điều khiển kiểu CSS để bạn không phải nhớ hoặc sao chép mã màu từ nơi khác.

Nếu đang xây dựng một ứng dụng quảng cáo có 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 thực hiện việc này trên web rất khó, nếu có thể, đặc biệt là khi 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ụ chọn màu do trình duyệt cung cấp mà các ứng dụng web có thể sử dụng cho nhu cầu riêng của chúng.

Phần tử <input type="color"> đã gần giống. Trên các trình duyệt dựa trên Chromium chạy trên thiết bị máy tính, Google Chrome sẽ cung cấp một công cụ chọn màu hữu ích trong trình đơn thả xuống công cụ chọn màu. Tuy nhiên, việc sử dụng thuộc tính này đồng nghĩa với việc ứng dụng của bạn sẽ phải tuỳ chỉnh bằng CSS và bao bọc một chút JavaScript để cung cấp tính năng này cho các phần khác của ứng dụng. Việc sử dụng tuỳ chọn 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.

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

Cách sử dụng API EyeDropper

Hỗ trợ trình duyệt

Hỗ trợ trình duyệt

• 95
• 95
• x
• x

Nguồn

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

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

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

API EyeDropper đượ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().

const eyeDropper = new EyeDropper();

Phương thức open() trả về một lời hứa sẽ phân giải sau khi người dùng chọn một pixel trên màn hình, còn giá trị đã phân giải 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ế độ công cụ chọn màu 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ế độ công cụ chọn màu. Đ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 thông tin. Bạn nên dừng chế độ công cụ chọn màu 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();

Kết hợp tất cả lại với nhau, bên dưới là một hàm không đồng bộ có thể sử dụng lại:

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ử!

Sử dụng Microsoft Edge hoặc Google Chrome 95 trở lên, trên Windows hoặc Mac, hãy mở một trong các bản minh hoạ của EyeDropper.

Chẳng hạn, hãy thử bản minh hoạ trò chơi màu. Nhấn vào nút Play (Phát) và trong một khoảng thời gian có hạn, hãy thử lấy mẫu một màu từ danh sách ở dưới cùng khớp với hình vuông 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 tưởng chừng đơn giản này lại ẩn chứa mối lo ngại về quyền riêng tư và bảo mật tiềm ẩn nguy cơ gây hại. Điều gì sẽ xảy ra nếu một trang web độc hại có thể bắt đầu 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 đây:

• Trước tiên, API này không thực sự cho phép chế độ công cụ chọn màu 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 (như nhấp vào nút).
• Thứ hai, không thể truy xuất thông tin pixel mà không có ý định của người dùng một lần nữa. Lời hứa mà open() trả về chỉ phân giải thành một giá trị màu để phản hồi thao tác 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ụ chọn màu ở chế độ nền nếu không nhận thấy.
• Để giúp người dùng dễ dàng nhận thấy chế độ công cụ chọn màu, các trình duyệt cần phải hiển thị rõ chế độ này. Đây là lý do tại sao con trỏ chuột thông thường biến mất sau một khoảng thời gian trễ ngắn và giao diện người dùng chuyên dụng xuất hiện. Ngoài ra còn có độ trễ giữa thời điểm chế độ công cụ chọn màu 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ế độ công cụ chọn màu bất cứ lúc nào (bằng cách nhấn phím esc).

Ý kiến phản hồi

Nhóm Chromium muốn biết về trải nghiệm của bạn với API EyeDropper.

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

Có điều gì về API không hoạt động như bạn mong đợi không? Hay có thiếu phương thức hoặc thuộc tính nào mà bạn cần triển khai không? Bạn có thắc mắc hoặc nhận xét về mô hình bảo mật? Gửi 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 vào vấn đề hiện có.

Báo cáo sự cố với quá trình triển khai

Bạn có phát hiện thấy lỗi khi triển khai Chromium không? Hay cách triển khai có khác với quy cách không? Gửi lỗi tại new.crbug.com. Hãy nhớ cung cấp nhiều thông tin chi tiết nhất có thể, hướng dẫn đơn giản để tái tạo và nhập Blink>Forms>Color vào hộp Thành phần. Sự cố rất hữu ích trong việc chia sẻ các bản sao nhanh và dễ dàng.

Hỗ trợ API

Bạn có định sử dụng API EyeDropper không? Sự hỗ trợ 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 biết tầm quan trọng của việc hỗ trợ họ. Hãy gửi một dòng tweet tới @ChromiumDev bằng hashtag #EyeDropper và cho chúng tôi biết vị trí cũng như cách bạn đang sử dụng bài đăng này.

Các đường liên kết hữu ích

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

Xác nhận

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