I used to saw my colleague add a 30kb lib only to implement a copy function that when user clicks on a text, copy it to the clipboard.
And I also saw someone still trying to use flash or Clipboard lib to do same thing.
Here is how to copy text to your clipboard with JavaScript
with just several lines of code. And it’s cross browser and device. No need to any 3rd party lib.
function copyToClipboard(text){
const ta = document.createElement('textarea');
ta.value = this.url;
document.body.appendChild(ta);
//hide it
ta.style.padding = 0;
ta.style.border = 'none';
ta.style.outline = 'none';
ta.style.boxShadow = 'none';
//select the text
ta.focus();
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
}
it’s very simple, you just append an invisible textarea to the page, set value as the text you want to copy,
and run document.execCommand('copy')
. Then remove the textarea from the page.
here is how to copy image to your clipboard with JavaScript
Note that this one only works on Chrome and Edge right now (2020-10) https://caniuse.com/mdn-api_clipboarditem
This requires you to use canvas
to port image to blob first.
function imageToBlob(imageURL) {
const img = new Image;
const c = document.createElement("canvas");
const ctx = c.getContext("2d");
img.crossOrigin = "";
img.src = imageURL;
return new Promise(resolve => {
img.onload = function () {
c.width = this.naturalWidth;
c.height = this.naturalHeight;
ctx.drawImage(this, 0, 0);
c.toBlob((blob) => {
// here the image is a blob
resolve(blob)
}, "image/png", 0.75);
};
})
}
Then use the Clipboard
API to do the magic
async function copyImage(imageURL){
const blob = await imageToBlob(imageURL)
const item = new ClipboardItem({ "image/png": blob });
navigator.clipboard.write([item]);
}
Simple as that.