سؤال

I'm practicing on using html2canvas and trying to use it to transfer a part of the page to canvas.
I can make it happen but I lose the aspect ratio when doing it.
Below is what's inside of the whole document, just without tags like body, html, head, etc.

HTML Body :

<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 Block :

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

Screenshot : enter image description here

هل كانت مفيدة؟

المحلول

SOLUTION

you cannot set #thecanvas width and height by percentage in CSS ... it does makes you lose aspect ratio.

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

Instead use inline html attribute or set it with jquery, this way you keep aspect ratio.

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

or

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

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top