Html2canvas 地图容器与其他元素重叠

Question

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

页面外观：

下载后的样子：

代码是简单的html2canvas实现：

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

            Canvas2Image.saveAsJPEG(canvas);
        });

Answer 1

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

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

        Canvas2Image.saveAsJPEG(canvas);
    });