Html2canvas color change and zoom

问题

I've added a print functionality in a web page I designed. I used the html2canvas script. However somehow the structure of the page is altered. The web page looks like this: opened in Google Chrome but when the print button clicked it turns to this:. If I change manually the zoom to 50% in the printing menu all enters the page but the wrong color remains.

<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>
     ...

Is there a way to fix this issues?

来源：https://stackoverflow.com/questions/51878872/html2canvas-color-change-and-zoom