I used to saw my colleague add a 30kb lib only to implement a copy function that when the 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 the 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 for 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 the 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 the 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.