How To Copy Canvas As Image To Clipboard Using Javascript Programmatically

html2canvas, javascript

Solution

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

Problem

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

Original source