Memilih warna piksel apa pun di layar dengan EyeDropper API

EyeDropper API memungkinkan penulis menggunakan pipet yang disediakan browser dalam konstruksi pemilih warna kustom.

Patrick Brosset
Patrick Brosset
X GitHub
Thomas Steiner

Apa itu EyeDropper API?

Banyak aplikasi kreatif yang 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 warna. PowerPoint juga memiliki alat pipet, berguna saat mengatur garis luar atau warna isian suatu bentuk. Chromium DevTools juga memiliki pipet 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 membangun aplikasi kreatif dengan teknologi web, sebaiknya sediakan fitur yang serupa kepada pengguna. Namun, melakukan ini di web adalah hal yang sulit, jika memungkinkan, terutama jika Anda ingin mengambil sampel warna dari seluruh layar perangkat (misalnya, dari aplikasi yang berbeda) dan bukan hanya dari tab browser saat ini. Tidak ada alat pipet yang disediakan browser yang dapat digunakan aplikasi web untuk kebutuhan mereka sendiri.

Elemen <input type="color"> akan muncul. Di browser berbasis Chromium yang berjalan di perangkat desktop, pipet ini menyediakan pipet yang berguna di drop-down pemilih warna. Namun, menggunakan ini berarti aplikasi Anda harus menyesuaikannya dengan CSS, dan menambahkan JavaScript agar tersedia untuk bagian lain dalam aplikasi Anda. Dengan menggunakan opsi ini, berarti browser lain tidak akan memiliki akses ke fitur tersebut.

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

Pemilih warna Chromium.

Cara menggunakan EyeDropper API

Dukungan browser

Dukungan Browser

  • 95
  • 95
  • x
  • x

Sumber

Deteksi fitur dan dukungan browser

Pertama, pastikan API tersebut tersedia sebelum menggunakannya.

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

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

Menggunakan API

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

const eyeDropper = new EyeDropper();

Metode open() menampilkan promise yang di-resolve setelah pengguna memilih piksel di layar, dan nilai yang di-resolve memberikan akses ke warna piksel dalam format sRGBHex (#RRGGBB). Promise ditolak jika pengguna meninggalkan 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 pipet. Hal ini dapat berguna jika status aplikasi berubah secara substansial. Mungkin dialog pop-up muncul dan memerlukan input pengguna. Mode pipet 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();

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 Microsoft Edge atau Google Chrome 95 atau yang lebih baru, di Windows atau Mac, buka salah satu demo EyeDropper.

Coba demo game warna sebagai contohnya. Tekan tombol Play dan dalam waktu terbatas, coba ambil sampel warna dari daftar di bagian bawah yang cocok dengan persegi berwarna di bagian atas.

Demo game warna.

Pertimbangan privasi dan keamanan

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

Untuk mengatasi masalah ini, spesifikasi API memerlukan langkah-langkah berikut:

  • Pertama, API tersebut tidak benar-benar mengizinkan mode pipet dimulai tanpa maksud pengguna. Metode open() hanya dapat dipanggil sebagai respons terhadap tindakan pengguna (seperti klik tombol).
  • Kedua, tidak ada lagi informasi piksel yang dapat diambil tanpa intent pengguna. Promise yang ditampilkan oleh open() hanya me-resolve ke nilai warna sebagai respons terhadap tindakan pengguna (mengklik piksel). Jadi, pipet tidak dapat digunakan di latar belakang tanpa diperhatikan oleh pengguna.
  • Agar pengguna dapat melihat mode pipet dengan mudah, browser diperlukan untuk membuat mode tersebut terlihat jelas. Inilah sebabnya kursor mouse normal menghilang setelah penundaan singkat dan antarmuka pengguna khusus akan muncul sebagai gantinya. Ada juga penundaan antara saat mode pipet dimulai dan saat pengguna dapat memilih piksel untuk memastikan pengguna memiliki waktu untuk melihat kaca pembesar.
  • Terakhir, pengguna dapat membatalkan mode pipet kapan saja (dengan menekan tombol esc).

Masukan

Tim Chromium ingin mengetahui pengalaman Anda 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 hilang yang Anda butuhkan untuk menerapkan ide Anda? Punya 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 implementasi Chromium? Atau apakah implementasinya berbeda dari spesifikasi? Laporkan bug di new.crbug.com. Pastikan untuk menyertakan detail sebanyak mungkin, petunjuk sederhana untuk mereproduksi, dan masukkan Blink>Forms>Color di kotak Components. Glitch berfungsi dengan baik untuk berbagi repro yang cepat dan mudah.

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 mendukung 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.