웹마스터 팁
GD2를 이용한 간단한 이미지버튼 만들기...
2006.06.13 21:04
GD2를 이용한 그림그리기 스크립트를 이용하여 간단한 버튼 이미지 제작 스크립트로 변경해 보았습니다. 늘 많은 정보를 보기만 하다 하나 올립니다. 압축파일을 열면 2개의 파일이 있습니다. 물론 php를 작동할 수 있는 서버에서 작동합니다. 그리고 2개의 파일이 있는 곳에 'images'라는 폴더를 하나 만들어야 합니다. 그러면 유용하게 사용하였으면 합니다...^^
소스는 압축파일(Create_Image.zip)로 첨부하였습니다.
※ 윈도우플랫폼에 아파치가 설치된 경우입니다. 리눅스의 폰트는 어떻게 사용하는지 잘 몰라서요. 아시는 분 코멘트 부탁드립니다.
입력 폼
<HTML>
<head>
<title>Create Button</title>
<script language="JavaScript">
<!--
// 전송 단추 클릭 시 호출
function img_create(){
var form = document.src_img;
/* if(!form.button_text.value) {
alert("버픈에 들어갈 문자를 입력하세요!");
form.button_text.focus();
return ;
}*/
if(!form.filename.value) {
alert("파일 이름을 입력하세요!");
form.filename.focus();
return;
}
form.submit();
}
-->
</script>
<head>
<title>Create buttons</title>
<head>
<body onLoad="MM_preloadImages('./img/button7_1.gif')">
<table height="540" border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed;border-bottom:1 solid #60829b">
<tr>
<td width="230" style="padding-left:5">
<form method="post" name='src_img' action="make_button.php" enctype='multipart/form-data'>
<table width="230" cellspacing="0" border="0">
<tr>
<th width="230" height="30" align="center" colspan="2" style="border-bottom:1 solid #60829b">
Create buttons
</th>
</tr>
<tr>
<th height="25" align="center" colspan="2">
Image
</th>
</tr>
<tr>
<td colspan="2" align="center" style="border-bottom:1 solid #60829b">
<input type="file" name='img_file' style="width:220;height:20;font-size:7pt;line-height:normal;height:20px">
</td>
</tr>
<tr>
<th height="25" colspan="2" align="center">
Button Size & Color
</th>
</tr>
<tr>
<td width="230" colspan="2" style="padding-left:5">
Width : <input type="text" name="width" size="6" maxlength="6" style="width:63;height:18;font-size:9pt;line-height:normal">
Height : <input type="text" name="height" size="6" maxlength="6" style="width:63;height:18;font-size:9pt;line-height:normal">
</td>
</tr>
<tr>
<td width="230" colspan="2" align="center">
margin w : <input type="text" name="w_margin" size="6" maxlength="6" style="width:63;height:18;font-size:9pt;line-height:normal">
h : <input type="text" name="h_margin" size="6" maxlength="6" style="width:63;height:18;font-size:9pt;line-height:normal">
</td>
</tr>
<tr>
<td width="230" colspan="2" align="center" style="border-bottom:1 solid #60829b">
Red : <input type="text" name="b_red" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
green : <input type="text" name="b_green" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
blue : <input type="text" name="b_blue" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
</td>
</tr>
<tr>
<td width="230" colspan="2" align="center">
<b>테두리</b> : <input type="radio" name="i_rect" value="y"> 사용
<input type="radio" name="i_rect" value="n" checked> 없음
</td>
</tr>
<tr>
<th width="230" align="center" colspan="2">
테두리 색상(HEX)
</th>
</tr>
<tr>
<td width="230" colspan="2" align="center" style="border-bottom:1 solid #60829b">
Red : <input type="text" name="l_red" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
green : <input type="text" name="l_green" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
blue : <input type="text" name="l_blue" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
</td>
</tr>
<tr>
<td width="230" colspan="2" align="center">
<b>선</b> : <input type="radio" name="u_line" value="y"> 사용
<input type="radio" name="u_line" value="n" checked> 없음
</td>
</tr>
<tr>
<td width="115" valign="middle" align="center" style="border-right:1 solid #60829b">
시작점 <input type="text" name="start_x_posi" size="8" maxlength="8" style="width:57;height:18;font-size:9pt;line-height:normal">:x<br />
좌 표 <input type="text" name="start_y_posi" size="2" maxlength="2" style="width:57;height:18;font-size:9pt;line-height:normal">:y
</td>
<td width="110" valign="middle" align="center">
끝 점 <input type="text" name="end_x_posi" size="2" maxlength="2" style="width:57;height:18;font-size:9pt;line-height:normal">:x<br />
좌 표 <input type="text" name="end_y_posi" size="8" maxlength="8" style="width:57;height:18;font-size:9pt;line-height:normal">:y
</td>
</tr>
<tr>
<th width="230" align="center" colspan="2" style="padding-top:5">
선 색상(HEX)
</th>
</tr>
<tr>
<td width="230" colspan="2" align="center" style="border-bottom:1 solid #60829b">
Red : <input type="text" name="s_l_red" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
green : <input type="text" name="s_l_green" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
blue : <input type="text" name="s_l_blue" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
</td>
</tr>
<tr>
<td width="230" colspan="2" align="center">
Button TEXT : <input type="text" name="button_text" style="width:120;height:20;font-size:9pt;line-height:normal">
</td>
</tr>
<tr>
<td width="230" colspan="2" align="center">
TEXT FONT :
<font face="돋움" size="2" color="#002C57">
<select name="f_name" size="1" style="width:120;height:20;font-size:9pt;line-height:normal">
<option value="GULIM.TTC" selected>굴림,돋움</option>
<option value="BATANG.TTC">바탕,궁서</option>
<option value="NGULIM.TTF">새굴림</option>
<option value="HMFMOLD.TTF">휴먼옛체</option>
<option value="HMKMMAG.TTF">휴먼매직체</option>
<option value="H2GTRE.TTF">HY견고딕</option>
<option value="H2MJRE.TTF">HY견명조</option>
<option value="H2GSRB.TTF">HY궁서B</option>
<option value="H2GPRM.TTF">HY그래픽</option>
<option value="H2MJSM.TTF">HY신명조</option>
<option value="H2SA1M.TTF">HY얕은샘물</option>
<option value="H2PORL.TTF">HY엽서L</option>
<option value="H2GTRM.TTF">HY중고딕</option>
<option value="H2HDRM.TTF">HY헤드라인</option>
<option value="ARIAL.TTF">Arial</option>
<option value="BKANT.TTF">Book Antiqua</option>
<option value="comic.ttf">Comic Sans MS</option>
<option value="comicbd.ttf">Comic Sans MS Bold</option>
<option value="impact.ttf">IMPACT</option>
<option value="lsansd.ttf">Lucida Sans</option>
<option value="SSERIFE.FON">Ms Sans Serif</option>
<option value="verdana.TTF">Verdana</option>
</select>
</font>
</td>
</tr>
<tr>
<td width="230" height="30" align="center" colspan="2">
<b>Button Text Color(HEX)</b>
</td>
</tr>
<tr>
<td width="230" colspan="2" align="center" style="border-bottom:1 solid #60829b">
Red : <input type="text" name="t_red" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
green : <input type="text" name="t_green" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
blue : <input type="text" name="t_blue" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
</td>
</tr>
<tr>
<td width="80" align="right" style="padding-right:10;padding-top:10">
<b>Name</b>
</td>
<td width="80" align="left" style="padding-top:10">
<input type="text" name="filename" size="20" maxlength="20" style="width:80;height:20;font-size:9pt;line-height:normal">
</td>
</tr>
<tr>
<td width="80" align="left">
</td>
<td width="80" align="center" style="padding-left:16;padding-top:10">
<a href="javascript:img_create()" onMouseOver="mth_swpImg('Image33','','./img/button7_1.gif',1)" onMouseOut="mth_swpImgRstr()" onfocus='this.blur()'>
<img src="./img/button7.gif" name="Image33" id="Image33" border="0">
</a>
</td>
</tr>
</table>
</form>
</td>
<td width="420" height="540">
<table width="420" border="0" cellpadding="0">
<tr>
<td align="center" valign="absmiddle" bgcolor="#000000" style="border-bottom:1 solid #60829b">
<?
$src_file = "./images/".$filename.".jpg"; $img_info=@getimagesize($src_file);
$width = $img_info[0];
$height = $img_info[1];
if (($width > 420) && ($width > $height)) {
$ratio_w = $width / 420;
$width = $width / $ratio_w;
$height = $height / $ratio_w;
} else if (($height > 600) && ($height > $width)) {
$ratio_h = $heignt / 600;
$width = $width / $ratio_h;
$height = $height / $ratio_h;
}
if($filename){
?>
<img src='./images/<?=$filename.".jpg" ?>' width="<?=$width?>" height="<?=$height?>" style="border:1 solid #ffffff" vspace="2">
<? } else { ?>
<? } ?>
</td>
</tr>
<tr>
<td height="520" width="420" valign="top" style="overflow-y:scroll;padding-left:20;padding-top:20;" bgcolor="#000000">
<div style="width:100%;height:100%; overflow:auto;">
<?
$dir = "./images/";
// 알고 있는 디렉토리를 열어서, 내용을 읽어들이는 작업입니다.
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) !== false) {
$dvd_flnm=explode(".",$file);
if ($file==".") {
?>
<font color="#ffffff">.</font><br />
<?
} else if ($file==".."){
?>
<font color="#ffffff">..</font><br /><br />
<?
} else if ($dvd_flnm[1]=="jpg"){
?>
<IMG src="./images/<?=$file?>" hspace="1" vspace="1" style="border:1 solid #ffffff" alt="<?=$file?>">
<?
}
}
closedir($dh);
}
}
?>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</HTML>
이미지 제작 스크립트
<meta http-equiv="Content-Type" content="text/php; charset=utf-8">
<?php
// $img_file = $_REQUEST['img_file'];
// echo $image_file."<br />";
// echo $img_file;
// return;
//버튼에 입력될 문자
$button_text = $_REQUEST['button_text'];
// 버튼의 크기
$width = $_REQUEST['width'];
$height = $_REQUEST['height'];
// 문자와 버튼 변두리와의 간격
$w_margin = $_REQUEST['w_margin'];
$h_margin = $_REQUEST['h_margin'];
//사각 테두리 &색상
$i_rect = $_REQUEST['i_rect'];
$l_red = $_REQUEST['l_red'];
$l_green = $_REQUEST['l_green'];
$l_blue = $_REQUEST['l_blue'];
$lc_red = intval(hexdec($l_red));
$lc_green = intval(hexdec($l_green));
$lc_blue = intval(hexdec($l_blue));
//선 색상 좌표
$u_line = $_REQUEST['u_line'];
$sx_pos = $_REQUEST['start_x_posi'+ '];
$sy_pos = $_REQUEST['start_y_posi'];
$ex_pos = $_REQUEST['end_x_posi'];
$ey_pos = $_REQUEST['end_y_posi'];
$s_l_red = hexdec($_REQUEST['s_l_red']);
$s_l_green = hexdec($_REQUEST['s_l_green']);
$s_l_blue = hexdec($_REQUEST['s_l_blue']);
// echo $lc_red."<br />";
// echo $lc_green."<br />";
// echo $lc_blue;
// return;
// 문자의 폰트네임
$f_name = $_REQUEST['f_name'];
// 문자색
$t_red = $_REQUEST['t_red'];
$t_green = $_REQUEST['t_green'];
$t_blue = $_REQUEST['t_blue'];
$tc_red = hexdec($t_red);
$tc_green = hexdec($t_green);
$tc_blue = hexdec($t_blue);
// 버튼 배경색
$b_red = $_REQUEST['b_red'];
$b_green = $_REQUEST['b_green'];
$b_blue = $_REQUEST['b_blue'];
$bc_red = hexdec($b_red);
$bc_green = hexdec($b_green);
$bc_blue = hexdec($b_blue);
// 이미지명
$filename = $_REQUEST['filename'];
if (empty($button_text) || empty($width) || empty($height))
{
echo 'Could not create image - form not filled out correctly';
exit;
}
if ($img_file){
$path="./images/";
$im = ImageCreateFromJPEG($image_file);
} else {
// 이미지를 만들고 이미지의 크기를 알아낸다.
$im = ImageCreateTrueColor(intval($width), intval($height));
}
//echo $l_color;
//return;
if ($b_red && $b_green && $b_blue) {
$color = ImageColorAllocate($im, $bc_red, $bc_green, $bc_blue);
ImageFill($im, 0, 0, $color);
}
//결과
#Header ('Content-type: image/png');
#ImagePng($im);
#return;
$width_image = ImageSX($im);
$height_image = ImageSY($im);
if ($i_rect == "y") {
$l_color = ImageColorAllocate($im, $lc_red, $lc_green, $lc_blue);
ImageRectangle($im,0,0,$width-1,$height-1,$l_color);
}
if ($u_line == "y") {
$s_l_color = ImageColorAllocate($im, $s_l_red, $s_l_green, $s_l_blue);
ImageLine($im, $sx_pos, $sy_pos, $ex_pos, $ey_pos, $s_l_color);
}
// 이미지의 각 둘레에 18픽셀씩 떨어져서 글자를 채워 넣을 것이다.
$width_image_wo_margins = $width_image - (2 * $w_margin);
$height_image_wo_margins = $height_image - (2 * $h_margin);
// 폰트 크기를 33에서 조금씩 줄여나가서 버튼에 꼭 맞는 크기가 되도록 한다.
$font_size = 33;
// 폰트 파일이 있는 위치를 GD2에게 알려준다.
putenv('GDFONTPATH=C:WINDOWSFonts');
$fontname = $f_name;
do
{
$font_size--;
// 지금 폰트 크기를 사용할 때 텍스트의 크기를 알아낸다.
$bbox=ImageTTFBBox ($font_size, 0, $fontname, $button_text);
$right_text = $bbox[2]; // 제일 왼쪽 x 좌표
$left_text = $bbox[0]; // 제일 오른쪽 x 좌표
$width_text = $right_text - $left_text; // 폭을 잰다.
$height_text = abs($bbox[7] - $bbox[1]); // 높이를 잰다.
}
while ( $font_size>6 &&
( $height_text>$height_image_wo_margins ||
$width_text>$width_image_wo_margins )
);
if ( $height_text>$height_image_wo_margins ||
$width_text>$width_image_wo_margins )
{
// 적절한 폰트 크기를 찾지 못했을 때
echo 'Text given will not fit on button.<br />';
}
else
{
// 적절한 폰트 크기를 찾았으므로, 버튼에 글자를 넣는다.
$text_x = $width_image/2.0 - $width_text/2.0;
$text_y = $height_image/2.0 - $height_text/2.0 ;
if ($left_text < 0)
$text_x += abs($left_text); // 왼쪽에 남는 부분을 더한다.
$above_line_text = abs($bbox[7]); // 기준선으로부터 얼마나 위에 있는가?
$text_y += $above_line_text; // 기준선과의 차이를 더한다.
$text_y -= 2; // 템플릿의 모양을 위해 값을 조절한다.
# $white = ImageColorAllocate ($im, 255, 255, 255);
# echo "$f_red <br />";
# echo "$f_green <br />";
# echo "$f_blue";
# return;
$text_color = ImageColorAllocate ($im, $tc_red, $tc_green, $tc_blue);
ImageTTFText ($im, $font_size, 0, $text_x, $text_y, $text_color, $fontname,
$button_text);
#if (file_exists("./images/".$filename.".jpg")) {
# msg_send("같은 이름의 파일이 있습니다.");
#} else {
imagejpeg($im, "./images/".$filename.".jpg",100);
#}
# Header ('Content-type: image/png');
# ImageJPEG ($im);
}
ImageDestroy ($im);
echo("<meta http-equiv='Refresh' content='0; URL=index.html?filename=$filename&width=$width&height=$height'>");
?>
소스는 압축파일(Create_Image.zip)로 첨부하였습니다.
※ 윈도우플랫폼에 아파치가 설치된 경우입니다. 리눅스의 폰트는 어떻게 사용하는지 잘 몰라서요. 아시는 분 코멘트 부탁드립니다.
입력 폼
<HTML>
<head>
<title>Create Button</title>
<script language="JavaScript">
<!--
// 전송 단추 클릭 시 호출
function img_create(){
var form = document.src_img;
/* if(!form.button_text.value) {
alert("버픈에 들어갈 문자를 입력하세요!");
form.button_text.focus();
return ;
}*/
if(!form.filename.value) {
alert("파일 이름을 입력하세요!");
form.filename.focus();
return;
}
form.submit();
}
-->
</script>
<head>
<title>Create buttons</title>
<head>
<body onLoad="MM_preloadImages('./img/button7_1.gif')">
<table height="540" border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed;border-bottom:1 solid #60829b">
<tr>
<td width="230" style="padding-left:5">
<form method="post" name='src_img' action="make_button.php" enctype='multipart/form-data'>
<table width="230" cellspacing="0" border="0">
<tr>
<th width="230" height="30" align="center" colspan="2" style="border-bottom:1 solid #60829b">
Create buttons
</th>
</tr>
<tr>
<th height="25" align="center" colspan="2">
Image
</th>
</tr>
<tr>
<td colspan="2" align="center" style="border-bottom:1 solid #60829b">
<input type="file" name='img_file' style="width:220;height:20;font-size:7pt;line-height:normal;height:20px">
</td>
</tr>
<tr>
<th height="25" colspan="2" align="center">
Button Size & Color
</th>
</tr>
<tr>
<td width="230" colspan="2" style="padding-left:5">
Width : <input type="text" name="width" size="6" maxlength="6" style="width:63;height:18;font-size:9pt;line-height:normal">
Height : <input type="text" name="height" size="6" maxlength="6" style="width:63;height:18;font-size:9pt;line-height:normal">
</td>
</tr>
<tr>
<td width="230" colspan="2" align="center">
margin w : <input type="text" name="w_margin" size="6" maxlength="6" style="width:63;height:18;font-size:9pt;line-height:normal">
h : <input type="text" name="h_margin" size="6" maxlength="6" style="width:63;height:18;font-size:9pt;line-height:normal">
</td>
</tr>
<tr>
<td width="230" colspan="2" align="center" style="border-bottom:1 solid #60829b">
Red : <input type="text" name="b_red" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
green : <input type="text" name="b_green" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
blue : <input type="text" name="b_blue" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
</td>
</tr>
<tr>
<td width="230" colspan="2" align="center">
<b>테두리</b> : <input type="radio" name="i_rect" value="y"> 사용
<input type="radio" name="i_rect" value="n" checked> 없음
</td>
</tr>
<tr>
<th width="230" align="center" colspan="2">
테두리 색상(HEX)
</th>
</tr>
<tr>
<td width="230" colspan="2" align="center" style="border-bottom:1 solid #60829b">
Red : <input type="text" name="l_red" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
green : <input type="text" name="l_green" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
blue : <input type="text" name="l_blue" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
</td>
</tr>
<tr>
<td width="230" colspan="2" align="center">
<b>선</b> : <input type="radio" name="u_line" value="y"> 사용
<input type="radio" name="u_line" value="n" checked> 없음
</td>
</tr>
<tr>
<td width="115" valign="middle" align="center" style="border-right:1 solid #60829b">
시작점 <input type="text" name="start_x_posi" size="8" maxlength="8" style="width:57;height:18;font-size:9pt;line-height:normal">:x<br />
좌 표 <input type="text" name="start_y_posi" size="2" maxlength="2" style="width:57;height:18;font-size:9pt;line-height:normal">:y
</td>
<td width="110" valign="middle" align="center">
끝 점 <input type="text" name="end_x_posi" size="2" maxlength="2" style="width:57;height:18;font-size:9pt;line-height:normal">:x<br />
좌 표 <input type="text" name="end_y_posi" size="8" maxlength="8" style="width:57;height:18;font-size:9pt;line-height:normal">:y
</td>
</tr>
<tr>
<th width="230" align="center" colspan="2" style="padding-top:5">
선 색상(HEX)
</th>
</tr>
<tr>
<td width="230" colspan="2" align="center" style="border-bottom:1 solid #60829b">
Red : <input type="text" name="s_l_red" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
green : <input type="text" name="s_l_green" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
blue : <input type="text" name="s_l_blue" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
</td>
</tr>
<tr>
<td width="230" colspan="2" align="center">
Button TEXT : <input type="text" name="button_text" style="width:120;height:20;font-size:9pt;line-height:normal">
</td>
</tr>
<tr>
<td width="230" colspan="2" align="center">
TEXT FONT :
<font face="돋움" size="2" color="#002C57">
<select name="f_name" size="1" style="width:120;height:20;font-size:9pt;line-height:normal">
<option value="GULIM.TTC" selected>굴림,돋움</option>
<option value="BATANG.TTC">바탕,궁서</option>
<option value="NGULIM.TTF">새굴림</option>
<option value="HMFMOLD.TTF">휴먼옛체</option>
<option value="HMKMMAG.TTF">휴먼매직체</option>
<option value="H2GTRE.TTF">HY견고딕</option>
<option value="H2MJRE.TTF">HY견명조</option>
<option value="H2GSRB.TTF">HY궁서B</option>
<option value="H2GPRM.TTF">HY그래픽</option>
<option value="H2MJSM.TTF">HY신명조</option>
<option value="H2SA1M.TTF">HY얕은샘물</option>
<option value="H2PORL.TTF">HY엽서L</option>
<option value="H2GTRM.TTF">HY중고딕</option>
<option value="H2HDRM.TTF">HY헤드라인</option>
<option value="ARIAL.TTF">Arial</option>
<option value="BKANT.TTF">Book Antiqua</option>
<option value="comic.ttf">Comic Sans MS</option>
<option value="comicbd.ttf">Comic Sans MS Bold</option>
<option value="impact.ttf">IMPACT</option>
<option value="lsansd.ttf">Lucida Sans</option>
<option value="SSERIFE.FON">Ms Sans Serif</option>
<option value="verdana.TTF">Verdana</option>
</select>
</font>
</td>
</tr>
<tr>
<td width="230" height="30" align="center" colspan="2">
<b>Button Text Color(HEX)</b>
</td>
</tr>
<tr>
<td width="230" colspan="2" align="center" style="border-bottom:1 solid #60829b">
Red : <input type="text" name="t_red" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
green : <input type="text" name="t_green" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
blue : <input type="text" name="t_blue" size="2" maxlength="2" style="width:20;height:20;font-size:9pt;line-height:normal" onkeyup="autoTab(this,2,event);">
</td>
</tr>
<tr>
<td width="80" align="right" style="padding-right:10;padding-top:10">
<b>Name</b>
</td>
<td width="80" align="left" style="padding-top:10">
<input type="text" name="filename" size="20" maxlength="20" style="width:80;height:20;font-size:9pt;line-height:normal">
</td>
</tr>
<tr>
<td width="80" align="left">
</td>
<td width="80" align="center" style="padding-left:16;padding-top:10">
<a href="javascript:img_create()" onMouseOver="mth_swpImg('Image33','','./img/button7_1.gif',1)" onMouseOut="mth_swpImgRstr()" onfocus='this.blur()'>
<img src="./img/button7.gif" name="Image33" id="Image33" border="0">
</a>
</td>
</tr>
</table>
</form>
</td>
<td width="420" height="540">
<table width="420" border="0" cellpadding="0">
<tr>
<td align="center" valign="absmiddle" bgcolor="#000000" style="border-bottom:1 solid #60829b">
<?
$src_file = "./images/".$filename.".jpg"; $img_info=@getimagesize($src_file);
$width = $img_info[0];
$height = $img_info[1];
if (($width > 420) && ($width > $height)) {
$ratio_w = $width / 420;
$width = $width / $ratio_w;
$height = $height / $ratio_w;
} else if (($height > 600) && ($height > $width)) {
$ratio_h = $heignt / 600;
$width = $width / $ratio_h;
$height = $height / $ratio_h;
}
if($filename){
?>
<img src='./images/<?=$filename.".jpg" ?>' width="<?=$width?>" height="<?=$height?>" style="border:1 solid #ffffff" vspace="2">
<? } else { ?>
<? } ?>
</td>
</tr>
<tr>
<td height="520" width="420" valign="top" style="overflow-y:scroll;padding-left:20;padding-top:20;" bgcolor="#000000">
<div style="width:100%;height:100%; overflow:auto;">
<?
$dir = "./images/";
// 알고 있는 디렉토리를 열어서, 내용을 읽어들이는 작업입니다.
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) !== false) {
$dvd_flnm=explode(".",$file);
if ($file==".") {
?>
<font color="#ffffff">.</font><br />
<?
} else if ($file==".."){
?>
<font color="#ffffff">..</font><br /><br />
<?
} else if ($dvd_flnm[1]=="jpg"){
?>
<IMG src="./images/<?=$file?>" hspace="1" vspace="1" style="border:1 solid #ffffff" alt="<?=$file?>">
<?
}
}
closedir($dh);
}
}
?>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</HTML>
이미지 제작 스크립트
<meta http-equiv="Content-Type" content="text/php; charset=utf-8">
<?php
// $img_file = $_REQUEST['img_file'];
// echo $image_file."<br />";
// echo $img_file;
// return;
//버튼에 입력될 문자
$button_text = $_REQUEST['button_text'];
// 버튼의 크기
$width = $_REQUEST['width'];
$height = $_REQUEST['height'];
// 문자와 버튼 변두리와의 간격
$w_margin = $_REQUEST['w_margin'];
$h_margin = $_REQUEST['h_margin'];
//사각 테두리 &색상
$i_rect = $_REQUEST['i_rect'];
$l_red = $_REQUEST['l_red'];
$l_green = $_REQUEST['l_green'];
$l_blue = $_REQUEST['l_blue'];
$lc_red = intval(hexdec($l_red));
$lc_green = intval(hexdec($l_green));
$lc_blue = intval(hexdec($l_blue));
//선 색상 좌표
$u_line = $_REQUEST['u_line'];
$sx_pos = $_REQUEST['start_x_posi'+ '];
$sy_pos = $_REQUEST['start_y_posi'];
$ex_pos = $_REQUEST['end_x_posi'];
$ey_pos = $_REQUEST['end_y_posi'];
$s_l_red = hexdec($_REQUEST['s_l_red']);
$s_l_green = hexdec($_REQUEST['s_l_green']);
$s_l_blue = hexdec($_REQUEST['s_l_blue']);
// echo $lc_red."<br />";
// echo $lc_green."<br />";
// echo $lc_blue;
// return;
// 문자의 폰트네임
$f_name = $_REQUEST['f_name'];
// 문자색
$t_red = $_REQUEST['t_red'];
$t_green = $_REQUEST['t_green'];
$t_blue = $_REQUEST['t_blue'];
$tc_red = hexdec($t_red);
$tc_green = hexdec($t_green);
$tc_blue = hexdec($t_blue);
// 버튼 배경색
$b_red = $_REQUEST['b_red'];
$b_green = $_REQUEST['b_green'];
$b_blue = $_REQUEST['b_blue'];
$bc_red = hexdec($b_red);
$bc_green = hexdec($b_green);
$bc_blue = hexdec($b_blue);
// 이미지명
$filename = $_REQUEST['filename'];
if (empty($button_text) || empty($width) || empty($height))
{
echo 'Could not create image - form not filled out correctly';
exit;
}
if ($img_file){
$path="./images/";
$im = ImageCreateFromJPEG($image_file);
} else {
// 이미지를 만들고 이미지의 크기를 알아낸다.
$im = ImageCreateTrueColor(intval($width), intval($height));
}
//echo $l_color;
//return;
if ($b_red && $b_green && $b_blue) {
$color = ImageColorAllocate($im, $bc_red, $bc_green, $bc_blue);
ImageFill($im, 0, 0, $color);
}
//결과
#Header ('Content-type: image/png');
#ImagePng($im);
#return;
$width_image = ImageSX($im);
$height_image = ImageSY($im);
if ($i_rect == "y") {
$l_color = ImageColorAllocate($im, $lc_red, $lc_green, $lc_blue);
ImageRectangle($im,0,0,$width-1,$height-1,$l_color);
}
if ($u_line == "y") {
$s_l_color = ImageColorAllocate($im, $s_l_red, $s_l_green, $s_l_blue);
ImageLine($im, $sx_pos, $sy_pos, $ex_pos, $ey_pos, $s_l_color);
}
// 이미지의 각 둘레에 18픽셀씩 떨어져서 글자를 채워 넣을 것이다.
$width_image_wo_margins = $width_image - (2 * $w_margin);
$height_image_wo_margins = $height_image - (2 * $h_margin);
// 폰트 크기를 33에서 조금씩 줄여나가서 버튼에 꼭 맞는 크기가 되도록 한다.
$font_size = 33;
// 폰트 파일이 있는 위치를 GD2에게 알려준다.
putenv('GDFONTPATH=C:WINDOWSFonts');
$fontname = $f_name;
do
{
$font_size--;
// 지금 폰트 크기를 사용할 때 텍스트의 크기를 알아낸다.
$bbox=ImageTTFBBox ($font_size, 0, $fontname, $button_text);
$right_text = $bbox[2]; // 제일 왼쪽 x 좌표
$left_text = $bbox[0]; // 제일 오른쪽 x 좌표
$width_text = $right_text - $left_text; // 폭을 잰다.
$height_text = abs($bbox[7] - $bbox[1]); // 높이를 잰다.
}
while ( $font_size>6 &&
( $height_text>$height_image_wo_margins ||
$width_text>$width_image_wo_margins )
);
if ( $height_text>$height_image_wo_margins ||
$width_text>$width_image_wo_margins )
{
// 적절한 폰트 크기를 찾지 못했을 때
echo 'Text given will not fit on button.<br />';
}
else
{
// 적절한 폰트 크기를 찾았으므로, 버튼에 글자를 넣는다.
$text_x = $width_image/2.0 - $width_text/2.0;
$text_y = $height_image/2.0 - $height_text/2.0 ;
if ($left_text < 0)
$text_x += abs($left_text); // 왼쪽에 남는 부분을 더한다.
$above_line_text = abs($bbox[7]); // 기준선으로부터 얼마나 위에 있는가?
$text_y += $above_line_text; // 기준선과의 차이를 더한다.
$text_y -= 2; // 템플릿의 모양을 위해 값을 조절한다.
# $white = ImageColorAllocate ($im, 255, 255, 255);
# echo "$f_red <br />";
# echo "$f_green <br />";
# echo "$f_blue";
# return;
$text_color = ImageColorAllocate ($im, $tc_red, $tc_green, $tc_blue);
ImageTTFText ($im, $font_size, 0, $text_x, $text_y, $text_color, $fontname,
$button_text);
#if (file_exists("./images/".$filename.".jpg")) {
# msg_send("같은 이름의 파일이 있습니다.");
#} else {
imagejpeg($im, "./images/".$filename.".jpg",100);
#}
# Header ('Content-type: image/png');
# ImageJPEG ($im);
}
ImageDestroy ($im);
echo("<meta http-equiv='Refresh' content='0; URL=index.html?filename=$filename&width=$width&height=$height'>");
?>