ClipboardItem()

The ClipboardItem() constructor of the Clipboard API creates a new ClipboardItem object which represents data to be stored or retrieved via the Clipboard API, that is clipboard.write() and clipboard.read() respectively.

ClipboardItemData

An Object with the MIME type as the key and data as the value. The data can be represented as a Blob, a String or a Promise which resolves to either a blob or string.

ClipboardItemOptions Optional

An Object with the following properties:

• presentationStyle: One of "unspecified", "inline" or "attachment". The default is "unspecified".

The below example requests a png image using the Fetch API, and in turn, the responses' blob() method, to create a new ClipboardItem. This item is then written to the clipboard, using the Clipboard.write() method.

async function writeClipImg() {
  try {
    const imgURL = '/myimage.png';
    const data = await fetch(imgURL);
    const blob = await data.blob();

    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob
      })
    ]);
    console.log('Fetched image copied.');
  } catch(err) {
    console.error(err.name, err.message);
  }
}

• Clipboard API
• Async Clipboard API demo on Glitch
• Image support for Async Clipboard article