EyeDropper API

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

EyeDropper API は、スポイトツールを作るための仕組みを提供します。このツールを使うと、ユーザーはブラウザーウィンドウ外を含む画面から色を採取できます。

概念

創造的なアプリケーションには、アプリケーション内で絵や図形から色を採取して再利用する機能があることが多いです。ウェブアプリケーションは、EyeDropper API を使うことで、ブラウザーによって提供される同様のスポイトツールを提供できます。

この API を使うと、ウェブアプリケーションはスポイトモードを開始できます。開始すると、カーソルが変わることで、ユーザーにこのモードが有効になっていることを知らせます。そして、ユーザーは画面上のどこからでも色を選択することができるし、Escape を押してスポイトモードをキャンセルすることもできます。

セキュリティとプライバシーの対策

悪意のあるウェブサイトがユーザーに気付かれずに画面からピクセルデータを取得するのを防ぐため、EyeDropper API は以下の対策を実装しています。

  • この API は、ユーザーの意図なしでスポイトモードを開始させません。EyeDropper.prototype.open() メソッドは、ユーザーの操作 (ボタンのクリックなど) への反応としてのみ呼び出すことができます。
  • ピクセルデータの取得には、またユーザーの意図が必要です。EyeDropper.prototype.open() が返すプロミスは、ユーザーの操作 (ピクセルのクリック) の結果としてのみ色の値で解決します。そのため、ユーザーに気付かれずにバックグラウンドでスポイトを使うことはできません。
  • ユーザーがスポイトモードにさらに気付きやすくするため、ブラウザーはこのモードを目立つようにします。短い間をおいて通常のマウスカーソルが非表示になり、かわりに虫眼鏡が出現します。スポイトモードの開始後、ユーザーがピクセルを選択できるようになるまでにも間があり、ユーザーが確実に虫眼鏡を見られるようにします。
  • ユーザーはまた、(Escape キーを押すことで) スポイトモードをいつでもキャンセルできます。

インターフェイス

仕様書

Specification
EyeDropper API
# eyedropper-interface

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
EyeDropper
Experimental
EyeDropper() constructor
Experimental
open
Experimental
Secure context required
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

関連情報