如何以编程方式使用 Javascript 将画布作为图像复制到剪贴板

Question

我已经使用html2canvas.js截取特定 div 的屏幕截图，现在我想知道是否可以使用 js 将canvas元素作为图像复制到剪贴板，然后用户只需单击即可在剪贴板上获得他们想要的图像，他们需要做的就是粘贴它。

代码笔演示

Answer 1

它仅适用于 https 或 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
              });
          });
        });
      }