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

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

1 个答案: