Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
copy-image-clipboard
Advanced tools
Lightweight library to copy png and jpg images to clipboard
Weekly downloads
Readme
0 dependencies
.yarn add copy-image-clipboard
npm i copy-image-clipboard
Without a package manager you have to choose one of these:
jsDelivr
<script src="https://cdn.jsdelivr.net/npm/copy-image-clipboard/dist/index.browser.js"></script>
With a CDN Provider you will be using the dist/index.browser.js file. See more about this file below.
degit
to download this repository without the git history:npx degit LuanEdCosta/copy-image-clipboard
After downloading the repository, you can use a file from the dist folder in your code. See more about the dist folder files below.
Open the dist folder and choose one of these files to download:
See more about these files below.
CopyImageClipboard.copyImageToClipboard('...')
.: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)
})
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)
})
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)
Warnings:
false
. Check the browser compatibility here: Permissions API Browser Compatibility.import { requestClipboardWritePermission } from 'copy-image-clipboard'
requestClipboardWritePermission().then((hasPermission) => {
console.log('Has Permission:', hasPermission)
})
You can contribute with more examples if you want :smile:
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:
From Version 87: You need to set dom.events.asyncClipboard.clipboardItem
preference to true
. To change preferences in Firefox, visit about:config
.
For now you can copy only JPG and PNG images
Other image types are not supported. If you try to copy other type an error will be thrown.
This library only works in pages with HTTPS
This limitation was defined by the browsers due to security risks involved when dealing with the user's clipboard.
You can only copy an image in the user's active tab/document
If the user is navigating in another tab and the copy function is called, an error will be thrown.
Every kind of help is appreciated and this project can be better with your help.
What you can do:
This project is under the MIT LICENSE.
FAQs
Lightweight library to copy png and jpg images to clipboard
The npm package copy-image-clipboard receives a total of 5,567 weekly downloads. As such, copy-image-clipboard popularity was classified as popular.
We found that copy-image-clipboard demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.