웹에서 2D 물리엔진 사용하기 #1 Matter.js 시작하기
GD 라이브러리를 활용하여 이미지 수정하기
2015-10-29
Explanation
오랜만에 포스팅을 하네요. 개인적으로 프로젝트를 진행하다가 알게 된 php의 GD 라이브러리를 활용하여 이미지와 텍스트를 합친 새로운 이미지 파일을 만드는 방법과 이미지와 이미지를 합치는 방법에 대해 적어보겠습니다.
[※서버에 GD모듈이 설치되어 있어야 합니다.]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?php $file = fopen("image.php", "w"); // 쓰기모드로 파일을 수정합니다. (파일이 없다면 새로 만듭니다.) fwrite($file, '<?php //해당파일에 내용을 추가합니다. header ("Content-type: image/png"); // 콘텐츠의 타입을 png image 로 선언합니다. $font = "./nanum.ttf"; // 텍스트에 사용한 폰트파일을 지정합니다. $im = imagecreatefrompng("image.png"); // 배경으로 사용할 이미지를 지정해 줍니다. $tc = imagecolorallocate($im, 0, 0, 0); // 텍스트의 컬러를 지정합니다. imagettftext($im, 15, 0, 80, 50, $tc, $font, "테스트 텍스트"); // 텍스트를 추가합니다. // imagettftext(이미지, 텍스트 크기, 텍스트 각도, x축, y축, 텍스트 컬러, 텍스트 폰트, 텍스트 내용); imagepng($im); // 이미지 파일 만들기 imagedestroy($im); // 정보삭제 ?>'); fclose($file); // 파일 닫기 (수정 완료) ?> |
하려고 할때는 오래걸렸는데 지금 정리해보니 엄청 간단하네요.
데모보기 : https://falsy.me/preview/gd/image.php
블로그 서버를 옴기고 GD 모듈을 설치하지 않아서 데모가 안됐었네요.. 수정했습니다~
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php $file = fopen("image2.php", "w"); // 쓰기모드로 파일을 수정합니다. (파일이 없다면 새로 만듭니다.) fwrite($file, '<?php // 해당파일에 내용을 추가합니다. header ("Content-type: image/png"); // 콘텐츠의 타입을 png image 로 선언합니다. $bg = imagecreatefrompng("image-bg.png"); // 캔버스로 사용 할 투명한 300px X 200px 의 빈 이미지입니다. $im = imagecreatefrompng("image-1.png"); // 100 x 200 의 왼쪽에 위치할 이미지입니다. $im2 = imagecreatefrompng("image-2.png"); // 100 x 200 의 중앙에 위치할 이미지입니다. $im3 = imagecreatefrompng("image-3.png"); // 100 x 200 의 오른쪽에 위치할 이미지입니다. imagecopy($bg, $im, 0, 0, 0, 0, 100, 200); // 캔버스 이미지에 왼쪽에 위치할 이미지를 합칩니다. imagecopy($bg, $im2, 100, 0, 0, 0, 100, 200); // 왼쪽이미지가 합쳐진 이미지에 중앙 이미지를 합칩니다. imagecopy($bg, $im3, 200, 0, 0, 0, 100, 200); // 마지막 오른쪽에 오른쪽 이미지를 합칩니다. imagepng($bg); // 이미지를 만듭니다. imagedestroy($bg); // 정보를 지웁니다. ?>'); fclose($file); // 파일 수정을 끝냅니다. ?> |
처음에는 imagecreatetruecolor()를 이용하여 빈 캔버스를 만들어 해보려고 했는데, 이미지 색이 변하기도 하고 이미지의 퀄리티를 높여봐도 색이 깨져서 나오는 등… 온갖 방법을 다 해봤지만 안되서 결국 원하는 결과물의 크기의 비여있는 투명한 png 파일을 만들어서 이미지를 더하는 방법으로 해결하였습니다.
데모보기 : https://falsy.me/preview/gd/image2.php
혹시하고.. 사용한 테스트 이미지는
https://falsy.me/preview/gd/image.png
https://falsy.me/preview/gd/image-bg.png
https://falsy.me/preview/gd/image-1.png
https://falsy.me/preview/gd/image-2.png
https://falsy.me/preview/gd/image-3.png
에서 확인할 수 있습니다.
그리고 사용한 함수에 대한 자세한 설명은 http://php.net 에서 확인하실 수 있습니다.