如何使用剪辑路径 CSS 属性 截取 HTML 节点的屏幕截图？ （html2canvas 不适用于此）

Question

我正在使用 html2canvas 库截取 HTML 节点的屏幕截图，但它根本无法识别 clip-path 属性.

（我在尝试复制这里的错误时遇到了跨源问题，所以我制作了一个 jsfiddle）

https://jsfiddle.net/1Ly9wn6k/

<div id="root">
  <div class="star-mask">
    <div class="square"></div>
  </div>
</div>

<button onclick="capture()">Capture</button>

.star-mask {
  clip-path: path('m55,237 74-228 74,228L9,96h240');  
}

.square {
  background-color: red;
  width: 200px;
  height: 150px
}

function capture() {
  let node = document.querySelector('.star-mask')


  html2canvas(node)
    .then(canvas => {
      document.querySelector('#root').appendChild(canvas)
    })
}

每次我点击“捕获”时，canvas 屏幕截图完全忽略星形的 clip-path，只显示红色方块。我已经尝试了 html2image 库并遇到了同样的问题。

还有其他解决方案可以解决这个问题吗？或者目前无法使用 JavaScript?

捕获 clip-path 属性

Answer 1

使用 dom-to-image 适合我

function capture() {
    let node = document.querySelector('.star-mask')

domtoimage.toPng(node)
    .then(dataUrl => {
      var img = new Image();
      img.src = dataUrl;
      document.body.appendChild(img);
    })
}

.star-mask {
  clip-path: path('m55,237 74-228 74,228L9,96h240');  
}

.square {
  background-color: red;
  width: 200px;
  height: 150px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.js"></script>
<div id="root">
  <div class="star-mask">
    <div class="square"></div>
  </div>
</div>

<button onclick="capture()">Capture</button>

Answer 2

检查html-to-image

var node = document.getElementById('my-node');

htmlToImage.toPng(node)
  .then(function (dataUrl) {
    var img = new Image();
    img.src = dataUrl;
    document.body.appendChild(img);
  })
  .catch(function (error) {
    console.error('oops, something went wrong!', error);
  });

（来自 https://www.npmjs.com/package/html-to-image）。