フォームとの連動 - PHPでGDを使ってみよう
目次
- PHPでGDを使ってみよう
- GDの基本
- フォームとの連動
- アンケートで円グラフ
フォームで画像のパラメータを指定する
動的に画像を変化させる例として、フォームで入力された値を画像に反映させるプログラムを作成します。
フォーム部分のプログラム
まずフォーム部分のプログラムを作成します。以下のソースを入力してください。
<?php
$me = $_POST['me'];
if (!$me) $me = 50;
$kuchi = $_POST['kuchi'];
if (!$kuchi) $kuchi = 30;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>ケロケロ</title>
</head>
<body>
<form method="post" action="gd3.php">
目の大きさ<select name="me">
<?php
for ($i = 10; $i <= 90; $i += 10) {
print "<option";
if ($i == $me) print " selected";
print ">$i</option>\n";
}
?>
</select>
口の大きさ<select name="kuchi">
<?php
for ($i = 10; $i <= 80; $i += 10) {
print "<option";
if ($i == $kuchi) print " selected";
print ">$i</option>\n";
}
?>
</select>
<input type="submit" value="送信">
</form>
<?php print "<img src='gd3b.php?me=$me&kuchi=$kuchi'>\n"; ?>
</body>
</html>
入力が終わったら「gd3.php」というファイル名で保存し、サーバにアップします。
画像部分のプログラム
次に画像部分のプログラムを作成します。以下のソースを入力してください。
<?php
$me = $_GET['me'];
$kuchi = $_GET['kuchi'];
header("Content-Type: image/png");
$img = imagecreate(200, 200);
imagecolorallocate($img, 100, 0, 0);
$col = imagecolorallocate($img, 50, 200, 50);
imagefilledarc($img, 100, 100, 180, 180, $kuchi, 360 - $kuchi, $col, IMG_ARC_PIE);
$col = imagecolorallocate($img, 255, 255, 0);
imagefilledellipse($img, 50, 50, $me, $me, $col);
imagepng($img);
?>
入力が終わったら「gd3b.php」というファイル名で保存し、サーバにアップします。その後、gd3.php を実行してみてください。目と口の大きさをフォームで変更することができます。
gd3.php ソースの解説
まずフォーム部分のソースを解説します。
$me = $_POST['me'];
if (!$me) $me = 50;
フォームからPOST変数で送られた目の大きさを変数 $me に代入しています。最初に実行されたときは初期値として 50 を代入します。
$kuchi = $_POST['kuchi'];
if (!$kuchi) $kuchi = 30;
フォームからPOST変数で送られた口の大きさを変数 $kuchi に代入しています。最初に実行されたときは初期値として 30 を代入します。
目の大きさ<select name="me">
目の大きさを指定するプルダウンメニューを作成します。
for ($i = 10; $i <= 90; $i += 10) {
print "<option";
if ($i == $me) print " selected";
print ">$i</option>\n";
}
目の大きさを指定するプルダウンメニューの中身を作成します。目の大きさは 10 から 90 まで 10 刻みで指定できるように for 文を記述し、option タグを表示しています。現在の目の値が来たときは selected を出力して選択されるようにします。
口の大きさ<select name="kuchi">
口の大きさを指定するプルダウンメニューを作成します。
for ($i = 10; $i <= 80; $i += 10) {
print "<option";
if ($i == $kuchi) print " selected";
print ">$i</option>\n";
}
口の大きさを指定するプルダウンメニューの中身を作成します。口の大きさは 10 から 80 まで 10 刻みで指定できるように for 文を記述し、option タグを表示しています。現在の口の値が来たときは selected を出力して選択されるようにします。
<?php print "<img src='gd3b.php?me=$me&kuchi=$kuchi'>\n"; ?>
img タグの src 属性に画像を出力するスクリプトを渡すことによって画像を出力しています。GET変数として、目と口の大きさを渡しています。
gd3b.php ソースの解説
次に画像表示部分のソースを解説します。
$me = $_GET['me'];
$kuchi = $_GET['kuchi'];
gd3.php から GET 変数で渡された目と口の大きさをそれぞれ $me と $kuchi に代入します。
imagefilledarc($img, 100, 100, 180, 180, $kuchi, 360 - $kuchi, $col, IMG_ARC_PIE);
円弧を使い、角度を上下にそれぞれ $kuchi 度だけ開けて口を表現しています。
imagefilledellipse($img, 50, 50, $me, $me, $col);
目を大きさ $me の円で表現しています。
ツイート
そっか0