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

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

只需将css background-color：#ffffff添加到您的表中：）

希望这会有所帮助

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

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

Answer 4

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

Answer 7

如果您需要不透明的实际图像数据，请使用fillRect（0，0，width，height）与fillStyle'white'。

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

Answer 8

html2Canvas和ngxcharts小组似乎已经解决了有关此问题的错误，但未提供任何解决方案。通过CSS类为rect设置fill属性无效。

这就是我最终解决它的方法，令人惊讶的是它起作用：

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

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

8 个答案: