У меня есть элемент «article», который содержит «div», который в то же время имеет 4 «img» в другом «z-index» от 1 до 4, наложенный на эффект клипа, поэтому я пытаюсь захватить это родительский элемент "article" с html2canvas. Он захватывает последний img из z-index 4 последнего слоя, но не другой img, это проблема стиля CSS, не реализованная функция html2canvas или что?
Как мне решить эту проблему?
Это для проекта Django.
style.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;
}
script.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);
}
});
}
index.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
