小编Joã*_*ski的帖子

我正在使用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)
    })
}

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

还有其他解决方案可以解决这个问题吗？或者目前无法clip-path使用 JavaScript 捕获属性？

我想知道如何在旋转后获得元素的原始尺寸，当我使用transform: rotate()并尝试在旋转后获得尺寸时，使用element.getBoundingClientRect()它返回不同的宽度和高度，是否有可能在旋转后获得真实尺寸元素？

let div1 = document.getElementById('one')
let div2 = document.getElementById('two')

// Here the width and height is 50 and 80
console.log(div1.getBoundingClientRect())

// Here because i used transform rotate the width is 86 and height 94
console.log(div2.getBoundingClientRect())

div#one {
  width: 50px;
  height: 80px;
  background-color: red;
}

div#two {
  width: 50px;
  height: 80px;
  background-color: red;
  transform: rotate(35deg);
}

<div id="one"></div>
<br/>
<div id="two"></div>