Kleuren kiezen van elke pixel op het scherm met de EyeDropper API

De EyeDropper API stelt ontwikkelaars in staat om een ​​door de browser geleverde pipet te gebruiken bij het maken van aangepaste kleurenpickers.

Patrick Brosset
Patrick Brosset
Homepage
Thomas Steiner

Wat is de EyeDropper API?

Veel creatieve toepassingen stellen gebruikers in staat om kleuren te selecteren uit delen van het app-venster of zelfs van het hele scherm, meestal met behulp van een pipet.

Photoshop laat gebruikers bijvoorbeeld kleuren rechtstreeks van het canvas selecteren, zodat ze niet hoeven te gokken en het risico lopen een foute kleur te krijgen. PowerPoint heeft ook een pipettool, handig voor het instellen van de omtrek- of vulkleur van een vorm. Zelfs Chromium DevTools heeft een pipet die je kunt gebruiken bij het bewerken van kleuren in het CSS-stijlenpaneel, zodat je de kleurcode niet hoeft te onthouden of ergens anders vandaan hoeft te kopiëren.

Als je een creatieve applicatie bouwt met webtechnologieën, wil je je gebruikers wellicht een vergelijkbare functie bieden. Dit is echter lastig, zo niet onmogelijk, om op het web te doen, vooral als je kleuren wilt selecteren van het hele scherm van het apparaat (bijvoorbeeld vanuit een andere applicatie) en niet alleen van het huidige browsertabblad. Er is geen ingebouwde pipetfunctie die webapplicaties voor hun eigen doeleinden kunnen gebruiken.

Het <input type="color"> element komt aardig in de buurt. In Chromium-browsers op desktopapparaten biedt het een handig pipetje in het dropdownmenu voor kleuren. Het gebruik hiervan betekent echter wel dat je app het met CSS moet aanpassen en in een stukje JavaScript moet verpakken om het beschikbaar te maken voor andere delen van je app. Deze optie betekent ook dat andere browsers geen toegang hebben tot de functie.

De EyeDropper API vult deze leemte op door een manier te bieden om kleuren van het scherm te selecteren.

Chromium kleurenkiezer.

Hoe gebruik je de EyeDropper API?

Browserondersteuning

Browser Support

  • Chrome: 95.
  • Rand: 95.
  • Firefox: niet ondersteund.
  • Safari: niet ondersteund.

Source

Functiedetectie en browserondersteuning

Controleer eerst of de API beschikbaar is voordat u deze gebruikt.

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

De EyeDropper API wordt vanaf versie 95 ondersteund door op Chromium gebaseerde browsers zoals Edge en Chrome.

De API gebruiken

Om de API te gebruiken, maak je een EyeDropper -object aan en roep je vervolgens open() methode ervan aan.

const eyeDropper = new EyeDropper();

De open() -methode retourneert een promise die wordt opgelost nadat de gebruiker een pixel op het scherm selecteert. De opgeloste waarde geeft toegang tot de kleur van de pixel in sRGBHex-formaat ( #RRGGBB ). De promise wordt afgewezen als de gebruiker de pipetmodus verlaat door op de Esc -toets te drukken.

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

De code van de app kan ook de pipetmodus uitschakelen. Dit kan handig zijn als de status van de app aanzienlijk verandert. Bijvoorbeeld als er een pop-upvenster verschijnt waarin de gebruiker input moet geven. In dat geval moet de pipetmodus worden gestopt.

Om het pipetproces te annuleren, kunt u het signaal van een AbortController- object gebruiken en dit doorgeven aan de open() methode.

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

Samengevat vind je hieronder een herbruikbare asynchrone functie:

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

Probeer het eens!

Open een van de EyeDropper-demo's met Microsoft Edge of Google Chrome 95 of later, op Windows of Mac.

Probeer bijvoorbeeld de demo van het kleurenspel . Klik op de knop 'Spelen' en probeer binnen een beperkte tijd een kleur uit de lijst onderaan te kiezen die overeenkomt met het gekleurde vierkantje bovenaan.

Demonstratie van een kleurenspel.

Privacy- en beveiligingsaspecten

Achter deze ogenschijnlijk eenvoudige web-API schuilt een potentieel schadelijk privacy- en beveiligingsrisico. Wat als een kwaadwillende website pixels van uw scherm zou kunnen zien?

Om deze zorg weg te nemen, vereist de API-specificatie de volgende maatregelen:

  • Ten eerste staat de API niet toe dat de pipetmodus wordt gestart zonder tussenkomst van de gebruiker. De open() `-methode kan alleen worden aangeroepen als reactie op een gebruikersactie (zoals een klik op een knop).
  • Ten tweede kan er, zonder intentie van de gebruiker, geen pixelinformatie worden opgehaald. De promise die door open() wordt geretourneerd, wordt pas opgelost als een kleurwaarde wordt verkregen na een actie van de gebruiker (klikken op een pixel). De pipet kan dus niet op de achtergrond worden gebruikt zonder dat de gebruiker het merkt.
  • Om gebruikers te helpen de pipetmodus gemakkelijk te herkennen, moeten browsers deze modus duidelijk weergeven. Daarom verdwijnt de normale muiscursor na een korte vertraging en verschijnt in plaats daarvan de speciale gebruikersinterface. Er is ook een vertraging tussen het moment dat de pipetmodus start en het moment dat de gebruiker een pixel kan selecteren, zodat de gebruiker de vergrootglasfunctie goed kan zien.
  • Gebruikers kunnen de pipetmodus tot slot op elk moment uitschakelen (door op de esc -toets te drukken).

Feedback

Het Chromium-team wil graag meer horen over uw ervaringen met de EyeDropper API.

Vertel ons iets over het API-ontwerp.

Werkt er iets aan de API niet zoals je had verwacht? Of ontbreken er methoden of eigenschappen die je nodig hebt om je idee te implementeren? Heb je een vraag of opmerking over het beveiligingsmodel? Dien een specificatieprobleem in op de GitHub-repository van de API, of voeg je gedachten toe aan een bestaand probleem.

Meld een probleem met de implementatie.

Heb je een bug gevonden in de implementatie van Chromium? Of wijkt de implementatie af van de specificatie? Meld een bug op new.crbug.com . Vermeld zoveel mogelijk details, eenvoudige instructies voor het reproduceren van het probleem en voer Blink>Forms>Color in bij het veld Components .

Toon je steun voor de API

Ben je van plan de EyeDropper API te gebruiken? Jouw publieke steun helpt het Chromium-team bij het prioriteren van functies en laat andere browserleveranciers zien hoe belangrijk het is om ze te ondersteunen. Stuur een tweet naar @ChromiumDev met de hashtag #EyeDropper en laat ons weten waar en hoe je het gebruikt.

Handige links

Dankbetuigingen

De EyeDropper API is ontworpen en geïmplementeerd door Ionel Popescu van het Microsoft Edge-team. Dit bericht is beoordeeld door Joe Medley .