Eye Dropper API を使ってみる

1. このページの目的

Eye Dropper API を使ってみる。

2. デモ

Eyedropper Sample をそのまま実装しました。

Selected color:

3. ソースコード

Eyedropper Sample そのままです。

HTML

<p id="notSupported" class="hidden">
  <b>Sorry!</b> This browser doesn't support <code></code>,
  which required for this demo.
</p>

<button id='openEyeDropper' disabled>
  Open Eye Dropper
</button>

<p>
  <b>Selected color:</b> <code id="color"></code>
</p>

JavaScript

function isSupported(apiStr, apiParent) {
  if (apiStr in apiParent) {
    return true;
  }
  const divNotSupported = document.getElementById('notSupported');
  divNotSupported.classList.toggle('hidden', false);
  divNotSupported.querySelector('code').textContent = apiStr;
  return false;
}

async function openEyeDropper() {
  const eyeDropper = new EyeDropper();
  const result = await eyeDropper.open();
  const sResult = JSON.stringify(result);
  const container = document.getElementById('color');
  container.innerText = sResult;
}

if (isSupported('EyeDropper', window)) {
  const butt = document.getElementById('openEyeDropper');
  butt.removeAttribute('disabled');
  butt.addEventListener('click', (e) => {
    openEyeDropper();
  });
}

4. 参考