如何在 html2canvas 中使透明颜色变为白色而不是黑色？答案

【问题标题】：How to make transparent color white instead of black in html2canvas?如何在 html2canvas 中使透明颜色变为白色而不是黑色？
【发布时间】：2013-01-13 03:27:12
【问题描述】：

我正在尝试使用 html2canvas 截屏：

var body = document.getElementById("body")
$(body).html2canvas({onrendered: function( canvas ) {  
     var urlData = canvas.toDataURL("image/jpeg");  
}});

我的身体背景是透明的，因此 urlData 因为 jpeg 有黑色背景（不像浏览器中的白色）。
在这种情况下，如何解决此问题并将背景颜色设为白色？

【问题讨论】：

标签： html2canvas

【解决方案1】：

我修改了临时：_html2canvas.Util.isTransparent 来自

_html2canvas.Util.isTransparent = function(backgroundColor) {
  return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");
};

到

_html2canvas.Util.isTransparent = function(backgroundColor) { return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)" || backgroundColor === undefined); };

然后调用带有背景参数集的html2canvas就足够了：

html2canvas(screenshot_element, {
    background :'#FFFFFF',
    onrendered: function (canvas) {
      .....
    }
  });

对我来说......将透明背景视为未定义的背景是有意义的。

【讨论】：

很好的答案。它为我节省了很多时间。谢谢。
很棒的答案。非常感谢@CRK
在 html2canvas 代码示例中不应该是“backgroundColor”而不是“background”吗？

【解决方案2】：

试试这个

var body = document.getElementById("body") 
$(body).html2canvas({background:'#fff', onrendered: function( canvas ) {  
 var urlData = canvas.toDataURL("image/jpeg");  
}});

【讨论】：

谢谢，这里是完整的代码：function Snapshot() { html2canvas(document.body, { background:'#fff', onrendered: function(canvas) { var a = document.createElement(' a'); a.href = canvas.toDataURL("image/jpeg", 0.9).replace("image/jpeg", "image/octet-stream"); a.download = 'snapshot.jpg'; a.点击（）; } }）;

【解决方案3】：

我想说，现在更简单了(30/05/18) - 只需在 html2canvas 选项中传递 backgroundColor: null ：

html2canvas(
    document.querySelector("#some-id-to-export"),
    {backgroundColor: null}
).then(canvas => {$("#id-to-render-transparent-bg-img").html(canvas);});

【讨论】：

【解决方案4】：

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

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

希望对你有帮助

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

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

【讨论】：

【解决方案5】：

var body = document.getElementById("body")
$(body).html2canvas({onrendered: function( canvas ) {  
     var urlData = canvas.toDataURL("image/jpeg");  
},
background: '#fff'});

两年后但更新的版本应该接受这样的参数。 . .

【讨论】：

【解决方案6】：

不用担心，现在只需添加背景：'#FFFFFF'，它工作正常

                   html2canvas(element, {
                       background: '#FFFFFF',
                       onrendered: function (canvas) {
                           $("#previewImage").append(canvas);
                           getCanvas = canvas;
                       }
                   });

【讨论】：

【解决方案7】：

如果您需要实际的图像数据不透明，请将 fillRect(0, 0, width, height) 与 fillStyle 'white' 结合使用。

另一种方法是使用 getImageData 和 putImageData 并迭代抛出每个像素来检查 rgba 值并更改它们，但它很慢（可能是几毫秒）

【讨论】：

【解决方案8】：

html2Canvas 和 ngxcharts 团队似乎已经关闭了这个问题上的错误，但没有提供任何解决方案。通过 css 类为 rect 设置填充属性不起作用。

这就是我最终解决它的方式，令人惊讶的是它有效：

 let rectElements = Array.from(document.getElementsByTagName('rect'));
  if (rectElements.length > 0) {
    rectElements.forEach(rect => {
      rect.setAttribute('fill', '#ffffff');
    });
  }

【讨论】：