使用 HTML2Canvas 将大于屏幕的 DIV 渲染为图像答案

【问题标题】：Rendering a DIV that is larger than the screen to an image using HTML2Canvas使用 HTML2Canvas 将大于屏幕的 DIV 渲染为图像
【发布时间】：2015-10-07 06:05:30
【问题描述】：

我正在使用 HTML2Canvas 将我的 DIV 转换为 PNG。进行得很顺利，但是当我的DIV大于屏幕时，只有DIV在屏幕中可见的部分会渲染到图片中。

是否有任何解决方法，以便我可以将整个 DIV 渲染到图像中？

这是我的代码：

html2canvas(divDrop, {
    onrendered: function (canvas) {
        imgMap.style.display = "";
        imgMap.src = canvas.toDataURL("image/png");
    },
    width: divDrop.clientWidth,
    height: divDrop.clientHeight
});

【问题讨论】：

您检查了clientWidth 和clientHeight 属性吗？这些尺寸正确吗？
是的，我已经检查过了，它们是我的 DIV 的当前大小
所以你的 div 的客户端大小大于窗口大小，画布的其余部分是用白色填充的？当你改变窗口大小时，它是在复制窗口大小吗？
受限于窗口大小。试图导出这么大的 div 有点奇怪，我需要问为什么，你自己说 div 的其余部分不可见。但是考虑一下在导出之前更改窗口大小并在导出后将其改回来的小技巧。
请看看这个提琴手“jsfiddle.net/8ypxW/2083”希望这对你有用。

标签： html html2canvas

【解决方案1】：

如 cmets 中所述，我在下面发布工作链接：

JSFiddle example

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
                // Clean up 
                //document.body.removeChild(canvas);
            }
        });
    });
});

【讨论】：