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

Posted 2023-03-05

【中文标题】如何在 html2canvas 中使透明颜色变为白色而不是黑色？

【英文标题】：How to make transparent color white instead of black in 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 有黑色背景（不像浏览器中的白色）。 在这种情况下，如何解决此问题并将背景颜色设为白色？

【参考方案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://***.com/a/23928038/1815624

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

希望对你有帮助

我将内容包装到每个所需页面的 div 中，并提供 class="pdfpage" 然后将 css 设置为 pdfpagebackground:#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');
    );