Чтобы упростить понимание вопроса, я сделал этот очень простой скрипт:
<?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. В зависимости от семейства/размера шрифта. Семейство шрифтов можно изменить. Поэтому я не могу «жестко закодировать» позицию.
В чем, по моему мнению, может быть проблема:
Документ imagettftext () говорит: аргумент Y — это позиция базовой линии шрифта, а не самая нижняя часть символа.
Поэтому я предполагаю, что мне нужно добавить высоту между базовой линией и верхней частью шрифта к моей позиции Y, чтобы получить точно такую же позицию, которая отображается в HTML/CSS. Вот почему я использую значение 7 для imagettfbbox().
Но это не работает. Позиция Y иногда хороша, иногда плоха. Я не понимаю, почему.
Если у вас есть идея... Спасибо!
Пример результата:
