Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The supports() static method of the ClipboardItem interface returns true if the given MIME type is supported by the clipboard, and false otherwise.
Note that the Clipboard API mandates support for plain text, HTML and PNG files. The supports() method will always return true for these MIME types, so testing them is unnecessary.
supports(type)typeA string indicating the MIME type to test.
These MIME types are always supported:
text/plaintext/htmlimage/pngThese MIME types may be supported:
image/svg+xml"web ". The custom type (without the "web " prefix), must have the correct formatting for a MIME type.true if the given MIME type is supported by the clipboard, false otherwise.
The following example fetches an SVG image, represents it as a Blob, and then writes it to the clipboard.
We use supports() to check whether the "image/svg+xml" MIME type is supported by the clipboard before fetching the image and writing it using clipboard.write(). We also wrap the whole function body in a try...catch statement to catch any other errors, such as ClipboardItem itself not being supported.
async function writeClipImg() {
try {
if (ClipboardItem.supports("image/svg+xml")) {
const imgURL = "/my-image.svg";
const data = await fetch(imgURL);
const blob = await data.blob();
await navigator.clipboard.write([
new ClipboardItem({
[blob.type]: blob,
}),
]);
console.log("Fetched image copied to clipboard.");
} else {
console.log("SVG image not supported by clipboard");
}
} catch (err) {
console.error(err.name, err.message);
}
}