위치에 따른 이미지에 문자열 그리기
제 강좌를 출처를 밝히고 외부로 퍼가는 것은 허용하지만,
다른 강좌의 자료나 책의 자료로 사용되거나 부분적인 인용은 허용하지 않습니다.
이미지에 글을 쓰거나 이미지를 합치거나 하는 등의 내용을 다루어 볼까 합니다.
나중에는 간단한 짤방 만들기 같은 것도 할수 있지 않을까 싶습니다.
이미지관련 > 위치에 따른 이미지에 문자열 그리기
이번 내용은 이전 내용을 바탕으로 함수를 두개 만들고,
그것을 통해 원하는 위치에 지정한 문자열을 그리는 부분을 다루어 보도록 하겠습니다.
라이브러리 > image.lib.20140723.php
### 이미지 관련 라이브러리 ###
/*
지정된 문자열의 실제 너비와 높이를 계산하여 이미지위에 그릴수 있는 실좌표를 반환
return Array(x1, y1, x2, y2, x3, y3, x4, y4, width, height, x_gap, y_gap) or false
나중에 기울기에 따른 값도 제공해 보겟지만 일단은 0일때만 사용 가능
*/
function image_box ($font_file, $font_size, $angle, $text) {
$font_file = trim($font_file);
if (!is_file($font_file))
return false;
$font_size = (float)$font_size;
$angle = (float)$angle;
if ($angle != 0) //기울기가 0 이 아닐 경우에는 0으로 변경
$angle = 0;
$o = imageftbbox ( $font_size, $angle, $font_file, $text );
$n = Array();
// x 좌표의 최소값을 찾아서 0 을 기준으로 이동
$x_min = min($o[0], $o[2], $o[4], $o[6]) * -1;
$n[0] = $o[0] + $x_min;
$n[2] = $o[2] + $x_min;
$n[4] = $o[4] + $x_min;
$n[6] = $o[6] + $x_min;
// y 좌표의 최소값을 찾아서 0 을 기준으로 이동
$y_min = min($o[1], $o[3], $o[5], $o[7]) * -1;
$n[1] = $o[1] + $y_min;
$n[3] = $o[3] + $y_min;
$n[5] = $o[5] + $y_min;
$n[7] = $o[7] + $y_min;
$n[8] = $width = abs($n[4] - $n[0]);
$n[9] = $hieght = abs($n[1] - $n[5]);
$n[10] = $x_gap = (round($font_size / 10 * 1.1) > 1) ? -1 * round($font_size / 10 * 1.1) : $o[0];
$n[11] = $y_gap = $o[1] * (-1);
return $n;
}
/*
생성된 이미지 리소스에 지정된 문자열을 원하는 위치에 imagefttext 를 사용하여 그림
$align = > left, center, right
$valign = > top, middle, bottom
$padding => 정렬될 위치로 얼마만큼 띄울것인가, int
return true or false
*/
function image_text (&$image, $font_file, $font_size, $font_color, $angle, $text, $align='left', $valign='top', $padding=0) {
if (!is_resource($image))
return false;
$font_file = trim($font_file);
if (!is_file($font_file))
return false;
$font_size = (float)$font_size;
$font_color = (int)$font_color;
$angle = (float)$angle;
$align = trim($align);
$valign = trim($valign);
$padding = (int)$padding;
if (!in_array($align, array('left', 'center', 'right')))
$align = 'left';
if (!in_array($valign, array('top', 'middle', 'bottom')))
$align = 'top';
$image_width = imagesx($image);//이미지의 너비
$image_height = imagesy($image);//이미지의 높이
$array = list($x1, $y1, $x2, $y2, $x3, $y3, $x4, $y4, $width, $height, $x_gap, $y_gap) = image_box ($font_file, $font_size, $angle, $text);
if ($align == 'left') {//왼쪽
$x = $x1 + $x_gap;
}
else if ($align == 'right') {//오른쪽
$x = $image_width - $width + $x_gap;
}
else {//가운데
$x = ceil(($image_width - $width + $x_gap) / 2);
}
if ($valign == 'top') {//상단
$y = $y1 + $y_gap;
}
else if ($valign == 'bottom') {//하단
$y = $image_height + $y_gap;
}
else {//가운데
$y = ceil(($image_height + $height + $y_gap) / 2);
}
imagefttext($image, $font_size, $angle, $x, $y, $font_color, $font_file, $text);
return true;
}
?>
image_box ($font_file, $font_size, $angle, $text)
이 함수는 imageftbbox 의 결과를 좀더 우리가 사용하기 쉬운 형태로 바꾼 함수 입니다.
imageftbbox 의 결과는 꼭지점 좌표 네개이지만,
새로만든 image_box 는 이미지위에 그릴수 있는 영역의
좌표와 너비, 높이, x의 차이, y의 차이 까지 같이 반환합니다.
$font_file = trim($font_file);
if (!is_file($font_file))
return false;
단순히 폰트파일이 해당 경로에 존재하는지 여부를 체크하여
존재하지 않으면 더이상 진행하지 않기 위한 부분입니다.
$font_size = (float)$font_size;
$angle = (float)$angle;
두변수의 데이타타입이 float 형이므로 float 형으로 강제형 변환하는 부분입니다.
if ($angle != 0)
$angle = 0;
이전 내용에서 언급했듯이 기울기가 있을 경우 결과가 정확하지 않기 때문에
기울기가 0 이 아니면 무조건 0으로 변경하는 부분입니다.
$o = imageftbbox ( $font_size, $angle, $font_file, $text );
imageftbbox 가 제공하는 기본 좌표값을 받아옵니다.
// x 좌표의 최소값을 찾아서 0 을 기준으로 이동
$x_min = min($o[0], $o[2], $o[4], $o[6]) * -1;
$n[0] = $o[0] + $x_min;
$n[2] = $o[2] + $x_min;
$n[4] = $o[4] + $x_min;
$n[6] = $o[6] + $x_min;
// y 좌표의 최소값을 찾아서 0 을 기준으로 이동
$y_min = min($o[1], $o[3], $o[5], $o[7]) * -1;
$n[1] = $o[1] + $y_min;
$n[3] = $o[3] + $y_min;
$n[5] = $o[5] + $y_min;
$n[7] = $o[7] + $y_min;
기존 좌표값들이 음수로 나오는 부분이 있어서 그대로로는 이미지 위에 그릴수 없으므로
0을 기준으로 값들을 땡겨 주는 부분입니다.
$n[8] = $width = abs($n[4] - $n[0]);
$n[9] = $hieght = abs($n[1] - $n[5]);
문자열의 실제 너비와 높이를 구하는 부분입니다.
서로의 대각의 각 좌표를 빼서 절대값으로 사용합니다.
$n[10] = $x_gap = (round($font_size / 10 * 1.1) > 1) ? -1 * round($font_size / 10 * 1.1) : $o[0];
이부분은 결과로 받아온 x 좌표에서 실제 적용하기 위한 x좌표로 조절하기 위한 조절값입니다.
명확한 기준은 없으며, 제가 여러가지 테스트 후 나름 최적화 된 값을 찾아낸 것입니다.
$n[11] = $y_gap = $o[1] * (-1);
이부분 역시 y좌표의 조절값입니다.
알파벳 소문자나 한글 같은 경우 기준점에서 내려와야 하는 경우가 있기 때문에 적용하여야 합니다.
function image_text (&$image, $font_file, $font_size, $font_color, $angle, $text, $align='left', $valign='top', $padding=0)
이 함수는 지정한 위치에 문자열을 그리기 위한 함수입니다.
$align 의 값에는 left, center, right 가 올수 있으며, $valign 의 값에는 top, middle, bottom 이 올수 있습니다.
$padding 은 아직 구현되지 않은 기능이며, 다음 내용에서 다룰 예정입니다.
$image_width = imagesx($image);//이미지의 너비
$image_height = imagesy($image);//이미지의 높이
각각 이미지 리소스에서 너비와 높이를 가져오는 함수를 사용하여 이미지의 너비와 높이를 함수의 인자로 받지 않아도 되도록 하였습니다.
if ($align == 'left') {//왼쪽
$x = $x1 + $x_gap;
}
왼쪽은 기본값 이므로 받아온 $x1 값에 $x_gap 만 더하면 됩니다.
else if ($align == 'right') {//오른쪽
$x = $image_width - $width + $x_gap;
}
오른쪽은 이미지너비에서 구해진 문자열의 너비를 빼고 동일하게 $x_gap 을 더하면 됩니다.
else {//가운데
$x = ceil(($image_width - $width + $x_gap) / 2);
}
가운데는 오른쪽 값을 나누기 2 해서 소숫점이 나오면 올림으로 처리 한것입니다.
if ($valign == 'top') {//상단
$y = $y1 + $y_gap;
}
상단은 기본값으로써 $y1 의 값에 $y_gap 을 더한 것입니다.
else if ($valign == 'bottom') {//하단
$y = $image_height + $y_gap;
}
하단은 이미지 높이에 $y_gap 을 더해 준 것입니다.
else {//가운데
$y = ceil(($image_height + $height + $y_gap) / 2);
}
가운데는 이미지 높이에 문자열 높이 , $y_gap 을 더 하고 나누기 2 해준다음 소숫점은 올린것입니다.
예제4 > study4.php
header("Content-Type: text/html; charset=UTF-8");
include_once('image.lib.20140723.php');
$font_file = './Daum_Regular.ttf';
$font_size = 30;
$angle = 0;
$text = 'FagM가나다라';
$array = list($x1, $y1, $x2, $y2, $x3, $y3, $x4, $y4, $width, $height, $x_gap, $y_gap) = image_box ($font_file, $font_size, $angle, $text);
?>
폰트파일 : <?php echo $font_file?><br>
폰트크기 : <?php echo $font_size?> px<br>
기울기 : <?php echo $angle?><br>
문자열 : <?php echo $text?><br>
<br>
image_box 의 결과값
<br>
<?php
print_r($array);
echo "<br>" . PHP_EOL;
$im = imagecreatetruecolor(300, 300);
$red = imagecolorallocate($im, 0xFF, 0x00, 0x00);
$blue = imagecolorallocate($im, 0x00, 0x80, 0xFF);
$white = imagecolorallocate($im, 0xFF, 0xFF, 0xFF);
$black = imagecolorallocate($im, 0x00, 0x00, 0x00);
$gray = imagecolorallocate($im, 0XD0, 0XD0, 0XD0);
imagefilledrectangle($im, 0, 0, 299, 299, $gray);
imageline ( $im , $x1 , $y1 , $x2, $y2 , $blue);
imageline ( $im , $x2 , $y2 , $x3, $y3 , $blue);
imageline ( $im , $x3 , $y3 , $x4, $y4 , $blue);
imageline ( $im , $x4 , $y4 , $x1, $y1 , $blue);
imagefttext($im, $font_size, $angle, $x1 + $x_gap, $y1 + $y_gap, $red, $font_file, $text);
imagepng($im, 'temp/study4_0.png');
imagedestroy($im);
?>
<br>
<img src='temp/study4_0.png?<?php echo time();?>'>
<br><br>
<?php
$aligns = Array('left', 'center', 'right');
$valigns = Array('top', 'middle', 'bottom');
$i = 1;
foreach($aligns as $align){
foreach($valigns as $valign){
$im = imagecreatetruecolor(300, 300);
$red = imagecolorallocate($im, 0xFF, 0x00, 0x00);
$blue = imagecolorallocate($im, 0x00, 0x80, 0xFF);
$white = imagecolorallocate($im, 0xFF, 0xFF, 0xFF);
$black = imagecolorallocate($im, 0x00, 0x00, 0x00);
$gray = imagecolorallocate($im, 0XD0, 0XD0, 0XD0);
imagefilledrectangle($im, 0, 0, 299, 299, $gray);
image_text ($im, $font_file, $font_size, $black, $angle, $text, $align, $valign, 0);
imagepng($im, 'temp/study4_' . $i . '.png');
imagedestroy($im);
?>
<br><br>
<strong><?php echo $align; ?>, <?php echo $valign; ?></strong><br>
<img src='temp/study4_<?php echo $i; ?>.png?<?php echo time();?>'>
<br><br>
<?php
$i++;
}
}
?>
위 예제를 실행 하여 보면 각 위치별로 문자열이 잘 그려짐을 볼수 있습니다.
예제를 실행할 때에는 temp 디렉토리를 생성하고 퍼미션을 777 로 주어야 합니다.
댓글 6개
https://dbckdghk-c9-terrorboy.c9.io/study/study4.php
PHP 설정이 다른지 선언되지 않은 변수에서 오류가 납니다.
강좌하고 같이 쓰다보니.....
새로 수정하고 올렸습니다.
감사합니다.
앞으로는 @error_reporting( E_ALL ); 을 붙여서 에러가 확인되도록 하겠습니다.
나중에 저희쪽 개발에도 참고하도록 하겠습니다.
좋은 강좌 감사합니다.