图片左侧的空白

Question

当我使用html2canvas的默认设置时，空白清晰可见，并且还将图像向左推。

_{（来源： erik-edgren.nu ）}

这是代码：

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

这是任何错误还是我做错了什么？ 我有最新版本。

Answer 1

感谢您分享代码。 最后，它有助于发现错误。

出现空白是由于页margin: 50px auto; 放在body 。

看到这个小提琴 。 如果取消注释相应的行，则错误将出现在结果图像中。

希望能帮助到你。