将 HTML2Canvas 中的透明颜色改为白色

Question

我正在使用javascript库html2canvas来保存我的项目表格。 它可以正常工作，但当我保存图像时，PNG格式显示透明背景颜色，而JPEG格式显示黑色背景颜色。这是我做的：

<script>
        window.onload = function(){
              html2canvas(document.getElementById("tablePng"),{
                    onrendered: function(canvas){
                    var img = canvas.toDataURL('image/jpeg');
                    $('#saveTable').attr('href',img);
                  }
              });
      };
</script>

按照上述步骤可以保存图像，但背景颜色将为黑色。当更改var img = canvas.toDataURL('image/png');时，背景将变为透明。根据文档所说添加背景：

    <script>
        window.onload = function(){
              html2canvas(document.getElementById("tablePng"),{
                    background: "#fff",
                    onrendered: function(canvas){                     
                    var img = canvas.toDataURL('image/jpeg');
                    $('#saveTable').attr('href',img);
                  }
              });
      };
</script>

不会改变任何东西……保持透明。

那么我如何更改背景颜色，以便保存的图像可以轻松阅读？

- Bhim Prasad Ale

---

您的表格元素在DOM中具有什么样的背景颜色？根据文档中的描述，如果在DOM中没有指定背景颜色，则设置“Canvas背景颜色。设置未定义以实现透明效果”。 - nietonfir

@nietonfir，你好。我正在使用Bootstrap表格。<table id="tablePng" class="table" align="center"> - Bhim Prasad Ale

如果您不调用函数onload()而是手动调用它，会发生什么？ - nietonfir

@nietonfir 这样行不通。实际上我创建了一个链接，当点击该链接时，下载选项将出现。当手动尝试时，我必须创建另一个链接来保存图像。 - Bhim Prasad Ale

Answer 1

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

希望这能帮到您。

- g-newa

---

我犯了多么愚蠢的错误啊...我只是在查看html2canvas，但我的表格CSS逻辑是错误的。谢谢@g-newa. :) - Bhim Prasad Ale

谁会想到在渲染黑色背景的元素上需要将背景设置为白色...看起来很简单，但第一个想法并不是将我的白色背景设置为白色... - CrandellWS