Clipboard.read()

The read() method of the Clipboard interface requests a copy of the clipboard's contents, delivering the data to the returned Promise when the promise is resolved. Unlike readText(), the read() method can return arbitrary data, such as images. This method can also return text.

To read from the clipboard, you must first have the "clipboard-read" permission.

None.

A Promise that resolves with a sequence of ClipboardItem objects containing the clipboard's contents. The promise is rejected if permission to access the clipboard is not granted.

After using navigator.permissions.query() to find out if we have (or if the user will be prompted to allow) "clipboard-read" access, this example fetches the data currently on the clipboard. If it's not a png image, an error message is presented. Otherwise, an image element referred to using the variable imgElem has its source replaced with the clipboard's contents.

// First, ask the Permissions API if we have some kind of access to
// the "clipboard-read" feature.

navigator.permissions.query({ name: "clipboard-read" }).then((result) => {
    // If permission to read the clipboard is granted or if the user will
    // be prompted to allow it, we proceed.
  
    if (result.state == "granted" || result.state == "prompt") {
      navigator.clipboard.read().then((data) => {
        for (let i = 0; i < data.length; i++) {
          if (!data[i].types.includes("image/png")) {
            alert("Clipboard contains non-image data. Unable to access it.");
          } else {
            data[i].getType("image/png").then((blob) => {
              imgElem.src = URL.createObjectURL(blob);
            });
          }
        }
      });
    }
  });

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