Memilih warna piksel apa pun di layar dengan EyeDropper API

EyeDropper API memungkinkan penulis menggunakan pipet yang disediakan browser dalam pembuatan alat pilih warna kustom.

Patrick Brosset

Thomas Steiner

Apa itu EyeDropper API?

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

Photoshop, misalnya, memungkinkan pengguna mengambil sampel warna dari kanvas sehingga mereka tidak perlu menebak warna dan berisiko salah. PowerPoint juga memiliki alat pipet, yang berguna saat menetapkan garis batas atau warna isi bentuk. Bahkan Chromium DevTools 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 membuat aplikasi materi iklan 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"> mendekati. Pada browser berbasis Chromium yang berjalan di perangkat desktop, fitur ini menyediakan pipet yang berguna di drop-down pemilih warna. Namun, menggunakan opsi ini berarti aplikasi Anda harus menyesuaikannya dengan CSS, dan menggabungkan sedikit JavaScript untuk membuatnya tersedia di bagian lain aplikasi Anda. Menggunakan 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.

Cara menggunakan EyeDropper API

Dukungan browser

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 versi 95.

Menggunakan API

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

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 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 pipet. Hal ini dapat berguna jika status aplikasi berubah secara substansial. Mungkin dialog pop-up muncul dan memerlukan input pengguna. Mode pipet akan 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();

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

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

Pertimbangan privasi dan keamanan

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

Untuk mengatasi masalah ini, spesifikasi API memerlukan tindakan berikut:

• Pertama, API sebenarnya tidak mengizinkan mode pipet 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 lagi tanpa niat 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 sepengetahuan pengguna.
• Untuk membantu pengguna 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. 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 saat menggunakan EyeDropper API.

Ceritakan kepada 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 diperlukan untuk menerapkan ide Anda? Ada pertanyaan atau komentar tentang model keamanan? Ajukan masalah spesifikasi di repo GitHub API, atau tambahkan pendapat Anda ke masalah yang 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 Components. Glitch sangat cocok untuk berbagi repro yang cepat dan mudah.

Menampilkan 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 tempat dan cara Anda menggunakannya.

Link bermanfaat

• Penjelasan untuk publik
• Draf spesifikasi
• Demo EyeDropper API | Sumber Demo EyeDropper API
• Bug pelacakan Chromium
• Entri ChromeStatus.com
• Komponen Blink: Blink>Forms>Color
• TAG Review
• Permintaan posisi WebKit
• Permintaan posisi Mozilla
• Intent to Ship

Ucapan terima kasih

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