我有一个元素“文章”,其中包含一个“div”,它同时在从 1 到 4 的不同“z-index”中有 4 个“img”,覆盖在剪辑效果中,所以我试图捕获这个父元素“文章”与 html2canvas。它从最后一层z-index 4捕获最后一个img,但没有捕获其他img,这是css样式的问题,html2canvas的未实现功能还是什么?
我该如何解决这个问题?
这是一个 django 项目。
样式.css
article{
position:absolute;
left:200px;
top:0px;
width:841px;
height:752px;
background:#999;
float: right;
}
/* Estilos para visor en cuadrantes */
#img1 {
width:841px;
height:752px;
position:absolute;
top:0;
left:0;
z-index: 1;
}
#img2 {
width:841px;
height:752px;
position:absolute;
top:0;
left:0;
display:none;
z-index: 2;
}
#img3 {
width:841px;
height:752px;
position:absolute;
top:0;
left:0;
display:none;
z-index: 3;
}
#img4 {
width:841px;
height:752px;
position:absolute;
top:0;
left:0;
display: none;
z-index: 4;
}
脚本.js
document.getElementById("save").addEventListener("click", function(){
getScreen();
})
function getScreen(){
var texto="Captura";
html2canvas([document.getElementById("articulo").innerHTML],{
allowTaint: true,
logging: true,
dpi: 192,
onrendered: function(canvas){
$("#blank").attr('href', canvas.toDataURL("image/png"));
$("#blank").attr('download', texto + '.png');
$("#blank")[0].click();
//document.body.appendChild(canvas);
}
});
}
索引.html
<html>
<head>
</head>
<body>
<button id="save">(g)uardar captura</button>
<div id="caption">
<span id="caption-text"></span>
</div>
<a href="" id="blank"></a>
</aside>
<article id="articulo">
<div id="contenedor">
<img src="" id="img1">
<img src="" id="img2">
<img src="" id="img3">
<img src="" id="img4">
</div>
</article>
</body>
</html>
预期:“Capture.png”包含 4 个带有剪辑效果的图像

实际:只有img 4

