Javascript 图像左侧的空白

当我使用的默认设置时，一个空白区域清晰可见，它也会将图像推向左侧

（来源：）

代码如下：

JS:

PHP:

---

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

感谢您分享代码。最后它帮助找到了bug

出现白色间隙是因为

边距：50px自动设置在
主体上

看。如果取消注释相应的行，错误将出现在结果图像中

希望有帮助。
如果是html2canvas，您的HTML在哪里？html2canvas转换为图像（画布）的唯一内容是这一行：
空
？Na。我在页面加载时加载相同的函数。请查看更新后的代码（很抱歉，代码太少）。请在
html2canvas（docum…
）之前查看
console.log（$（'geopattern'）.html（））
？这真的很奇怪，因为当我在PHP中测试您可能的解决方案时，它不起作用。甚至您的JSFIDLE都不适用于我（本地）：（这是完整的源代码：@Erik，不客气！事实上，如果你从一开始就发布所有代码，我们可以节省一些时间=）呵呵。是的。我知道：）我没想到那么远。很抱歉
$(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
$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">';
?>

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