EyeDropper API, yazarların özel renk seçici oluşturmak için tarayıcı tarafından sağlanan damlalık kullanmasına olanak tanır.
EyeDropper API nedir?
Birçok reklam uygulaması, genellikle bir damlalık metaforu kullanarak, kullanıcıların uygulama penceresinin bazı bölümlerinden veya hatta ekranın tamamından renk seçmesine olanak tanır.
Örneğin Photoshop, kullanıcıların renkleri tahmin etmek zorunda kalmamaları ve yanlış yapma riskini almaları için tuvaldeki renklerin örneklenmesine olanak tanır. PowerPoint'te bir şeklin dış çizgi veya dolgu rengini ayarlarken yararlı olan bir damlalık aracı da vardır. Chromium Geliştirici Araçları'nda bile CSS stilleri panelindeki renkleri düzenlerken kullanabileceğiniz bir damlalık vardır. Böylece renk kodunu başka bir yerden hatırlamak veya kopyalamak zorunda kalmazsınız.
Web teknolojileriyle bir reklam uygulaması oluşturuyorsanız kullanıcılarınıza benzer bir özellik sağlamak isteyebilirsiniz. Ancak, bunu web'de yapmak mümkünse, özellikle de renkleri yalnızca geçerli tarayıcı sekmesinden değil, cihazın tüm ekranından (örneğin, farklı bir uygulamadan) örnek almak istiyorsanız zordur. Tarayıcı tarafından sağlanıp web uygulamalarının kendi ihtiyaçları için kullanabileceği 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 yararlı bir damlalık bulunur. Ancak bunu kullandığınızda, uygulamanız CSS ile özelleştirip uygulamanızın diğer bölümlerinde kullanılabilir hale getirmek için JavaScript ile sarmalaması gerekir. Bu seçeneği kullanmanız, diğer tarayıcıların bu özelliğe erişemeyeceği anlamına da gelir.
EyeDropper API, renklerin ekrandan örneklenmesi için bir yöntem sunarak bu açığı doldurur.
EyeDropper API nasıl kullanılır?
Tarayıcı desteği
Özellik algılama ve tarayıcı desteği
API'yi kullanmadan önce, API'nin kullanılabilir durumda 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 kullanın
API'yi kullanmak için bir EyeDropper nesnesi oluşturun ve ardından nesneye 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 rengine sRGBHex biçiminde (#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. Bu, uygulamanın durumu önemli şekilde değişirse kullanışlı olabilir. Belki bir pop-up iletişim kutusu belirir ve kullanıcının giriş yapmasını gerektirir. Damlalık modu bu noktada durdurulmalıdır.
Damlalığı iptal etmek için bir AbortController nesnesinin sinyalini kullanıp open() yöntemine geçirebilirsiniz.
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();
Hepsini bir araya getirirsek, aşağıda yeniden kullanılabilir bir eşzamansız işlev görebilirsiniz:
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 ya da Mac'te Microsoft Edge'i ya da Google Chrome 95 veya sonraki bir sürümü 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çin, alt kısımdaki listeden, en üstteki renkli kareyle eşleşen bir rengi deneyin.
Gizlilik ve güvenlikle ilgili dikkat edilmesi gereken noktalar
Basit gibi görünen bu web API'sinin arkasında, zararlı olabilecek bir gizlilik ve güvenlik endişesi saklıdır. Kötü amaçlı bir web sitesi ekranınızdan pikseller görmeye başlayabilirse ne olur?
Bu endişeyi gidermek için API spesifikasyonu aşağıdaki önlemlerin alınmasını gerektirir:
- Öncelikle API, kullanıcının niyeti olmadan damlalık modunun başlatılmasına izin vermez.
open()yöntemi, yalnızca kullanıcı işlemine (düğme tıklaması gibi) yanıt olarak çağrılabilir. - İkinci olarak, tekrar kullanıcı niyeti olmadan hiçbir piksel bilgisi alınamaz.
open()tarafından döndürülen söz, yalnızca kullanıcı işlemine (bir pikseli tıklama) yanıt olarak bir renk değerine çözümlenir. Bu nedenle damlalık, kullanıcı fark etmeden arka planda kullanılamaz. - Kullanıcıların damlalık modunu kolayca fark edebilmesi için tarayıcıların modu belirgin hale getirmesi gerekir. Bu nedenle, kısa bir gecikmeden sonra normal fare imleci kaybolur ve onun yerine özel kullanıcı arayüzü görüntülenir. Ayrıca, damlalık modunun başlaması ile kullanıcının büyüteci görmesi için zamana sahip olmasını sağlamak amacıyla bir piksel seçebileceği zaman arasında bir gecikme de olur.
- Son olarak, kullanıcılar istedikleri zaman damlalık modunu (esc tuşuna basarak) iptal edebilir.
Geri bildirim
Chromium ekibi, EyeDropper API ile ilgili deneyimlerinizi öğrenmek istiyor.
Bize API tasarımı hakkında bilgi verin
API'de beklediğiniz gibi çalışmayan bir durum mu var? Fikrinizi uygulamak için gereken yöntem veya özellikler eksik mi? Güvenlik modeliyle ilgili bir sorunuz veya yorumunuz mu var? API'nin GitHub deposunda teknik özellik sorunu kaydedin veya mevcut bir sorunla ilgili düşüncelerinizi ekleyin.
Uygulamayla ilgili bir sorunu bildirin
Chromium'un uygulamasında bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı?
new.crbug.com adresinde hata bildiriminde bulunun. Mümkün olduğunca fazla ayrıntı eklediğinizden ve yeniden oluşturmaya ilişkin basit talimatları eklediğinizden emin olun ve Bileşenler kutusuna Blink>Forms>Color yazın.
Glitch, hızlı ve kolay yeniden oluşturmalar paylaşmak için idealdir.
API'ye desteği gösterin
EyeDropper API'yi kullanmayı düşünüyor musunuz? Herkese açık desteğiniz, Chromium ekibinin özellikleri önceliklendirmesine yardımcı olur ve diğer tarayıcı satıcılarına onları desteklemenin ne kadar kritik olduğunu gösterir. #EyeDropper hashtag'ini kullanarak @ChromiumDev adresine tweet göndererek bunu nerede ve nasıl kullandığınızı bize bildirin.
Faydalı bağlantılar
- Herkese açık açıklayıcı
- Spesifikasyon taslağı
- EyeDropper API Demosu | EyeDropper API Demo kaynağı
- Chromium izleme hatası
- ChromeStatus.com girişi
- Yanıp Sönen Bileşen:
Blink>Forms>Color - TAG İncelemesi
- WebKit konum isteği
- Mozilla konum isteği
- Gönderim Amacı
Teşekkür
EyeDropper API, Microsoft Edge ekibinden Ionel Popescu tarafından belirlenmiş ve uygulanmıştır. Bu yayın Joe Medley tarafından incelendi.