LuanEdCosta / copy-image-clipboard

Lightweight library to copy PNG and JPG images to clipboard
https://luanedcosta.github.io/copy-image-clipboard/
MIT License
59 stars 12 forks source link
clipboard copy-image copy-to-clipboard image javascript

Copy Image Clipboard Logo

Copy Image Clipboard

NPM Version NPM Downloads Per Week License GitHub Last Commit Repository Issues Dependencies

👉 TEST IN YOUR BROWSER 👈

:arrow_down: Installation

Using a package manager

yarn add copy-image-clipboard
npm i copy-image-clipboard

Without a package manager

Without a package manager you have to choose one of these:

Use from a CDN Provider
**jsDelivr** ```javascript ``` With a CDN Provider you will be using the [dist/index.browser.js](https://github.com/LuanEdCosta/copy-image-clipboard/tree/master/dist/index.browser.js) file. _See more about this file below_. ---
Download the entire repository
- Use `degit` to download this repository without the git history: ``` npx degit LuanEdCosta/copy-image-clipboard ``` - Download a zipped file on GitHub: Download the entire repository After downloading the repository, you can use a file from the [dist folder](https://github.com/LuanEdCosta/copy-image-clipboard/tree/master/dist) in your code. _See more about the dist folder files below_. ---
Download a file from the dist folder
Open the [dist folder](https://github.com/LuanEdCosta/copy-image-clipboard/tree/master/dist) and choose one of these files to download: - [dist/index.browser.js](https://github.com/LuanEdCosta/copy-image-clipboard/tree/master/dist/index.browser.js) - [dist/index.common.js](https://github.com/LuanEdCosta/copy-image-clipboard/tree/master/dist/index.common.js) - [dist/index.js](https://github.com/LuanEdCosta/copy-image-clipboard/tree/master/dist/index.js) _See more about these files below._ ---

About the dist folder

:zap: Usage

Copy using the image source

:point_right: <img src="...">

This approach downloads the image using window.fetch, transform to PNG if is JPEG and then copy to clipboard using the image original dimensions.

// Import the copy function
import { copyImageToClipboard } from 'copy-image-clipboard'

// Pass the image src attribute here
copyImageToClipboard('assets/image.png')
  .then(() => {
    console.log('Image Copied')
  })
  .catch((e) => {
    console.log('Error: ', e.message)
  })

// Can be an URL too, but be careful because this may cause CORS errors
copyImageToClipboard(
  'https://images-na.ssl-images-amazon.com/images/I/81BES%2BtsVvL.png',
)
  .then(() => {
    console.log('Image Copied')
  })
  .catch((e) => {
    console.log('Error: ', e.message)
  })

Copy the rendered image into the document

With this approach no HTTP request is necessary, but the image is copied with the image element dimensions in the document. If the image is 1000x1000 but is shown as 300x300, the copied image will be 300x300. Use copyImageToClipboard function to copy the image with its original dimensions.

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)
  })

Check if can copy images to clipboard

Use this function to synchronously check at runtime whether you can copy images to the clipboard. It checks if it can use the Fetch API and the Clipboard API.

import { canCopyImagesToClipboard } from 'copy-image-clipboard'

const canCopy = canCopyImagesToClipboard()

console.log('Can Copy Images To Clipboard:', canCopy)

Check if the permission to write data on clipboard was granted

Warnings:

import { requestClipboardWritePermission } from 'copy-image-clipboard'

requestClipboardWritePermission().then((hasPermission) => {
  console.log('Has Permission:', hasPermission)
})

:star: Demos

You can contribute with more examples if you want :smile:

:globe_with_meridians: Compatibility

This project uses the asynchronous Clipboard API and Fetch API. Most browsers already support natively these two APIs, but for the old ones like Internet Explorer this library doesn't work and there's nothing you can do about it.

Use the links below to see the browser compatibility:

Enable Clipboard API Features in Firefox

From Version 87: You need to set dom.events.asyncClipboard.clipboardItem preference to true. To change preferences in Firefox, visit about:config.

:stop_sign: Known Limitations

:handshake: Contribution

Every kind of help is appreciated and this project can be better with your help.

What you can do:

:blue_book: License

This project is under the MIT LICENSE.