html2canvas截图空白

html2canvas生成截图有时空白有时正常
尝试过以下方法

1.图片过长，因浏览器滚动条导致的，已在参数中添加解决方法，但没有用
2.dom未加载完就执行，已使用window.onload,settimeout仍无法解决，百思不得其解

####补充
3.增加了canvas缓存问题,没有解决

HTMLCanvasElement.prototype.getContext = function(origFn) {
            return function(type, attributes) {
                if (type === '2d') {
                    attributes = Object.assign({}, attributes, {
                        preserveDrawingBuffer: true,
                    });
                }
                return origFn.call(this, type, attributes);
            };
        }(HTMLCanvasElement.prototype.getContext);

4.在html2canvas得参数中加入了timeout,无用
5.在onrendered方法中直接打印canvas,发现从这里就是会出现空白状态,所以与canvas.toDataURL无关

 setTimeout(()=>{
                html2canvas(myDom, {
                    // allowTaint:true,//允许跨域图片的加载
                    dpi: 350, // 提升导出文件的分辨率
                    scale:4,
                    useCORS: true,
                    background: "#ffffff",
                    windowWidth: myDom.scrollWidth,
                    windowHeight: myDom.scrollHeight,
                    x: 0,
                    y: window.pageYOffset,
                    timeout:1000,
                    onrendered: function (canvas) {
                        document.body.appendChild(canvas)
                        console.log('canvas',canvas)

6.正常来讲,我将执行方法都写在window.onload中调用的,那么当渲染时应该是拿到完整的dom节点了,
而我遇到的问题: 渲染出错时不是全部空白,还有几条下划线出现,并且宽高的计算是正常的,会根据内容生成对应的几张A4纸,
我也有考虑是不是html2canvas内传入dom节点时过大,导致还没渲染完就执行下一步,也就是它是异步执行的,所以做了如下更改

img


可惜依然没效果

<div class="layui-form-item" id="fixed-block">
    <div>
        <button id="renderPdf" type="button" class="layui-btn">下载PDF文档</button>
        <button id="printPdf" type="button" class="layui-btn ">打印</button>
    </div>
</div>
</body>

<script type="text/javascript" src="__STATIC_JS__canvas/canvas_js/jsPdf.debug.js"></script>
<script type="text/javascript" src="__STATIC_JS__canvas/canvas_js/html2canvas.js"></script>
<script>
    window.onload=function () {
        if(document.getElementById("wrap")){
            var downPdf = document.getElementById("renderPdf");
            var myDom=document.getElementById("wrap")

            downPdf.onclick = ()=>{
                f(downPdf,myDom)
            }
        }
        function f(downPdf,myDom) {
            window.pageYoffset = 0;
            document.documentElement.scrollTop = 0;
            document.body.scrollTop = 0;
            with (downPdf.style) {
                display = "none";
            }

            setTimeout(()=>{
                html2canvas(myDom, {
                    // allowTaint:true,//允许跨域图片的加载
                    dpi: 350, // 提升导出文件的分辨率
                    scale:4,
                    useCORS: true,
                    background: "#ffffff",
                    windowWidth: myDom.scrollWidth,
                    windowHeight: myDom.scrollHeight,
                    x: 0,
                    y: window.pageYOffset,
                    onrendered: function (canvas) {
                              var contentWidth = canvas.width;
                        var contentHeight = canvas.height;
                        //一页pdf显示html页面生成的canvas高度;
                        var pageHeight = (contentWidth / 592.28) * 841.89;
                        //未生成pdf的html页面高度
                        var leftHeight = contentHeight;
                        //页面偏移
                        var position = 0;
                        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                        var imgWidth = 595.28;
                        var imgHeight = (592.28 / contentWidth) * contentHeight;

                        var pageData = canvas.toDataURL("image/jpeg", 1.0);

                        document.body.appendChild(canvas)


                        var pdf = new jsPDF("", "pt", "a4");

                        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                        //当内容未超过pdf一页显示的范围，无需分页
                        if (leftHeight < pageHeight) {
                            pdf.addImage(pageData, "jpeg", 0, 0, imgWidth, imgHeight);
                        } else {
                            while (leftHeight > 0) {
                                pdf.addImage(pageData, "jpeg", 0, position, imgWidth, imgHeight);
                                leftHeight -= pageHeight;
                                position -= 841.89;
                                //避免添加空白页
                                if (leftHeight > 0) {
                                    pdf.addPage();
                                }
                            }
                        }

                        // pdf.save('{$report.value.excel_1}'+"_report.pdf");
                        // pdf.save("123.pdf");

                        with (downPdf.style) {
                            display = "block";
                        }
                    },
                });
            },500)
        }
相同代码正常情况如下

img

相同代码非正常情况如下

img

希望能得到解答

以下回答由ChatGPT提供
在使用html2canvas生成截图时，有时截图可能会出现空白，这可能是由于HTML文档中的某些元素在html2canvas的渲染过程中被忽略了。

为了解决这个问题，可以尝试以下方法：

①使用allowTaint选项：在调用html2canvas时添加allowTaint: true选项，允许html2canvas加载跨域图片。

②设置useCORS选项：在调用html2canvas时添加useCORS: true选项，允许html2canvas使用跨域资源共享(CORS)。

③设置windowHeight和windowWidth选项：在调用html2canvas时设置windowHeight和windowWidth选项，指定html2canvas所需渲染的HTML文档的高度和宽度。

④调整DPI值：在调用html2canvas时设置dpi选项，指定html2canvas渲染时使用的DPI值。增加DPI值可以提升生成的截图的分辨率。

⑤调整scale值：在调用html2canvas时设置scale选项，指定html2canvas渲染时使用的缩放比例。增加scale值可以提升生成的截图的分辨率。

在使用html2canvas生成截图时，还有一些其他因素可能会导致生成的截图不正常。

例如，HTML文档中存在某些不规范的标签或者样式，可能会导致html2canvas渲染的结果异常。在这种情况下，可以通过检查HTML文档的代码，并修改不规范的标签或者样式来解决问题。

另外，如果HTML文档中的某些元素使用了动态加载的方式，比如通过AJAX加载的图片，那么在调用html2canvas时，这些元素可能无法被正常渲染。在这种情况下，可以尝试使用回调函数或者轮询的方式，在所有动态加载的元素加载完毕后再调用html2canvas。
希望能帮助到您