제 강좌를 출처를 밝히고 외부로 퍼가는 것은 허용하지만,
다른 강좌의 자료나 책의 자료로 사용되거나 부분적인 인용은 허용하지 않습니다.
이미지에 글을 쓰거나 이미지를 합치거나 하는 등의 내용을 다루어 볼까 합니다.
나중에는 간단한 짤방 만들기 같은 것도 할수 있지 않을까 싶습니다.
이미지관련 > 문자열의 너비와 높이 구하기
이미지에 글자를 쓰는 작업을 할때,
"글자 길이에 상관없이 정확히 중간에 위치시키고 싶다."
"왼쪽 상단에 약간의 공간을 두고 위치 시키고 싶다."
등등의 글자 위치에 대한 문제가 발생하곤 합니다.
이런 문제를 해결하기 위해서는
글자가 차지하게 될 너비와 높이를 알아야 하고,
전체 이미지 크기에서 각 포지션에 맞는 좌표점을 찾아내는 것이 필요합니다.
오늘은 제일 먼저 글자의 너비와 높이를 구하는 부분을 다루어 볼까 합니다.
아래의 예제는 제가 알아보기 쉽게 작성한 것입니다.
예제2 > study2.php
$font_file = './Daum_Regular.ttf';
$font_size = 20;
$angle = 0;
$string = 'FABCDEFGM';
?>
폰트파일 : <?=$font_file?><br>
폰트크기 : <?=$font_size?> px<br>
기울기 : <?=$angle?><br>
문자열 : <?=$string?><br>
<br>
imageftbbox 함수를 사용하여 받은 결과값
<br>
<?
$array = imageftbbox ( $font_size, $angle, $font_file, $string );
print_r($array);
echo "<br><br>" . PHP_EOL;
?>
Y 좌표에 -1 을 곱한후의 결과값
<br>
<?
$array[1] *= -1;
$array[3] *= -1;
$array[5] *= -1;
$array[7] *= -1;
print_r($array);
echo "<br><br>" . PHP_EOL;
?>
왼쪽 상단의 XY 좌표를 0, 0 으로 변경해 준후의 결과값
<br>
<?
$x_gap = 0;
$y_gap = 0;
$x_gap = $array[0] * -1;
$array[0] += $x_gap;
$array[2] += $x_gap;
$array[4] += $x_gap;
$array[6] += $x_gap;
$y_gap = $array[1] * -1;
$array[1] += $y_gap;
$array[3] += $y_gap;
$array[5] += $y_gap;
$array[7] += $y_gap;
print_r($array);
echo "<br><br>" . PHP_EOL;
?>
문자열이 차지하게 될 너비와 높이는
<br>
<?
$width = $array[4] - $array[0];
$height = $array[5] - $array[1];
?>
너비 : <?=$width?><br>
높이 : <?=$height?><br>
<?
$im = imagecreatetruecolor(200, 200);
$red = imagecolorallocate($im, 0xFF, 0x00, 0x00);
$black = imagecolorallocate($im, 0x00, 0x00, 0x00);
imagefilledrectangle($im, 0, 0, 199, 199, $red);
imagerectangle ( $im , 0 ,0 , $width , $height , $black );
imagefttext($im, $font_size, $angle, 0, $height, $black, $font_file, $string);
imagepng($im, 'temp/1.png');
imagedestroy($im);
?>
<br>
<img src='temp/1.png?<?=time()?>'>
<br>
<br>
왼쪽 상단의 XY 좌표를 조정한후의 결과
<br>
<?
$im = imagecreatetruecolor(200, 200);
$red = imagecolorallocate($im, 0xFF, 0x00, 0x00);
$black = imagecolorallocate($im, 0x00, 0x00, 0x00);
imagefilledrectangle($im, 0, 0, 199, 199, $red);
imagerectangle ( $im , 0 ,0 , $width , $height , $black );
imagefttext($im, $font_size, $angle, 0 - $x_gap, $height - $y_gap, $black, $font_file, $string);
imagepng($im, 'temp/2.png');
imagedestroy($im);
?>
<br>
<img src='temp/2.png?<?=time()?>'>
일단 위의 예제를 그대로 복사하여 study2.php 에 저장한다음 브라우져로 일단 확인해보시기 바랍니다.
temp 디렉토리를 생성하여 주시고 linux 같은 경우는 퍼미션을 777 로 주십시오.
array imageftbbox ( float $size , float $angle , string $fontfile , string $text [, array $extrainfo ] )
전달 받은 글자크기, 기울기, 글자파일, 작성한 문자열을 가지고
이문자열이 차지할 너비와 높이를 직사각형의 좌표로 반환 해 줍니다.
0 => lower left corner, X position => 실제로는 왼쪽 상단
1 => lower left corner, Y position => 실제로는 왼쪽 상단
2 => lower right corner, X position => 실제로는 오른쪽 상단
3 => lower right corner, Y position => 실제로는 오른쪽 상단
4 => upper right corner, X position => 실제로는 오른쪽 하단
5 => upper right corner, Y position => 실제로는 오른쪽 하단
6 => upper left corner, X position => 실제로는 왼쪽 하단
7 => upper left corner, Y position => 실제로는 왼쪽 하단
그런데 여기서 유의할점은 Y 좌표는 실제 좌표와는 반대로 음수로 나온다는 점입니다.
이유는 아마도 상단에서 위로 그려서 그렇다고 생각됩니다.
[첨부된 이미지를 확인하여 주십시오.]
글자를 이미지에 쓰게 될때 Y 좌표는 양수로 써야 하며, 위에서 아래로 갈때 0 부터 숫자가 증가하게 됩니다.
그래서 imageftbbox 받은 값의 Y좌표는 모두 곱하기 -1 을 해서 처리합니다.
(실제로는 위아래를 뒤집은 것인데 직사각형이므로 뒤집어도 결과가 같습니다.)
$array[1] *= -1;
$array[3] *= -1;
$array[5] *= -1;
$array[7] *= -1;
그런데 왼쪽 상단의 XY 좌표가 0, 0 이 아닙니다.
우리가 필요한것은 0, 0 으로 부터의 좌표이므로 전체적으로 조정합니다.
$x_gap = 0;
$y_gap = 0;
$x_gap = $array[0] * -1;
$array[0] += $x_gap;
$array[2] += $x_gap;
$array[4] += $x_gap;
$array[6] += $x_gap;
$y_gap = $array[1] * -1;
$array[1] += $y_gap;
$array[3] += $y_gap;
$array[5] += $y_gap;
$array[7] += $y_gap;
이제 실제 문자열이 차지하게될 너비와 높이 를 구합니다.
각 대각의 x 좌표를 빼서 너비를 구하고
각 대각의 y 좌표를 빼서 높이를 구합니다.
$width = $array[4] - $array[0];
$height = $array[5] - $array[1];
bool imagerectangle ( resource $image , int $x1 , int $y1 , int $x2 , int $y2 , int $color )
대각의 두 xy 좌표를 받아서 직사각형을 그리는 함수 입니다.
우리는 왼쪽 상단에 딱 붙여서 그릴 것이므로
imagerectangle ( $im , 0 ,0 , $width , $height , $black );
와 같이 사용하였습니다.
imagefttext($im, $font_size, $angle, 0, $height, $black, $font_file, $string);
로 같은 위치에 글자를 그렷습니다만. 뭔가 미세하게 박스랑 차이가 납니다.
왼쪽 상단의 XY 좌표가 0, 0 이 아니엇던 것을 주목합니다.
폰트나 글자에 따라 약간의 차이가 있는데 그 좌표에서 문자열을 쓰는 것을 시작해야만
원래 너비나 높이의 문자열이 그려집니다.
따라서 시작점을 조정합니다.
imagefttext($im, $font_size, $angle, 0 - $x_gap, $height - $y_gap, $black, $font_file, $string);
다음 내용에서는 이미지의 오른쪽 상단, 왼쪽 하단, 오른쪽 하단, 가운데 위치해서 문자열을 그리는 것을 해보겠습니다.
첨부파일
게시글 목록
| 번호 | 제목 |
|---|---|
| 8265 | |
| 20403 | |
| 20402 | |
| 20401 | |
| 20400 |
웹서버
서버 동시접속자 설정 변경하기
|
| 8259 | |
| 20399 | |
| 20398 | |
| 8255 | |
| 8249 | |
| 8246 | |
| 8242 | |
| 20396 | |
| 8240 | |
| 20395 | |
| 20394 |
MySQL
테이블 복사 쿼리
|
| 31033 | |
| 28385 | |
| 20393 |
PHP
현재 접속중인 사용자 나타내기
|
| 28380 | |
| 20392 |
MySQL
mysql select 후 update 하기
|
| 28377 | |
| 20391 | |
| 20390 |
PHP
한글문자열 자르는 법 입니다.
|
| 20389 | |
| 20388 | |
| 20387 |
PHP
이메일주소 검사하기 입니다.
|
| 20386 | |
| 20385 | |
| 20384 |
node.js
Node js 게시판 프로젝트 소개합니다.
|
| 20383 |
PHP
pc 모바일 체크
1
|
| 20382 |
PHP
계정 사용량(용량) 확인
|
| 8238 | |
| 20380 | |
| 20379 |
MySQL
소수점 반올림 버림
|
| 28376 | |
| 28372 | |
| 20378 | |
| 20377 |
PHP
에러 로그파일 생성하기
|
| 8235 | |
| 20375 | |
| 20374 | |
| 20373 |
PHP
후이즈검색 하기 입니다.
|
| 20372 |
PHP
그래프 그리기 입니다.
|
| 20371 |
JavaScript
자바스크립트로 구현한 number_format() 입니다.
|
| 20370 |
JavaScript
금액 관련 숫자를 한글로 변환하기 입니다.
|
| 28370 | |
| 20369 |
PHP
PHP 날짜 계산 관련 함수
|
| 28366 | |
| 20368 |
jQuery
jQuery 1.x와 2.x 버전 동시에 사용하기
|
| 20367 | |
| 20366 | |
| 20365 |
JavaScript
사업자 등록번호 검사하기 입니다.
|
| 20364 | |
| 20363 |
JavaScript
항상 같은곳에 광고창 만들기 입니다.
|
| 20362 |
JavaScript
부메뉴 나오게 하기 입니다.
|
| 20361 |
JavaScript
특정문자 제거하기 입니다.
|
| 20360 |
JavaScript
휴대폰번호 검사 하기 입니다.
|
| 20359 |
JavaScript
이미지 좌우로 이동 갤러리 입니다.
|
| 8231 | |
| 20358 | |
| 20357 |
JavaScript
쉬운 replaceAll 입니다.
|
| 20356 | |
| 20355 | |
| 20354 | |
| 20353 | |
| 20352 |
JavaScript
콤보스타일 메뉴 입니다.
|
| 20351 |
JavaScript
쿠키를 이용한 레이어 공지창 입니다.
|
| 20350 |
JavaScript
효과있는 텍스트 틱커 입니다.
|
| 20349 | |
| 20348 |
PHP
HTTP 인증 하기 입니다.
|
| 20347 |
JavaScript
외부 문서 불러오기 입니다.
|
| 20346 |
JavaScript
지정한 날짜까지 New 이미지를 띄워주기 입니다.
|
| 20345 | |
| 20344 |
JavaScript
메일 주소 검사하기 체크박스 입니다.
|
| 20343 |
JavaScript
무단링크 금지하기 입니다.
|
| 20342 | |
| 20341 |
MySQL
DB백업 및 복원
|
| 20340 |
JavaScript
페이지가 다른 사이트의 프레임에 갇히는 것을 막기 입니다.
|
| 20339 | |
| 20338 | |
| 20337 |
jQuery
input text 대문자만 받는 Jquery
|
| 20336 | |
| 20335 |
JavaScript
이미지 업로드와 미리보기 입니다.
|
| 20334 |
JavaScript
배경음악 랜덤 재생 하기 입니다.
|
| 20333 |
JavaScript
css 지원 여부 확인해서 다른 페이지로 이동하기 입니다.
|
| 20332 |
JavaScript
하부메뉴가 보였다가 숨겨졌다 하는 토글버튼 입니다.
|
| 20331 |
JavaScript
개별 페이지에 인덱스로 거쳐 들어오게 하기 입니다.
|
| 20330 |
JavaScript
랜덤으로 이미지 출력 되기 입니다.
|
| 20329 |
JavaScript
사용자 해상도 알아내기 입니다.
|
| 20328 |
JavaScript
붙여넣기 금지하기 입니다.
|
| 20327 |
MySQL
대소문자 데이터 조회하기
|
| 20326 |
JavaScript
퇴장시 팝업창 한번한 띄우기 입니다.
|
| 20325 | |
| 20324 | |
| 20323 |
JavaScript
시도, 구군, 동 주소 select
|
| 20322 |
MySQL
커리로 DB 테이블 명세서 출력하기
|
| 20321 |
JavaScript
브라우저 해상도 구분없는 절대 x,y 좌표 값 구하기 입니다
|
| 20320 |
PHP
rss 읽어오기 입니다.
|
| 20319 |
JavaScript
자바스크립트로 Ajax 효과내기 입니다.
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기