Copy Image Clipboard library allows you to easily copy JPG and PNG (only) images to the clipboard. It can be used with React, Vue, Angular, and other web frameworks. The new browser uses the Clipboard API and has no external dependencies.

how to copy image to clipboard in jquery, copy image to clipboard android, html2canvas copy to clipboard, javascript paste image from clipboard

Most Popular File Extensions and File Types Icons | CSS-file-icons

How to make use of it:

1. Install and 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 of 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 big binary 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 if the browser has permission Clipboard.write().

import { requestClipboardWritePermission } from 'copy-image-clipboard'
requestClipboardWritePermission().then((hasPermission) => {
  console.log('Has Permission:', hasPermission)
})

Copy Image To Clipboard Using JavaScript, Copy Image Clipboard Plugin/Github, copy base64 image to clipboard javascript

See Demo And Download

Official Website(LuanEdCosta): Click Here

This superior jQuery/javascript plugin is developed by LuanEdCosta. For extra Advanced usage, please go to the official website.