html - 使用 HTML2Canvas 将大于屏幕的 DIV 渲染为图像

Question

我正在使用 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
});

Answer 1

正如评论中所述，我发布了以下工作链接:

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