htm2canvas无法捕获溢出的jquery ui对话框内容div图像

时间:2018-09-10 12:35:55

标签: javascript jquery html canvas html2canvas

我正在尝试捕获jquery ui对话框内容div的图像。 div可在对话框中滚动。当它打开打印窗口时,图像仅捕获图像的可见部分。我需要捕获全部div内容。请看看我的代码如下。

$(".printbutton").click(function (e) {
    e.stopPropagation();

    $('.printthisdiv').html2canvas({
        useCORS: true,
        logging: true,                
        onrendered: function (canvas) {

            var frame1 = document.createElement('iframe');
            frame1.name = "frame1";
            frame1.style.position = "absolute";

            document.body.appendChild(frame1);
            var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
            frameDoc.document.open();

            frameDoc.document.write('<html><head><title>wotgoon.com</title></head><body><h1>Wot Go On Premier Events</h1><hr /><img src="' + canvas.toDataURL("image/png") + '"><hr /></body></html>');
            frameDoc.document.close();
            setTimeout(function () {
                window.frames["frame1"].focus();

                try {


                    window.frames["frame1"].print();
                } catch (e) {

                    window.frames["frame1"].print();
                }
                document.body.removeChild(frame1);
            }, 500);

        }
    });
}); 

这是示例图片

打开jquery对话框时的第一张图片 enter image description here

当我单击打印时的第二张图像,它仅捕获div的可见部分。 enter image description here

0 个答案:

没有答案