demo · v132

Fetch-then-copy: the motivating use case

A right-click “copy image” experience: the user clicks, the page fetches the image bytes from a URL, and the browser holds a clipboard slot open while the fetch resolves. Pre-132 a string fetch needed an await before navigator.clipboard.write(); v132 lets you hand the unresolved promise straight to the constructor.

checking ClipboardItem promise support…
1. build ClipboardItem
2. clipboard.write([item])
3. browser fetches in parallel
4. promise resolves; clipboard updated

source preview

readback from clipboard

async function copyImage(url) {
  const item = new ClipboardItem({
    "image/png": fetch(url).then((r) => r.blob()),   // Promise<Blob>
  });
  await navigator.clipboard.write([item]);             // returns immediately; resolves when fetch done
}

see also