EyeDropper API ile ekrandaki herhangi bir pikselin renklerini seçme

EyeDropper API, yazarların özel renk seçiciler oluştururken tarayıcı tarafından sağlanan bir damlalık kullanmasına olanak tanır.

Patrick Brosset
Patrick Brosset
Ana sayfa
Thomas Steiner

EyeDropper API nedir?

Birçok içerik oluşturma uygulaması, kullanıcıların genellikle damlalık metaforunu kullanarak uygulama penceresinin bölümlerinden veya hatta tüm ekrandan renk seçmesine olanak tanır.

Örneğin Photoshop, kullanıcıların renkleri tuvalden örneklemesine olanak tanır. Böylece, renk tahmin etme ve yanlış renk seçme riski ortadan kalkar. PowerPoint'te de bir damlalık aracı bulunur. Bu araç, şekillerin ana hat veya dolgu rengini ayarlarken kullanışlıdır. Chromium Geliştirici Araçları'nda bile, CSS stilleri panelinde renkleri düzenlerken kullanabileceğiniz bir damlalık bulunur. Böylece renk kodunu hatırlamanız veya başka bir yerden kopyalamanız gerekmez.

Web teknolojileriyle bir içerik oluşturma uygulaması geliştiriyorsanız kullanıcılarınıza benzer bir özellik sunmak isteyebilirsiniz. Ancak bunu web'de yapmak, özellikle renkleri yalnızca mevcut tarayıcı sekmesinden değil, cihazın ekranının tamamından (örneğin, farklı bir uygulamadan) örneklemek istiyorsanız zordur veya mümkün değildir. Web uygulamalarının kendi ihtiyaçları için kullanabileceği, tarayıcı tarafından sağlanan bir damlalık aracı yoktur.

<input type="color"> öğesi yaklaşıyor. Masaüstü cihazlarda çalışan Chromium tabanlı tarayıcılarda, renk seçici açılır listesinde faydalı bir damlalık sağlar. Ancak bu seçeneği kullanmak için uygulamanızın CSS ile özelleştirilmesi ve uygulamanızın diğer bölümlerinde kullanılabilmesi için JavaScript ile sarmalanması gerekir. Bu seçeneği kullanmak, diğer tarayıcıların bu özelliğe erişemeyeceği anlamına da gelir.

EyeDropper API, ekrandaki renkleri örneklemenin bir yolunu sunarak bu boşluğu doldurur.

Chromium renk seçicisi.

EyeDropper API'yi kullanma

Tarayıcı desteği

Browser Support

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

Source

Özellik algılama ve tarayıcı desteği

Öncelikle, kullanmadan önce API'nin kullanılabilir olduğundan emin olun.

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

EyeDropper API, 95. sürümden itibaren Edge veya Chrome gibi Chromium tabanlı tarayıcılarda desteklenir.

API'yi kullanma

API'yi kullanmak için bir EyeDropper nesnesi oluşturun ve ardından open() yöntemini çağırın.

const eyeDropper = new EyeDropper();

open() yöntemi, kullanıcı ekranda bir piksel seçtikten sonra çözümlenen bir söz döndürür ve çözümlenen değer, pikselin sRGBHex biçimindeki rengine (#RRGGBB) erişim sağlar. Kullanıcı esc tuşuna basarak damlalık modundan çıkarsa söz reddedilir.

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

Uygulamanın kodu da damlalık modunu iptal edebilir. Uygulamanın durumu önemli ölçüde değiştiğinde bu özellik kullanışlı olabilir. Belki bir pop-up iletişim kutusu görünür ve kullanıcının giriş yapması gerekir. Bu noktada damlalık modu durdurulmalıdır.

Damlalığı iptal etmek için AbortController nesnesinin sinyalini kullanabilir ve bunu open() yöntemine iletebilirsiniz.

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();

Tüm bunları bir araya getirdiğimizde, aşağıda yeniden kullanılabilir bir asenkron işlev bulabilirsiniz:

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

Deneyin.

Windows veya Mac'te Microsoft Edge ya da Google Chrome 95 veya sonraki bir sürümünü kullanarak EyeDropper demolarından birini açın.

Örneğin, renk oyunu demosunu deneyin. Oynat düğmesine basın ve sınırlı bir süre içinde, üstteki renkli kareyle eşleşen alttaki listeden bir renk örneği almaya çalışın.

Color oyun demosunu oynayın.

Gizlilik ve güvenlik hakkında dikkat edilmesi gerekenler

Bu basit web API'sinin arkasında, gizlilik ve güvenlik açısından zararlı olabilecek bir sorun gizleniyor. Kötü amaçlı bir web sitesi ekranınızdaki pikselleri görmeye başlarsa ne olur?

Bu endişeyi gidermek için API spesifikasyonu aşağıdaki önlemleri gerektirir:

  • İlk olarak, API, kullanıcı isteği olmadan damlalık modunun başlatılmasına izin vermez. open() yöntemi yalnızca bir kullanıcı işlemine (ör. düğme tıklama) yanıt olarak çağrılabilir.
  • İkinci olarak, kullanıcı niyeti olmadan piksel bilgileri tekrar alınamaz. open() tarafından döndürülen söz yalnızca bir kullanıcı işlemine (pikseli tıklama) yanıt olarak bir renk değeriyle sonuçlanır. Bu nedenle, kullanıcı fark etmeden arka planda damlalık kullanılamaz.
  • Kullanıcıların damlalık modunu kolayca fark etmesine yardımcı olmak için tarayıcıların bu modu belirgin hale getirmesi gerekir. Bu nedenle, normal fare imleci kısa bir gecikmeden sonra kaybolur ve bunun yerine özel kullanıcı arayüzü görünür. Ayrıca, kullanıcının büyüteci görmesi için yeterli zamanı olması amacıyla damlalık modu başladıktan sonra kullanıcının bir piksel seçebilmesi için de bir gecikme süresi vardır.
  • Son olarak, kullanıcılar istediği zaman esc tuşuna basarak renk seçici modunu iptal edebilir.

Geri bildirim

Chromium ekibi, EyeDropper API ile ilgili deneyimlerinizi öğrenmek istiyor.

API tasarımı hakkında bilgi verin

API ile ilgili beklentilerinizi karşılamayan bir durum var mı? Yoksa fikrinizi uygulamak için eksik yöntemler veya özellikler mi var? Güvenlik modeliyle ilgili sorunuz veya yorumunuz mu var? API'nin GitHub deposunda bir spesifikasyon sorunu bildirin veya düşüncelerinizi mevcut bir soruna ekleyin.

Uygulamayla ilgili sorun bildirme

Chromium'un uygulanmasıyla ilgili bir hata mı buldunuz? Yoksa uygulama, spesifikasyondan farklı mı? new.crbug.com adresinden hata bildirin. Mümkün olduğunca fazla ayrıntı ve hatayı yeniden oluşturmayla ilgili basit talimatlar eklediğinizden emin olun. Ayrıca Blink>Forms>Color simgesini Bileşenler kutusuna girin.

API'ye desteğinizi gösterme

EyeDropper API'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chromium ekibinin özellikleri önceliklendirmesine yardımcı olur ve diğer tarayıcı satıcılarına bu özellikleri desteklemenin ne kadar önemli olduğunu gösterir. #EyeDropper hashtag'ini kullanarak @ChromiumDev'e tweet gönderin ve nerede, nasıl kullandığınızı bize bildirin.

Faydalı bağlantılar

Teşekkür

EyeDropper API, Microsoft Edge ekibinden Ionel Popescu tarafından belirtilmiş ve uygulanmıştır. Bu yayın Joe Medley tarafından incelendi.