Clipboard.read()

Baseline 2024

Newly available

Since June 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

read() は Clipboard インターフェイスのメソッドで、クリップボードの内容のコピーを要求し、返されたプロミス (Promise) が解決されるとそのデータを取得できます。 readText() とは異なり、 read() メソッドは画像など任意のデータを取得することができます。

クリップボードから読み込みを行うためには、まず "clipboard-read" 権限を取得する必要があります。

メモ: 非同期のクリップボード API と権限 API は、ほとんどのブラウザーでは組み込み途中の状態です。そのため、権限などが公式仕様とは異なっていることがよくあります。これらのメソッドを使う前に互換性一覧表を確認してください。

構文

js
read();

引数

なし。

返値

クリップボードの内容を保持する ClipboardItem の配列に解決されるプロミス (Promise)。クリップボードへのアクセスが許可されない場合、このプロミスは拒否されます。

例

画像データの読み取り

この例では read() を使用して、画像データをクリップボードから読み取ります。

左側の蝶の画像をコンテキストメニューの「画像のコピー」でコピーし、右側の空の枠内をクリックしてみてください。

この例では、クリップボードの読み取りを確認または許可して、画像データを取得し、空のフレームに画像データを表示します。

メモ: 現時点では、Firefoxは read() を実装していますが、 "clipboard-read" 権限を認識しないため、権限 API を使ってアクセス管理をしようとしてもうまくいきません。

HTML

html
<img id="source" src="butterfly.jpg" alt="A butterfly" />
<img id="destination" />

CSS

css
img {
  height: 100px;
  width: 100px;
  margin: 0 1rem;
  border: 1px solid black;
}

JavaScript

js
const destinationImage = document.querySelector("#destination");
destinationImage.addEventListener("click", pasteImage);

async function pasteImage() {
  try {
    const permission = await navigator.permissions.query({
      name: "clipboard-read",
    });
    if (permission.state === "denied") {
      throw new Error("Not allowed to read clipboard.");
    }
    const clipboardContents = await navigator.clipboard.read();
    for (const item of clipboardContents) {
      if (!item.types.includes("image/png")) {
        throw new Error("Clipboard contains non-image data.");
      }
      const blob = await item.getType("image/png");
      destinationImage.src = URL.createObjectURL(blob);
    }
  } catch (error) {
    console.error(error.message);
  }
}

結果

仕様書

Specification
Clipboard API and events
# dom-clipboard-read

ブラウザーの互換性

BCD tables only load in the browser

関連情報