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

Met de EyeDropper API kunnen auteurs een door de browser geleverde pipet gebruiken bij het maken van aangepaste kleurkiezers.

Patrick Broset
Patrick Brosset
X GitHub
Thomas Steiner

Wat is de EyeDropper-API?

Bij veel creatieve toepassingen kunnen gebruikers kleuren kiezen uit delen van het app-venster of zelfs uit het hele scherm, meestal met behulp van een pipet-metafoor.

Met Photoshop kunnen gebruikers bijvoorbeeld kleuren van het canvas proeven, zodat ze een kleur niet hoeven te raden en het risico lopen dat deze verkeerd is. PowerPoint heeft ook een pipet, handig bij het instellen van de omtrek- of vulkleur van een vorm. Zelfs Chromium DevTools heeft een pipet die u kunt gebruiken bij het bewerken van kleuren in het deelvenster CSS-stijlen, zodat u de kleurcode niet ergens anders hoeft te onthouden of te kopiëren.

Als u een creatieve toepassing bouwt met webtechnologieën, wilt u uw gebruikers wellicht een soortgelijke functie bieden. Het is echter moeilijk om dit op internet te doen, als het al mogelijk is, vooral als u kleuren wilt samplen van het volledige scherm van het apparaat (bijvoorbeeld van een andere applicatie) en niet alleen van het huidige browsertabblad. Er is geen door de browser geleverd pipethulpmiddel dat webapps voor hun eigen behoeften kunnen gebruiken.

Het <input type="color"> element komt in de buurt. In Chromium-gebaseerde browsers op desktopapparaten biedt het een handige pipet in de vervolgkeuzelijst voor de kleurkiezer. Als u dit gebruikt, betekent dit echter dat uw app deze moet aanpassen met CSS en deze in een beetje JavaScript moet verpakken om deze beschikbaar te maken voor andere delen van uw app. Als u voor deze optie kiest, betekent dit 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 proeven.

Chroomkleurkiezer.

Hoe de EyeDropper-API te gebruiken

Browser-ondersteuning

Browserondersteuning

  • 95
  • 95
  • X
  • X

Bron

Functiedetectie en browserondersteuning

Zorg er eerst voor dat de API beschikbaar is voordat u deze gebruikt.

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

De EyeDropper API wordt vanaf versie 95 ondersteund in Chromium-gebaseerde browsers zoals Edge of Chrome.

Met behulp van de API

Om de API te gebruiken, maakt u een EyeDropper object en roept u vervolgens de methode open() aan.

const eyeDropper = new EyeDropper();

De methode open() retourneert een belofte die wordt opgelost nadat de gebruiker een pixel op het scherm heeft geselecteerd, en de opgeloste waarde biedt toegang tot de kleur van de pixel in sRGBHex-indeling ( #RRGGBB ). De belofte 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 annuleren. Dit kan van pas komen als de status van de app substantieel verandert. Misschien verschijnt er een pop-upvenster dat de invoer van de gebruiker vereist. De pipetmodus moet op dat moment worden gestopt.

Om het pipet 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();

Als je alles bij elkaar optelt, vind je hieronder een herbruikbare async-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!

Gebruik Microsoft Edge of Google Chrome 95 of hoger, op Windows of Mac, en open een van de EyeDropper-demo's .

Probeer bijvoorbeeld de demo van het kleurenspel . Druk op de knop Afspelen en probeer binnen een beperkte tijd een kleur uit de lijst onderaan te proeven die overeenkomt met het gekleurde vierkant bovenaan.

Demo van het kleurenspel.

Privacy- en veiligheidsoverwegingen

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

Om dit probleem aan te pakken, vereist de API-specificatie de volgende maatregelen:

  • Ten eerste laat de API de pipetmodus niet daadwerkelijk starten zonder de bedoeling van de gebruiker. De methode open() kan alleen worden aangeroepen als reactie op een gebruikersactie (zoals een klik op een knop).
  • Ten tweede kan er geen pixelinformatie meer worden opgehaald zonder de bedoeling van de gebruiker. De belofte die door open() wordt geretourneerd, wordt alleen omgezet in een kleurwaarde als reactie op een gebruikersactie (klikken op een pixel). De pipet kan dus niet op de achtergrond worden gebruikt zonder dat de gebruiker het merkt.
  • Om ervoor te zorgen dat gebruikers de pipetmodus gemakkelijk kunnen opmerken, moeten browsers de modus duidelijk maken. Dit is de reden waarom de normale muiscursor na een korte vertraging verdwijnt en in plaats daarvan de speciale gebruikersinterface verschijnt. Er is ook een vertraging tussen het moment waarop de pipetmodus start en het moment waarop de gebruiker een pixel kan selecteren om er zeker van te zijn dat de gebruiker tijd heeft gehad om het vergrootglas te zien.
  • Ten slotte kunnen gebruikers de pipetmodus op elk gewenst moment annuleren (door op de esc -toets te drukken).

Feedback

Het Chromium-team wil graag horen wat uw ervaringen zijn met de EyeDropper API.

Vertel ons over het API-ontwerp

Is er iets aan de API dat niet werkt zoals je had verwacht? Of ontbreken er methoden of eigenschappen die je nodig hebt om je idee te implementeren? Heeft u een vraag of opmerking over het beveiligingsmodel? Dien een spec-probleem in op de GitHub-repository van de API, of voeg uw mening toe aan een bestaand probleem.

Meld een probleem met de implementatie

Heb je een bug gevonden in de implementatie van Chromium? Of wijkt de uitvoering af van de specificaties? Dien een bug in op new.crbug.com . Zorg ervoor dat u zoveel mogelijk details en eenvoudige instructies voor het reproduceren opneemt, en voer Blink>Forms>Color in het vak Componenten in. Glitch werkt uitstekend voor het delen van snelle en gemakkelijke reproducties.

Toon ondersteuning voor de API

Bent u 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 deze te ondersteunen. Stuur een tweet naar @ChromiumDev met de hashtag #EyeDropper en laat ons weten waar en hoe je deze gebruikt.

Handige Links

Dankbetuigingen

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