html2canvas 返回黑色图像答案

【问题标题】：html2canvas returns black imagehtml2canvas 返回黑色图像
【发布时间】：2014-04-27 16:03:54
【问题描述】：

我在通过 html2canvas 将 div 渲染为图像时遇到问题。

这是我的 javascript 代码：

function saveImages(i)
        {
            html2canvas($("#page"+i), {
                logging:true,
                onrendered: function(canvas){
                    var url = canvas.toDataURL();
                    $.post("saveImage.php", {"path": url, "index":i}, function(data){
                        var p = Math.round(((i+1)/totalPages)*100);
                        $("#progressGraphical").css("width", p+"%");
                        if(p>=100){p = "fertig!"}else{p += "%";}
                        $("#progress").html((i+1)+"/"+totalPages+" Seiten gespeichert - "+p);
                        if(i<totalPages) saveImages(i+1);
                    });
                }
            });
        }
        $(document).ready(function(){
            saveImages(0);
        });

由于使用 jquery 函数完成的后请求，我不得不递归地工作。请求的 php 文件采用 canvas.toDataUrl-Method 生成的 base64 编码的 url，对其进行解码并将其保存到名为“page0/1/2/.../n.png”的图像文件中。

所有这些都可以正常工作 - 直到超过 24 次递归调用的总数。如果是这种情况，那么 html2canvas 生成的所有图像（甚至是第 24 次递归调用之前的图像）都将被绘制为空白。我已经查看了 base64 编码的 url - 只有两个相等的字符串交替出现。

哪里出错了？

【问题讨论】：

刚刚注意到影响正确图像渲染的不是递归调用的数量。它必须与存在的 html 元素的数量有关。
发现：html元素超过27个就会报错

标签： javascript php

【解决方案1】：

https://stackoverflow.com/a/23928038/1815624

只需将 css background-color:#ffffff 添加到您的表格中即可：)

希望对你有帮助

我将内容包装到每个所需页面的 div 中并提供class="pdfpage" 然后将 css 设置为 pdfpage{background:#FFFFFF;}

正如我所评论的，我需要将渲染元素的背景设置为白色并不是第一个想法，因为它已经是白色了......但实际上它是无色的......

从以下位置复制了我的答案： https://stackoverflow.com/a/25457584/1815624

【讨论】：