Search code examples
javascripthtml2canvas

White space to the left of the image

When I use the default settings for html2canvas, a white space is clearly visible and it also pushing the image to the left.

image
(source: erik-edgren.nu)

Here's the code:

JS: 

$(document).ready(function() {
    var name = $('#name').val();
    var base_color = '524726';

    $('#geopattern').geopattern(name, { baseColor: '#' + base_color }).text(get_initials(name));

    // ...

    $('body').on('click', '#save', function() {
        html2canvas(document.querySelector("#geopattern")).then(function(canvas) {
            $('#hidden-data').val(canvas.toDataURL("image/jpeg"));
            document.getElementById("form").submit();
        });
    });
});

PHP: 

<?php
$hidden_data = $_POST['hidden-data'];
$hidden_name = $_POST['hidden-name'];
$data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $hidden_data));
file_put_contents('images/avatars/'.$hidden_name.'.jpg', $data);
echo '<img src="images/avatars/'.$hidden_name.'.jpg">';
?>

CSS: 

#geopattern {
    align-items: center;
    display: flex;
    color: #eaeaea;
    cursor: default;
    height: 512px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 20em;
    font-weight: 700;
    justify-content: center;
    width: auto;

    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

Is this any bug or is it something I've done wrong? I have the latest release.

Solution

  • Thank you for sharing the code. Finally it helped to find the bug.

    The white gap appears because of margin: 50px auto; set on body.

    See this fiddle. If you uncomment the corresponding line the bug will appear in the result image.

    Hope it helps.