在 html2canvas 中将透明颜色更改为白色答案

【问题标题】：change transparent color into white in html2canvas在 html2canvas 中将透明颜色更改为白色
【发布时间】：2014-07-16 11:42:51
【问题描述】：

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

什么都不会改变...变得透明。

那么如何更改背景底色，以便保存的图像易于阅读？

【问题讨论】：

你的表格元素在DOM中的背景颜色是什么？根据documentation背景设置“画布背景颜色，如果DOM中没有指定。设置未定义为透明”。
@nietonfir 暂时。我正在使用引导表。

如果你不调用函数onload()而是手动调用会发生什么？

@nietonfir 它不起作用。实际上我做了一个链接，当单击该链接时，会出现下载选项。当尝试手动使用时，我必须创建另一个链接来保存图像。

标签： javascript html css html2canvas

【解决方案1】：

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

希望对你有帮助

【讨论】：

我犯了一个多么愚蠢的错误......我只是通过 html2canvas 进行挖掘，但我的逻辑在表格 css 中是错误的。谢谢@g-newa。 :)
谁会想到需要在渲染黑色背景的元素上将背景设为白色......看起来很简单，但并不是第一个想到将我的白色背景设置为白色......