Trang này được dịch bởi Cloud Translation API.

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 công cụ 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 hình ảnh mô phỏng chiếc bút lấy 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ơ chọn sai màu. PowerPoint cũng có công cụ chọn màu, rất hữu ích khi đặt đường viền hoặc màu tô của một hình dạng. Ngay cả Công cụ cho nhà phát triển Chromium 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 sáng tạo bằng các công nghệ web, bạn nên cung cấp một tính năng tương tự cho người dùng. Tuy nhiên, nếu có thể thì rất khó để thực hiện việc này trên web, đặ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ụ eyedropper do trình duyệt cung cấp mà ứ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, trình duyệt này cung cấp một công cụ chọn màu hữu ích trong trình đơn thả xuống của công cụ chọn màu. Tuy nhiên, việc sử dụng tính năng này có nghĩa là ứng dụng của bạn sẽ phải tuỳ chỉnh bằng CSS và gói trong một chút JavaScript để cung cấp 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 (Công cụ chọn màu) 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 từ màn hình.

Công cụ chọn màu Chromium.

Cách sử dụng EyeDropper API

Hỗ trợ trình duyệt

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 có sẵn 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, 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 sẽ đượ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ị đã phân giải 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ế độ 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. Chế độ eyedropper sẽ bị 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();

Khi kết hợp tất cả, bạn có thể tìm thấy một hàm không đồng bộ có thể sử dụng lại ở bên dướ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 phiên bản 95 trở lên trên Windows hoặc Mac, hãy mở một trong các bản minh hoạ EyeDropper.

Ví dụ: hãy thử bản minh hoạ trò chơi màu. Nhấn 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 trong danh sách ở dưới cùng khớp với hình vuông màu ở trên cùng.

Bản minh hoạ trò chơi màu.

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 về quyền riêng tư và bảo mật có thể 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 nhìn thấy 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:

Thứ nhất, API 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. Bạn chỉ có thể gọi phương thức open() để 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 pixel nếu không có ý định của người dùng. Lời 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, bạn không thể sử dụng công cụ chọn màu trong nền mà người dùng 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, trình duyệt phải làm cho chế độ này trở nên rõ ràng. Đó là lý do con trỏ chuột thông thường biến mất sau một khoảng thời gian ngắn và giao diện người dùng chuyên dụng sẽ xuất hiện. Ngoài ra, còn có độ trễ giữa thời điểm chế độ công cụ lấy mẫu 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 xem 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).

Phản hồi

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

Giới thiệu cho chúng tôi về thiết kế API

API có hoạt động như mong đợi không? Hay có phương thức hoặc 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 không? 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 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 lỗi trong quá trình triển khai Chromium không? Hay cách triển khai có khác với thông số kỹ thuật không? Gửi lỗi tại new.crbug.com. Hãy 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 lỗi và nhập Blink>Forms>Color vào hộp Components (Thành phần). Glitch rất hữu ích để chia sẻ các bản tái hiện nhanh chóng và dễ dàng.

Hỗ trợ API

Bạn có định sử dụng API EyeDropper 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 đó. Gửi một tweet đến@ChromiumDev bằng hashtag #EyeDropper và cho chúng tôi biết bạn đang sử dụng ở đâu và như thế nào.

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

Lời cảm ơ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.