如何在画布上制作透明色白色而不是黑色？

Question

我正在尝试使用html2canvas截取屏幕截图:

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

我的身体背景是透明的,因此urlData因为jpeg有黑色背景(不像浏览器中的白色).
在这种情况下,如何修复此行为并使背景颜色变为白色？

Answer 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) {
      .....
    }
  });

对我来说......考虑透明的未定义背景是有意义的.

Answer 2

试试这个

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

Answer 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);});

Answer 4

/sf/answers/1674962691/

只需添加css background-color:#ffffff到你的表:)

希望这可以帮助

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

正如我所评论的那样,首先我不需要将渲染元素的背景设置为白色,因为它已经是白色的......但实际上它是无色的......