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

Question

我正在尝试使用 html2canvas 截屏：

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

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

score 20 · Accepted Answer

我修改了临时： _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) {
      .....
    }
  });

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

score 10 · Accepted Answer

试试这个

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

score 7 · Accepted Answer

我想说，现在更简单了（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);});

score 6 · Accepted Answer

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

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

希望这可以帮助

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

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

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

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

8 回答 8

Related

Reference