如何在多个 z-index 图层中正确渲染带有 html2canvas 的图像？答案

【问题标题】：How to render an image with html2canvas in several z-index layers correctly?如何在多个 z-index 图层中正确渲染带有 html2canvas 的图像？
【发布时间】：2019-09-18 13:21:14
【问题描述】：

我有一个元素“article”，其中包含一个“div”，它同时在从 1 到 4 的不同“z-index”中有 4 个“img”，覆盖在剪辑效果中，所以我试图捕捉这个带有 html2canvas 的父元素“文章”。它从最后一层z-index 4捕获最后一个img，但没有捕获其他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

【问题讨论】：

标签： javascript image z-index html2canvas

【解决方案1】：

我必须将position:"relative" 添加到与我的图像处于同一级别的每个元素中。因此，也许将position:"relative" 样式添加到您的所有图像中。

【讨论】：