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

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

Patrick Brosset
Patrick Brosset
Homepage
Thomas Steiner

Wat is de EyeDropper API?

Veel creatieve toepassingen bieden gebruikers de mogelijkheid om kleuren te kiezen uit delen van het app-venster of zelfs uit het hele scherm. Meestal wordt hiervoor de metafoor van een pipet gebruikt.

Photoshop laat gebruikers bijvoorbeeld kleuren van het canvas samplen, zodat ze niet hoeven te gokken en het risico lopen een fout te maken. PowerPoint heeft ook een pipet, handig bij 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 misschien een vergelijkbare functie bieden. Dit is echter lastig, als het überhaupt mogelijk is, op het web, vooral als je kleuren van het hele scherm van het apparaat wilt bemonsteren (bijvoorbeeld van een andere applicatie) en niet alleen van het huidige browsertabblad. Er is geen door de browser meegeleverde pipet die webapps voor hun eigen doeleinden kunnen gebruiken.

Het <input type="color"> element komt in de buurt. In Chromium-gebaseerde browsers op desktops biedt het een handige pipet in de keuzelijst van de kleurenkiezer. Dit betekent echter dat je app het moet aanpassen met CSS en in een stukje JavaScript moet wikkelen om het beschikbaar te maken voor andere delen van je app. Deze optie betekent ook dat andere browsers geen toegang hebben tot deze functie.

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

Chromium-kleurenkiezer.

Hoe de EyeDropper API te gebruiken

Browserondersteuning

Browser Support

  • Chroom: 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 ondersteund op Chromium-gebaseerde browsers zoals Edge of Chrome vanaf versie 95.

De API gebruiken

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

const eyeDropper = new EyeDropper();

De open() methode retourneert een belofte die wordt opgelost nadat de gebruiker een pixel op het scherm selecteert. De opgeloste waarde biedt toegang tot de kleur van de pixel in sRGBHex-formaat ( #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 de pipetmodus ook uitschakelen. Dit kan handig zijn als de status van de app aanzienlijk verandert. Mogelijk verschijnt er een pop-upvenster dat de invoer van de gebruiker vereist. De pipetmodus moet dan worden uitgeschakeld.

Om de 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 we alles bij elkaar optellen, vindt u 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 eens!

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

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

Demo van het kleurenspel.

Overwegingen met betrekking tot privacy en beveiliging

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

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

  • Ten eerste staat de API de pipetmodus niet toe zonder de intentie 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 geen pixelinformatie meer worden opgehaald zonder de intentie 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 gebruikers te helpen de pipetmodus gemakkelijk te herkennen, moeten browsers deze modus duidelijk maken. Daarom verdwijnt de normale muiscursor na een korte vertraging en verschijnt in plaats daarvan de speciale gebruikersinterface. Er zit ook een vertraging tussen het moment waarop de pipetmodus start en het moment waarop de gebruiker een pixel kan selecteren, zodat de gebruiker voldoende 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 uw ervaringen met de EyeDropper API horen.

Vertel ons over het API-ontwerp

Werkt 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? Heb je een vraag of opmerking over het beveiligingsmodel? Dien een spec-issue in op de GitHub-repository van de API of voeg je mening toe aan een bestaand issue.

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 . Zorg ervoor dat je zoveel mogelijk details geeft, eenvoudige instructies voor het reproduceren en Blink>Forms>Color in het vak Componenten invoert.

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

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