0

我有一个元素“文章”,其中包含一个“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

在此处输入图像描述

4

1 回答 1

0

我必须添加position:"relative"到与我的图像相同级别的每个元素。因此,也许可以将position:"relative"样式添加到您的所有图像中。此图像说明了 Position relative 的前后。

于 2021-11-06T16:29:09.723 回答