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

関連情報