Memilih warna piksel apa pun di layar dengan EyeDropper API

EyeDropper API memungkinkan penulis menggunakan penyalin warna yang disediakan browser dalam pembuatan pemilih warna kustom.

Patrick Brosset
Patrick Brosset
Halaman Beranda
Thomas Steiner

Apa itu EyeDropper API?

Banyak aplikasi kreatif memungkinkan pengguna memilih warna dari bagian jendela aplikasi atau bahkan dari seluruh layar, biasanya menggunakan metafora pipet.

Misalnya, Photoshop memungkinkan pengguna mengambil sampel warna dari kanvas sehingga mereka tidak perlu menebak warna dan berisiko salah. PowerPoint juga memiliki alat pipet, yang berguna saat menyetel warna garis batas atau warna pengisi bentuk. Bahkan, Chrome DevTools memiliki alat tetes mata yang dapat Anda gunakan saat mengedit warna di panel gaya CSS sehingga Anda tidak perlu mengingat atau menyalin kode warna dari tempat lain.

Jika Anda sedang membangun aplikasi kreatif dengan teknologi web, Anda mungkin ingin menyediakan fitur serupa kepada pengguna. Namun, melakukan hal ini di web sulit, jika memungkinkan, terutama jika Anda ingin mengambil sampel warna dari seluruh layar perangkat (misalnya, dari aplikasi lain) dan bukan hanya dari tab browser saat ini. Tidak ada alat pipet yang disediakan browser yang dapat digunakan aplikasi web untuk kebutuhannya sendiri.

Elemen <input type="color"> mendekat. Di browser berbasis Chromium yang berjalan di perangkat desktop, fitur ini menyediakan alat tetes mata yang berguna di drop-down pemilih warna. Namun, penggunaan ini berarti aplikasi Anda harus menyesuaikannya dengan CSS, dan membungkusnya dalam sedikit JavaScript agar tersedia untuk bagian lain aplikasi Anda. Memilih opsi ini juga berarti browser lain tidak akan memiliki akses ke fitur tersebut.

EyeDropper API mengisi kesenjangan ini dengan menyediakan cara untuk mengambil sampel warna dari layar.

Pemilih warna Chromium.

Cara menggunakan EyeDropper API

Dukungan browser

Browser Support

  • Chrome: 95.
  • Edge: 95.
  • Firefox: not supported.
  • Safari: not supported.

Source

Deteksi fitur dan dukungan browser

Pertama, pastikan API tersedia sebelum menggunakannya.

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

EyeDropper API didukung di browser berbasis Chromium seperti Edge atau Chrome mulai dari versi 95.

Menggunakan API

Untuk menggunakan API, buat objek EyeDropper, lalu panggil metode open().

const eyeDropper = new EyeDropper();

Metode open() menampilkan promise yang diselesaikan setelah pengguna memilih piksel di layar, dan nilai yang diselesaikan memberikan akses ke warna piksel dalam format sRGBHex (#RRGGBB). Promise ditolak jika pengguna keluar dari mode pipet dengan menekan tombol 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.
}

Kode aplikasi juga dapat membatalkan mode penetes. Hal ini dapat berguna jika status aplikasi berubah secara signifikan. Mungkin dialog pop-up muncul dan memerlukan input pengguna. Mode penetes mata harus dihentikan pada saat itu.

Untuk membatalkan pipet, Anda dapat menggunakan sinyal objek AbortController dan meneruskannya ke metode 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();

Dengan menggabungkan semuanya, di bawah ini Anda dapat menemukan fungsi asinkron yang dapat digunakan kembali:

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

Cobalah!

Dengan menggunakan Microsoft Edge atau Google Chrome 95 atau yang lebih baru, di Windows atau Mac, buka salah satu demo EyeDropper.

Coba demo game warna misalnya. Tekan tombol Putar dan dalam waktu terbatas, coba ambil sampel warna dari daftar di bagian bawah yang cocok dengan kotak berwarna di bagian atas.

Demo game warna.

Pertimbangan privasi dan keamanan

Di balik API web yang tampak sederhana ini, terdapat potensi masalah privasi dan keamanan yang berbahaya. Bagaimana jika situs berbahaya dapat mulai melihat piksel dari layar Anda?

Untuk mengatasi masalah ini, spesifikasi API memerlukan tindakan berikut:

  • Pertama, API tidak benar-benar memungkinkan mode penetes warna dimulai tanpa intent pengguna. Metode open() hanya dapat dipanggil sebagai respons terhadap tindakan pengguna (seperti klik tombol).
  • Kedua, tidak ada informasi piksel yang dapat diambil tanpa maksud pengguna lagi. Promise yang ditampilkan oleh open() hanya di-resolve ke nilai warna sebagai respons terhadap tindakan pengguna (mengklik piksel). Jadi, alat tetes mata tidak dapat digunakan di latar belakang tanpa sepengetahuan pengguna.
  • Untuk membantu pengguna melihat mode pipet dengan mudah, browser harus membuat mode ini terlihat jelas. Itulah sebabnya kursor mouse normal menghilang setelah jeda singkat dan antarmuka pengguna khusus muncul. Ada juga jeda antara saat mode penetes dimulai dan saat pengguna dapat memilih piksel untuk memastikan pengguna memiliki waktu untuk melihat kaca pembesar.
  • Terakhir, pengguna dapat membatalkan mode penetes warna kapan saja (dengan menekan tombol esc).

Masukan

Tim Chromium ingin mengetahui pengalaman Anda saat menggunakan EyeDropper API.

Beri tahu kami tentang desain API

Apakah ada sesuatu tentang API yang tidak berfungsi seperti yang Anda harapkan? Atau, apakah ada metode atau properti yang tidak ada dan perlu Anda terapkan untuk mewujudkan ide Anda? Ada pertanyaan atau komentar tentang model keamanan? Laporkan masalah spesifikasi di repo GitHub API, atau tambahkan pendapat Anda ke masalah yang sudah ada.

Melaporkan masalah terkait penerapan

Apakah Anda menemukan bug pada penerapan Chromium? Atau apakah implementasinya berbeda dengan spesifikasi? Laporkan bug di new.crbug.com. Pastikan untuk menyertakan detail sebanyak mungkin, petunjuk sederhana untuk mereproduksi, dan masukkan Blink>Forms>Color di kotak Komponen.

Menunjukkan dukungan untuk API

Apakah Anda berencana menggunakan EyeDropper API? Dukungan publik Anda membantu tim Chromium memprioritaskan fitur dan menunjukkan kepada vendor browser lain betapa pentingnya dukungan untuk fitur tersebut. Kirim tweet ke @ChromiumDev menggunakan hashtag #EyeDropper dan beri tahu kami di mana dan bagaimana Anda menggunakannya.

Link bermanfaat

Ucapan terima kasih

EyeDropper API ditentukan dan diimplementasikan oleh Ionel Popescu dari tim Microsoft Edge. Postingan ini ditinjau oleh Joe Medley.