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.

Syntax

var ClipboardItem = new ClipboardItem(ClipboardItemData);

Parameters

ClipboardItemData

An Object with the MIME type as the key and Blob as the value.

Examples

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

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);
  }
}

Specifications

Browser compatibility

See also

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