わかりましたので、jquery を使用して単純なジェネレーターに取り組んでいます。ユーザーは好みのテキストを入力し、フォント、フォントの色、およびフォントのサイズを選択します。このすべてのプロパティは、リアルタイムで個別の div に表示されます (ライブ プレビュー)。
生成されたプレビューを画像として保存する必要があります。そのために、php GD ライブラリを使用します。すべて正常に動作しますが、一部のフォントでは、すべてが台無しになります。
最初の画像ではすべて問題ないように見えますが、2 番目の画像では行の高さがめちゃくちゃになっています。
これは、プロパティを処理するために使用している私のphpスクリプトです
<?php
//Width and height of desired image
$width = 320;
$height= 320;
//Create an image with specified height and width
$main_img = ImageCreate($width, $height);
$mx = imagesx($main_img);
$my = imagesy($main_img);
//Capture values from form
$main_text = $_POST['rtext'];
$main_text_size = $_POST['rfsize'];
$color = $_POST['rcolor'];
$mt_f = $_POST['rfont'];
$main_text_x = ($mx/2);
// more code here
//wrap text if text too long
$words = explode(' ', $main_text);
$lines = array($words[0]);
$currentLine = 0;
for($i = 1; $i < count($words); $i++)
{
$lineSize = imagettfbbox($main_text_size, 0, $mt_f, $lines[$currentLine] . ' ' . $words[$i]);
if($lineSize[2] - $lineSize[0] < $mx)
{
$lines[$currentLine] .= ' ' . $words[$i];
}
else
{
$currentLine++;
$lines[$currentLine] = $words[$i];
}
}
$line_count = 1;
// Loop through the lines and place them on the image
foreach ($lines as $line)
{
$line_box = imagettfbbox($main_text_size, 0, $mt_f, "$line");
$line_width = $line_box[0]+$line_box[2];
$line_height = $line_box[1]-$line_box[7];
$line_margin = ($mx-$line_width)/2;
$line_y = (($line_height+12) * $line_count);
imagettftext($main_img, $main_text_size, 0, $line_margin, $line_y, $main_text_color, $mt_f, $line);
// Increment Y so the next line is below the previous line
$line_count ++;
}
header("Content-type: image/png");
//code to download the image
?>
すべてのフォントに対応するためにテキストをラップするコードの部分を変更する方法はありますか? フォントに基づいて行の高さを自動的に計算しますか?
ありがとう、助けていただければ幸いです