I already use html2canvas.js to take a screenshot of a specific div, now I wonder if I could use js to copy the canvas element as an image to clipboard, then user can just click to have an image of what they want on their clipboard, all they need to do is just paste it.

Codepen Demo

I already use html2canvas.js to take a screenshot of a specific div, now I wonder if I could use js to copy the canvas element as an image to clipboard, then user can just click to have an image of what they want on their clipboard, all they need to do is just paste it.

Codepen Demo

• javascript
• html2canvas

1 Answer 1

It work only on https or localhost:

    function getScreenShot(Src){
        let src = document.getElementById(Src);
        html2canvas(src).then(function(canvas) {
          document.getElementById("explain-scr").appendChild(canvas);
          canvas.toBlob(function(blob) {
            navigator.clipboard
              .write([
                new ClipboardItem(
                  Object.defineProperty({}, blob.type, {
                    value: blob,
                    enumerable: true
                  })
                )
              ])
              .then(function() {
                  // do something
              });
          });
        });
      }