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

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

Html2canvas map container overlaps other elements

javascript

html2canvas

leaflet