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.
* Some parts of this feature may have varying levels of support.
read() は Clipboard インターフェイスのメソッドで、クリップボードの内容のコピーを要求し、返されたプロミス (Promise) が解決されるとそのデータを取得できます。 readText() とは異なり、 read() メソッドは画像など任意のデータを取得することができます。
クリップボードから読み込みを行うためには、まず "clipboard-read" 権限を取得する必要があります。
構文
read();
引数
なし。
返値
クリップボードの内容を保持する ClipboardItem の配列に解決されるプロミス (Promise)。クリップボードへのアクセスが許可されない場合、このプロミスは拒否されます。
例
画像データの読み取り
この例では read() を使用して、画像データをクリップボードから読み取ります。
左側の蝶の画像をコンテキストメニューの「画像のコピー」でコピーし、右側の空の枠内をクリックしてみてください。
この例では、クリップボードの読み取りを確認または許可して、画像データを取得し、空のフレームに画像データを表示します。
メモ:
現時点では、Firefoxは read() を実装していますが、 "clipboard-read" 権限を認識しないため、権限 API を使ってアクセス管理をしようとしてもうまくいきません。
HTML
<img id="source" src="butterfly.jpg" alt="A butterfly" />
<img id="destination" />
CSS
img {
height: 100px;
width: 100px;
margin: 0 1rem;
border: 1px solid black;
}
JavaScript
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 |