Javascript Html2canvas颜色更改和缩放

我在设计的网页中添加了打印功能。我使用了html2canvas脚本。然而，不知何故，页面的结构被改变了。 该网页看起来像这样：在Google Chrome中打开，但当“打印”按钮单击时，它会变成这样：。如果我在“打印”菜单中将“缩放”手动更改为50%，则所有内容都会进入页面，但仍会保留错误的颜色

<div id="test" class="body-content animated fadeIn">
<img id="screenshot" src="Images/printer.png" onclick="getScreenshot()">
<script src="https://unpkg.com/html2canvas@1.0.0-alpha.12/dist/html2canvas.js"></script>
     <script> function getScreenshot() {
          var printWindow = window.open('', 'PrintWindow', '');            
          html2canvas(document.querySelector('#test')).then(function (canvas) {
               var doc = printWindow.document;
               var img = doc.createElement('img');
               img.src = canvas.toDataURL('image/png');
               doc.body.appendChild(img);
               setTimeout(function () {
                    printWindow.print();
                    printWindow.close();    
               }, 0);
          });
     }
     document.getElementById('screenshot').addEventListener('click', getScreenshot);
     </script>
     ...

函数getScreenshot（）{
var printWindow=window.open（“”，'printWindow'，“”）；
html2canvas（document.querySelector（'#test'））。然后（function（canvas）{
var doc=printWindow.document；
var img=doc.createElement（'img'）；
img.src=canvas.toDataURL（'image/png'）；
文件正文附件子项（img）；
setTimeout（函数（）{
printWindow.print（）；
printWindow.close（）；
}, 0);
});
}
document.getElementById（'screenshot'）。addEventListener（'click'，getScreenshot'）；
...

---

是否有办法解决此问题？

单击浏览器中的“打印”按钮或调用

printWindow.print（）时会发生这种情况？这发生在
printWindow.print（）上