我在用着html2canvas https://github.com/niklasvh/html2canvas库来截取 HTML 节点的屏幕截图,但它根本无法识别clip-path
财产。
(我尝试在这里复制错误时遇到跨域问题,所以我做了一个jsfiddle)
https://jsfiddle.net/1Ly9wn6k/ 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
星形并仅显示红色方块。我已经尝试过了html2图像 https://github.com/tsayen/dom-to-image图书馆并遇到了同样的问题。
还有其他解决方案可以解决这个问题吗?或者目前无法捕获clip-path
使用 JavaScript 属性?
Using dom 到图像 https://github.com/tsayen/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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)