Javascript Html2canvas映射容器与其他元素重叠

使用html2canvas，我下载整个document.body作为图像。主要问题是传单地图。当下载的地图容器比浏览器上显示的更大时，它会与其他元素重叠

页面外观：

以及下载后的外观：

代码是简单的html2canvas实现：

html2canvas(document.body, {
            allowTaint: false,
            useCORS: true,
        }).then(function(canvas) {                

            Canvas2Image.saveAsJPEG(canvas);
        });

---

解决方案是设置foreignObjectRendering:true，允许在浏览器支持的情况下使用ForeignObject渲染。默认情况下，它被设置为false

html2canvas(document.body, {
        allowTaint: false,
        useCORS: true,
        foreignObjectRendering: true
    }).then(function(canvas) {                

        Canvas2Image.saveAsJPEG(canvas);
    });