Search code examples
javascriptphpjqueryhtml2canvas

html2canvas : remove empty space above the picture

This makes me crazy. I simply would like html2canvas capture an image

I have that:

<div id="post" class="xx">Déposer</div>
<canvas width="500" height="200"></canvas>

<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
   var canvas = document.querySelector("canvas");
   html2canvas($("#post"), {canvas: canvas}).then(function(canvas) {
        var img = canvas.toDataURL()
        window.open(img); 
   });
</script>

The result is this image:

width and height not corresponding to the size of image

The button appear at the bottom of the canvas, and I would like to keep only the button, any idea on how to get only the button ?

If I change the size of the canvas, then the result is like this:

enter image description here

and here is the code of the button :

<div id="post">
    <div style="float:left;background:url(g.png);width:21px;height:53px;"></div>
   <div id="c" style="float:left;background:url(c.png) repeat-x;height:53px;font-family:arial;text-shadow: -1px -1px rgba(0, 0, 0, 0.3);padding: 12px 20px;font-size: 20px;line-height: 24px;color: rgb(255, 255, 255);text-align: center;vertical-align: middle;text-decoration: none;">Déposer</div>
     <div style="float:left;background:url(d.png);width:21px;height:53px;"></div>
</div>

and the files : c.png d.png g.png

which makes this button (no extra css in the page) : enter image description here

Solution

  • The following code:

    <html>
    <head>
        <style>
            canvas {
                border: solid red 1px;
            }
        </style>
    </head>
<div id="post">
    <div style="float:left;background:url(g.png);width:21px;height:53px;"></div>
   <div id="c" style="float:left;background:url(c.png) repeat-x;height:53px;font-family:arial;text-shadow: -1px -1px rgba(0, 0, 0, 0.3);padding: 12px 20px;font-size: 20px;line-height: 24px;color: rgb(255, 255, 255);text-align: center;vertical-align: middle;text-decoration: none;">Déposer</div>
     <div style="float:left;background:url(d.png);width:21px;height:53px;"></div>
</div>
    <canvas width="500" height="200"></canvas>

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="html2canvas.js"></script>
    <script type="text/javascript">
       var canvas = document.querySelector("canvas");
       html2canvas($("#post"), {canvas: canvas});

//.then is an invalid function for html2canvas
/*.then(function(canvas) {
            var img = canvas.toDataURL()
            window.open(img);
       });
*/
    </script>
</html>

    Gives me the following results:

    enter image description here

    From that I would conclude

    • html2canvas has a small amount of padding around where it adds the image to canvas
    • You may have css on your button that may be causing the canvas to push it down farther than you would like