質問を理解しやすくするために、この非常に単純なスクリプトを作成しました。
<?php
if(!empty($_POST)){
$img = imagecreatetruecolor(300,100);
$font = "./custom_font/aquilinetwo-webfont.ttf";
$dimensions = imagettfbbox($_POST['font_size'],0,$font,$_POST['font_value']);
$x_pos = $_POST["font_pos_x"];
$y_pos = $_POST["font_pos_y"]+abs($dimensions[7]);
$color = imagecolorallocate($img, 255, 255, 255);
imagettftext($img,$_POST['font_size'],0,$x_pos,$y_pos,$color,$font,$_POST['font_value']);
imagepng($img, "./image.png");
}
?>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$("#form_font_value").keyup(function(){
$("#myImage span").html($(this).val());
});
$("#form_font_size").keyup(function(){
$("#myImage span").css("font-size",$(this).val()+"pt");
});
$("#form_font_x").keyup(function(){
$("#myImage span").css("left",$(this).val()+"px");
});
$("#form_font_y").keyup(function(){
$("#myImage span").css("top",$(this).val()+"px");
});
});
</script>
<style>
@font-face {
font-family: 'aquilinetworegular';
src: url('./custom_font/aquilinetwo-webfont.eot');
src: url('./custom_font/aquilinetwo-webfont.eot?#iefix') format('embedded-opentype'),
url('./custom_font/aquilinetwo-webfont.woff2') format('woff2'),
url('./custom_font/aquilinetwo-webfont.woff') format('woff'),
url('./custom_font/aquilinetwo-webfont.ttf') format('truetype'),
url('./custom_font/aquilinetwo-webfont.svg#aquilinetworegular') format('svg');
font-weight: normal;
font-style: normal;
}
#myImage {background-color:#000;width:300px;height:100px;margin-bottom:20px;position:relative;}
#myImage span {position:absolute;font-family:"aquilinetworegular";font-size:<?php echo @$_POST["font_size"]?$_POST["font_size"]:"12";?>pt;top:<?php echo @$_POST["font_pos_y"]?$_POST["font_pos_y"]:"0";?>px;left:<?php echo @$_POST["font_pos_x"]?$_POST["font_pos_x"]:"0";?>px;color:#FFF;}
</style>
</head>
<body>
<div id="myImage">
<span><?php echo @$_POST["font_value"]?$_POST["font_value"]:"YourText";?></span>
</div>
<form method="post">
Value : <input type="text" name="font_value" id="form_font_value" value="<?php echo @$_POST["font_value"]?$_POST["font_value"]:"YourText";?>"><br/>
Size : <input type="text" name="font_size" id="form_font_size" value="<?php echo @$_POST["font_size"]?$_POST["font_size"]:"12";?>">pt<br/>
Position X :<input type="text" name="font_pos_x" id="form_font_x" value="<?php echo @$_POST["font_pos_x"]?$_POST["font_pos_x"]:"0";?>">px<br/>
Position Y :<input type="text" name="font_pos_y" id="form_font_y" value="<?php echo @$_POST["font_pos_y"]?$_POST["font_pos_y"]:"0";?>">px<br/>
<input type="submit">
</form>
<hr>
<img src="image.png" alt="Send datas first">
</body>
</html>
それは何をしなければなりませんか？
ユーザーは、テキストを画像のどこに配置するかを選択します。次に、画像が生成されます。
問題 ：
テキストが正しい Y 軸位置に配置されていません。フォントファミリー/サイズによって異なります。font-family は変更できます。したがって、位置を「ハードコード」することはできません。
問題があると思う場所：
imagettftext() doc によると: 引数 Y はフォントのベースラインの位置であり、文字の一番下ではありません
したがって、HTML/CSS でレンダリングされるのとまったく同じ位置を取得するには、ベースラインとフォントの上部の間の高さを Y 位置に追加する必要があると思います。これが、imagettfbbox() の値 7 を使用する理由です。
しかし、うまくいきません。Y 位置は、良い場合もあれば悪い場合もあります。理由がわかりません。
アイデアがあれば... ありがとうございます！
結果の例:
