javascript - Html2canvas map 容器与其他元素重叠

Question

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

页面外观:

以及下载后的样子:

代码是简单的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);
    });