2

我正在构建一个用户生成的图像，他们在其中上传图片，添加华丽并保存它。我能够让一切正常工作，除了我无法让 X 和 Y 轴在用户放置和用户添加标题的图像保存之间对齐，这是用户输入时的 div 覆盖。

用于排列文本的 HTML 和 jQuery 代码（用户通过文本框输入，jQuery 替换值）：

    <div id='images' style='height:480; width:640px; position:relative;'>
                <div id='caption' style='height:35; width:40px; position: absolute; bottom:50; left:310; z-index:200; padding-botom:100px; color:white; font-size:30px; text-align:center; vertical-align:bottom; border:1px solid red;'></div>
                <div id='border' style='height:480; width:640px; position: absolute; top:0; left:0; z-index:100;'><img src='' id='borderimage'></div>
                <div id='croppedimage' style='height:480; width:640px; position: absolute; top:0; left:0;'><img src='<?= $cropped ?>'></div>
        </div>

<script>
$(function() {
    $( "#caption" ).draggable({ containment: "parent", cursor:"move" });
  });
$('.thumb').click(function(){
        var bordername=$(this).attr('id') + '.png';
        $('#border').css("background-image", "url(borders/" + bordername +")");  
        $('#borderchoice').val(bordername);

});
$('#captiontext').keyup(function(){
        var cap=$('#captiontext').val();
        $('#caption').text(cap);
        var caplen=$("#captiontext").val().length;
        var capwidth=caplen * 15;
        $("#caption").width(capwidth);
});

$('#submit').click(function(){
    console.log($('#caption').position());
        var top=$('#caption').position();
        var width=$('#caption').width();
        $('#x').val(top.top);
        $('#y').val(top.left);
        $('#width').val(width);
});
</script>

以及在以下页面上处理它的 PHP：

imagecopyresampled($dest, $source, 0, 0, 0, 0, $imagewidth, $imageheight, $imagewidth, $imageheight);

if (!empty($_POST['captiontext']))
{
        $color = imagecolorallocate($dest, 255, 255, 255);
        $x=$_POST['x'];
        $y=$_POST['y'];
        $fontfile='arial';
        $text=urldecode($_POST['captiontext']);
        imagettftext ( $dest, 24, 0, $x , $y , $color , $fontfile , $text );

}

我知道 imagettftext xy 从文本第一个字符的左下角开始，但我无法在两者之间获得适当的相关性以准确放置文本。我该怎么做才能在图像上正确放置文本以合并它？

4

1 回答 1

1

我将首先修改 JS 并添加高度，因此您现在将 Y 作为文本框的左下角传递。

$('#submit').click(function(){
    console.log($('#caption').position());
        var top=$('#caption').position();
        var width=$('#caption').width();
        var height=$('#caption').height();
        $('#x').val(top.left);
        $('#y').val(top.top + height);
        $('#width').val(width);
});

如果这不起作用，您应该尝试imagettfbbox http://www.php.net/manual/en/function.imagettfbbox.php来获取文本的边界框，然后根据它计算位置

于 2013-08-23T15:38:17.317 回答