CODEWITHSUNDEEP
javascripthtml2canvas
Alessia
Alessia

Reputation: 959

How To Copy Canvas As Image To Clipboard Using Javascript Programmatically

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

Upvotes: 5

Views: 5237

Answers (1)

Andrey Dudal
Andrey Dudal

Reputation: 61

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

Upvotes: 6

Related Questions