私は、ユーザーが画像をアップロードし、装飾を追加して保存するユーザー生成画像を作成しています。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 がテキストの最初の文字の左下から始まることは承知していますが、テキストを正確に配置するために 2 つの間の適切な相関関係を取得できません。画像にテキストを正しく配置してマージするにはどうすればよいですか?