图片左边白色space

Question

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

代码如下：

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

感谢您分享代码。终于找到bug了。

由于在 body 上设置了 margin: 50px auto;，所以出现了白色间隙。

参见this fiddle。如果您取消注释相应的行，错误将出现在结果图像中。

希望对您有所帮助。

图片左边白色space

White space to the left of the image

javascript

html2canvas