html2canvas圖像縱橫比不正確

Question

我正在練習使用html2canvas並嘗試使用它將頁面的一部分轉移到畫布。
我可以做到這一點，但當我這樣做時，我失去了寬高比。
下面是什麼是整個文檔裏面，只是不一樣的身體，HTML，頭部等標籤

HTML正文：

<div id="wrapper"> 
    <div id="left"> 
     <img src="frame_37.png" style="height:50%;" /> 
     <div id="button">transfer</div> 
     <div class="littlebox" style="left: 50px; top: 40px;"></div> 
     <div class="littlebox" style="left: 75px; top: 95px;"></div> 
    </div> 
    <div id="right"> 
     <canvas id="thecanvas"></canvas> 
    </div> 
</div> 

的Javascript塊：

$(document).ready(function(e) { 
    $("#button").on("click", function(event) { 
     html2canvas(document.body, { 
      allowTaint: true, 
      taintTest: false, 
      onrendered: function(canvas) { 
       var can = document.getElementById('thecanvas'); 
       var destCtx = can.getContext('2d'); 
       destCtx.drawImage(canvas, 0, 0); 
     } 
     }); 
    }); 
}); 

CSS：

body  { height:100%; width:100%; margin:0 !important; 
      padding:0 !important; overflow:hidden; } 
#wrapper { width:100%; height:100%; position: absolute;} 
#left  { background-color: #dfdfdd; float:left; width:50%; height:100%; } 
#right  { background-color: #cdcdcd; float:left; width:50%; height:100%; } 
#button { padding:20px; width:auto; height:auto; background:#00b1dc; } 
#thecanvas { width:80%; height:80%; border:1px solid #fff; margin:10%; } 
.littlebox { background:#fff; position:absolute; width:32px; height:32px; } 

截圖：

Answer 1

SOLUTION

不能設置#thecanvas寬度和高度的比例在CSS ...它使你失去的縱橫比。

#thecanvas { width:80%; height:80%;...

而是使用內嵌HTML屬性或用jQuery設置它，這樣你保持寬高比。

<canvas id="thecanvas" width="600" height="800"></canvas>

或

$('#thecanvas').width(...).height(...)