html2canvas 图像纵横比不正确答案

【问题标题】：html2canvas image aspect ratio is not correcthtml2canvas 图像纵横比不正确
【发布时间】：2014-03-19 06:03:41
【问题描述】：

我正在练习使用 html2canvas 并尝试使用它将页面的一部分转移到画布上。
我可以做到，但这样做时会丢失纵横比。
下面是整个文档的内容，只是没有body、html、head等标签。

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; }

截图：

【问题讨论】：

标签： jquery html html2canvas

【解决方案1】：

SOLUTION

您不能在 CSS 中按百分比设置 #thecanvas 宽度和高度...它确实会让您失去纵横比。

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

改为使用内联 html 属性或使用 jquery 设置它，这样可以保持纵横比。

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

或

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

【讨论】：