如何使透明的白色，而不是黑色的帆布？(How to make transparent color w

我试图用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:

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

只需添加CSS背景颜色：#FFFFFF你的表:)
希望这可以帮助

我包裹内容转换成对于每个期望的页一个div并给class="pdfpage"然后设置作为CSS pdfpage{background:#FFFFFF;}

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

Answer 4:

我会说，它甚至simplier现在（30/05/18） - 刚及格的backgroundColor：空在html2canvas选项：

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

Answer 5:

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

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

Answer 6:

不用担心，现在只需要添加背景：“#FFFFFF”，其做工精细

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