DEV Community

Cover image for 🎉 How to Copy an Image or a Text to Clipboard in Javascript (2022) ☘️
Victor de la Fouchardière
Victor de la Fouchardière

Posted on • Edited on

🎉 How to Copy an Image or a Text to Clipboard in Javascript (2022) ☘️

Hey guys 😃

A very popular feature on websites is the ability to copy an element to your clipboard. It's easy to find libraries to copy text, BUT what about images?


Meme Studio


It is very common to want to use libraries such as Clipboard.js. But, there’s a new JavaScript API for asynchronous clipboard access with a spec that's is not complete, but quite advanced.

The Asynchronous Clipboard API

Note: The asynchronous Clipboard API methods are a recent addition to the specification, and may not be fully implemented to the specification in all browsers. Be sure to review the compatibility tables for each method before using them, to ensure that support is broad enough for your needs.

1. Clipboard Permissions

Because of the potential for abuse, two permissions are defined that allow user agents to give use control over how the Async APIs are used.

To avoid the risk of abuse and as a security measure, 2 permissions are required to use the Clipboard API correctly.

  • The clipboard-write permission controls access to the write method.

  • The clipboard-read permission controls access to the read method.

In this article, we will only focus on the copy feature to be able to copy a text or an image to the clipboard.

Clipboard Permissions

As with many new APIs, navigator.clipboard is only supported for pages served over HTTPS. To help prevent abuse, clipboard access is only allowed when a page is the active tab.

NOTE: Pages in active tabs can write to the clipboard without requesting permission.

If you want to access to the data from the clipboard, see here.

Below is a function that shows whether the user can copy text or an image:

Clipboard ask Permissions

2. Copy to clipboard

To copy an item to the clipboard such as image or text, nothing could be simpler. The Clipboard API provides the write() and writeText() (only works for text) methods .

Warning: Not all browsers support the methods suggested below. So be careful if you want to use them in production. See here for current compatibility)

2.1 Copy a text (compatibility 94.59%)

To copy text to the clipboard, call navigator.clipboard.writeText(). A Promise is resolved once the clipboard's contents have been updated. The promise is rejected if the caller does not have permission to write to the clipboard.

Copy Text Clipboard

2.2 Copy an image (compatibility 91.57%)

To copy an image to the clipboard, call navigator.clipboard.write() (that is the same as the writeText method but it's more generic and also works for copying text).

Pass an array of ClipboardItem objects as a parameter to the write() method.

CAUTION: At the time of writing, only PNG files are supported and you can only pass one image to the clipboard.

Copy Image Clipboard

2.3 One function to rule them all (compatibility 91.57%)

Copy Text/Image Clipboard

That's it, if you want to support certain browsers, you will have to be patient before using this new API (almost finished !)

You can also learn more about the Asynchronous Clipboard API at this article by Jason Miller (@_developit).

Examples:

Example 1: https://copy-to-clipboard.now.sh
Example 2: https://www.meme-studio.io

Source code :

https://gist.github.com/viclafouch/36d3edf58633a25c8b973588cc13480e

Cheers!

Top comments (4)

Collapse
 
mcpat1993 profile image
Patrick McLaren

On the navigator.clipboard.write line I'm getting the following:
Type 'Blob' is missing the following properties from type 'Promise': then, catch, finally, [Symbol.toStringTag] from ts(2739)

Do you have any pointers?

Collapse
 
gnowland profile image
Gifford Nowland

I'm having the same issue, did you find a solution?

Collapse
 
avillapalos profile image
Villapalos

Clipboard API write() is not compatible with Firefox, the only way to be able to copy an image is using the deprecated execCommand() function:

    const img = document.createElement('img')
    img.src = '<YOUR_IMAGE_SRC>'

    const div = document.createElement('div')
    div.contentEditable = 'true'
    div.appendChild(img)
    document.body.appendChild(div)
    this.selectElement(div)
    document.execCommand('copy')
    document.body.removeChild(div)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
prashoon123 profile image
Prashoon Bhattacharjee

Found this blog super helpful!! :)