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.
Note: Image format support varies by browser. See the browser compatibility table for the Clipboard
interface.
new ClipboardItem(data)
new ClipboardItem(data, options)
data
-
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.
-
options
Optional
-
An object with the following properties:
-
presentationStyle
Optional
-
One of the three strings: 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.
Note: You can only pass in one clipboard item at a time.
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);
}
}