Copy Image To Clipboard Using JavaScript

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