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);
    });