Author: | LuanEdCosta |
---|---|
Views Total: | 1,164 views |
Official Page: | Go to website |
Last Update: | February 21, 2022 |
License: | MIT |
Preview:

Description:
A JavaScript library that allows the users to copy images (PNG and JPG) within your document to their clipboard using the Clipboard.write()
API.
How to use it:
1. Install & download the copy-image-clipboard
package.
# Yarn $ yarn add copy-image-clipboard # NPM $ npm i copy-image-clipboard --save
2. Import the copyImageToClipboard component.
// ES Module import { copyImageToClipboard } from 'copy-image-clipboard' // Browser <script src="index.browser.js"></script>
3. Call the copyImageToClipboard
method and specify the path to the image to be copied.
// ES Module copyImageToClipboard('image.png') .then(() => { console.log('Image Copied') }) .catch((e) => { console.log('Error: ', e.message) }) // Browser CopyImageClipboard.copyImageToClipboard('image.png') .then(() => { console.log('Image Copied') }) .catch((e) => { console.log('Error: ', e.message) })
4. Get the blob data from the image element.
import { getBlobFromImageElement, copyBlobToClipboard, } from 'copy-image-clipboard' const imageElement = document.getElementById('image') getBlobFromImageElement(imageElement) .then((blob) => { return copyBlobToClipboard(blob) }) .then(() => { console.log('Blob Copied') }) .catch((e) => { console.log('Error: ', e.message) })
5. Check if an image can be copied to the clipboard.
import { canCopyImagesToClipboard } from 'copy-image-clipboard' const canCopy = canCopyImagesToClipboard() console.log('Can Copy Images To Clipboard:', canCopy)
6. Check whether the browser has the Clipboard.write()
permission.
import { requestClipboardWritePermission } from 'copy-image-clipboard' requestClipboardWritePermission().then((hasPermission) => { console.log('Has Permission:', hasPermission) })
Changelog:
v2.1.2 (02/21/2022)
- Update