使用jQuery和PHP拖放文本并保存为图像

我正在构建用户生成的图像，他们在上传图片的位置添加了蓬勃发展并保存的图片。我可以让所有的东西都起作用，除非我不能让X轴和Y轴在用户位置和用户添加的标题的图像保存之间排队，这是用户输入时的div覆盖。使用jQuery和PHP拖放文本并保存为图像

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从文本的第一个字符的左下角开始，但我无法获得两者之间的正确关联以准确放置文本。我能做些什么才能在图片上正确放置文本以合并它？

来源

2013-08-23 JustJon

我会先修改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); 
});

如果不工作，你应该尝试imagettfbboxhttp://www.php.net/manual/en/function.imagettfbbox.php让你的文字的边框，然后计算基于该

来源

2013-08-23 15:38:17 cmorrissey

位置当这个答案看，我看到了，我混了x和y的值（在我的代码中x是最高的，y是剩下的），并且修复以及使用你的高度修正校正了一切（知道需要添加的高度但它不工作，谢谢。 – JustJon

使用jQuery和PHP拖放文本并保存为图像

回答

相关问题