Bu sayfa, Cloud Translation API ile çevrilmiştir.

EyeDropper API ile ekrandaki herhangi bir pikselin renklerini seçme

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

Patrick Brosset

Thomas Steiner

EyeDropper API nedir?

Birçok reklam öğesi uygulaması, kullanıcıların genellikle bir damlalık metaforu kullanarak uygulama penceresinin bölümlerinden veya hatta ekranın tamamından renk seçmesine olanak tanır.

Örneğin, Photoshop, kullanıcıların kanvastaki renkleri denemesine olanak tanır. Böylece, bir rengi tahmin etmek zorunda kalmaz ve yanlışlık yapma riskiyle karşı karşıya kalırlar. PowerPoint'te, bir şeklin ana hat veya dolgu rengini ayarlamanıza yardımcı olan bir damlalık aracı da bulunur. Chromium DevTools'da 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 reklam öğesi uygulaması oluşturuyorsanız kullanıcılarınıza benzer bir özellik sunmak isteyebilirsiniz. Ancak bunu web'de yapmak zordur (mümkünse). Özellikle de yalnızca mevcut tarayıcı sekmesinden değil, cihazın ekranının tamamından (örneğin, farklı bir uygulamadan) renk örneklemek istiyorsanız bu işlem daha da zordur. 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şır. Masaüstü cihazlarda çalışan Chromium tabanlı tarayıcılarda, renk seçici açılır menüsünde kullanışlı bir damlalık sağlar. Ancak bu yöntemi kullandığınızda, uygulamanızın CSS ile özelleştirilmesi ve uygulamanızın diğer bölümlerinde kullanılabilmesi için biraz JavaScript ile sarmalanması gerekir. Bu seçeneği tercih ettiğinizde diğer tarayıcılar da bu özelliğe erişemez.

EyeDropper API, ekrandaki renkleri örnekleme yöntemi sunarak bu boşluğu doldurur.

Chromium renk seçici.

EyeDropper API'yi kullanma

Tarayıcı desteği

Kaynak

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

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

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

EyeDropper API, 95 sürümünden itibaren Edge veya Chrome gibi Chromium tabanlı tarayıcılarda desteklenmektedir.

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 sona eren bir taahhüt döndürür ve çözümlenen değer, pikselin sRGBHex biçimindeki (#RRGGBB) rengine erişim sağlar. Kullanıcı esc tuşuna basarak damlalık modundan ayrılırsa 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, damlalık modunu da iptal edebilir. Bu, uygulamanın durumu önemli ölçüde değişirse kullanışlı olabilir. Kullanıcıdan giriş yapılmasını isteyen bir pop-up iletişim kutusu gösterilebilir. Bu noktada damlalık modu durdurulur.

Damlalık aracını iptal etmek için AbortController nesnesinin sinyalini kullanıp open() yöntemine aktarabilirsiniz.

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 getirerek aşağıda yeniden kullanılabilir bir asynkron 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'i 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, alt kısımdaki listeden üstteki renkli kareyle eşleşen bir renk seçmeye çalışın.

Renkli oyun demosu.

Gizlilik ve güvenlikle ilgili dikkat edilmesi gereken noktalar

Basit görünen bu web API'sinin arkasında, gizlilik ve güvenlik açısından zararlı olabilecek bir sorun yatıyor. Kötü amaçlı bir web sitesi, ekranınızdan pikseller görmeye başlarsa ne olur?

Bu endişeyi gidermek için API spesifikasyonunda aşağıdaki önlemlerin alınması gerekir:

Öncelikle API, kullanıcı amacı olmadan damlalık modunun başlatılmasına izin vermez. open() yöntemi yalnızca bir kullanıcı işlemine (ör. düğme tıklaması) yanıt olarak çağrılabilir.
İkinci olarak, kullanıcı niyetine gerek kalmadan tekrar piksel bilgisi alınamaz. open() tarafından döndürülen taahhüt yalnızca bir kullanıcı işlemine (bir pikseli tıklama) yanıt olarak renk değerine çözümlenir. Bu nedenle, kullanıcı fark etmeden arka planda renk damlalığı kullanılamaz.
Kullanıcıların damlalık modunu kolayca fark edebilmesi için tarayıcıların modu açıkça göstermesi gerekir. Bu nedenle, normal fare imlecinin kısa bir gecikmenin ardından kaybolur ve bunun yerine özel kullanıcı arayüzü görünür. Ayrıca, damlalık modunun başlaması ile kullanıcının büyüteci görebileceğinden emin olmak için bir piksel seçmesi arasında da bir gecikme olur.
Son olarak, kullanıcılar istedikleri zaman damlalık modunu iptal edebilir (esc tuşuna basarak).

Geri bildirim

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

API tasarımı hakkında bilgi verin

API ile ilgili olarak beklediğiniz gibi çalışmayan bir şey var mı? Yoksa fikrinizi uygulamak için ihtiyaç duyduğunuz yöntemler veya özellikler eksik mi? Güvenlik modeliyle ilgili sorunuz veya yorumunuz mu var? API'nin GitHub deposunda spesifikasyon sorunu gönderin veya mevcut bir soruna düşüncelerinizi ekleyin.

Uygulamayla ilgili bir sorunu bildirin

Chromium'un uygulamasında bir hata mı buldunuz? Yoksa uygulama, spesifikasyondan farklı mı? new.crbug.com adresinden hata kaydı oluşturun. Mümkün olduğunca fazla ayrıntı ekleyin, hatayı yeniden oluşturmayla ilgili basit talimatlar verin ve Bileşenler kutusuna Blink>Forms>Color yazın. Glitch, hızlı ve kolay yeniden oluşturma işlemlerini paylaşmak için idealdir.

API'yi destekleme

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

Faydalı bağlantılar

Teşekkür ederiz

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