使用 html2canvas 更改背景无法正常工作

Question

我有一个应用程序，其目的是将网页转换为 dataURL，然后将该 dataURL 转换为 PDF。 dataURL 转换是使用 html2canvas 完成的，PDF 转换是使用 JSPDF 完成的。

因为 JSPDF 需要 JPEG，所以我将 dataURL 转换为 jpeg。这会导致一个问题，因为 JPEG 似乎无法正确处理透明背景，这让我看到了非常丑陋的黑色背景 PDF。我已经四处寻找这个问题的解决方案，但到目前为止我所做的一切似乎都不起作用

理论上我应该能够将 html2canvas 背景属性设置为 #fff，但是此颜色或任何其他颜色对输出没有影响。有人能想到为什么我的 dataURL 转换仍然有黑色背景的任何其他原因吗？奇怪的是，当我访问 body 元素时它工作正常，但是当我访问包装同一部分的容器 div 时，就会出现这个问题

这是我用来执行此操作的 Jquery 函数。

$(document).ready(function() {
    $("#testButton").click(function() {
        html2canvas($("#container"), {
            allowTaint: false,
            logging:true,
            background:'#fff',
            onrendered: function(canvas) {
                var data = canvas.toDataURL('image/jpeg',1.0);
                window.open(data);
                var doc = new jsPDF();
                doc.addImage(data,'JPEG',15,40,200,200);
                doc.output('save', 'testingtwo.pdf');
          }});
    });
});

有谁知道为什么背景会保持黑色？

Answer 1

您可以通过 css 设置元素本身的背景，它应该可以工作，即：

$("#container").css('background', '#fff')

但是请注意，有一个新的

addHTML

插件作为 jsPDF 和 html2canvas 之间的包装器，可以轻松地同时使用它们，请参阅 https://github.com/MrRio/jsPDF/issues/270

Answer 2

Nas versões Atuais，背景颜色：

...html2canvas(元素, { backgroundColor: '#ffffff' // 背景色 } ).然后(...