GD를 이용한 이미지 라운드코너 만들기

이미지 저장시 네 귀퉁이를 곡선으로 처리하여 좀 더 부드러운 느낌을 줄수 없을까?

요즘 너무 직각의 이미지만 보니, 라운드가 땡기는군요.

아래의 코드는 GD라이브러리를 이용한 라운드코너이미지 만들기 php소스 코드 입니다.

http://www.assemblysys.com/dataServices/php_roundedCorners.php


$image_file = $_GET['src'];
$corner_radius = isset($_GET['radius']) ? $_GET['radius'] : 20; // The default corner radius is set to 20px
$angle = isset($_GET['angle']) ? $_GET['angle'] : 0; // The default angle is set to 0º
$topleft = (isset($_GET['topleft']) and $_GET['topleft'] == "no") ? false : true; // Top-left rounded corner is shown by default
$bottomleft = (isset($_GET['bottomleft']) and $_GET['bottomleft'] == "no") ? false : true; // Bottom-left rounded corner is shown by default
$bottomright = (isset($_GET['bottomright']) and $_GET['bottomright'] == "no") ? false : true; // Bottom-right rounded corner is shown by default
$topright = (isset($_GET['topright']) and $_GET['topright'] == "no") ? false : true; // Top-right rounded corner is shown by default

$images_dir = 'images/';
$corner_source = imagecreatefrompng('images/rounded_corner.png');

$corner_width = imagesx($corner_source);  
$corner_height = imagesy($corner_source);  
$corner_resized = ImageCreateTrueColor($corner_radius, $corner_radius);
ImageCopyResampled($corner_resized, $corner_source, 0, 0, 0, 0, $corner_radius, $corner_radius, $corner_width, $corner_height);

$corner_width = imagesx($corner_resized);  
$corner_height = imagesy($corner_resized);  
$image = imagecreatetruecolor($corner_width, $corner_height);  
$image = imagecreatefromjpeg($images_dir . $image_file); // replace filename with $_GET['src'] 
$size = getimagesize($images_dir . $image_file); // replace filename with $_GET['src'] 
$white = ImageColorAllocate($image,255,255,255);
$black = ImageColorAllocate($image,0,0,0);

// Top-left corner
if ($topleft == true) {
    $dest_x = 0;  
    $dest_y = 0;  
    imagecolortransparent($corner_resized, $black); 
    imagecopymerge($image, $corner_resized, $dest_x, $dest_y, 0, 0, $corner_width, $corner_height, 100);
} 

// Bottom-left corner
if ($bottomleft == true) {
    $dest_x = 0;  
    $dest_y = $size[1] - $corner_height; 
    $rotated = imagerotate($corner_resized, 90, 0);
    imagecolortransparent($rotated, $black); 
    imagecopymerge($image, $rotated, $dest_x, $dest_y, 0, 0, $corner_width, $corner_height, 100);  
}

// Bottom-right corner
if ($bottomright == true) {
    $dest_x = $size[0] - $corner_width;  
    $dest_y = $size[1] - $corner_height;  
    $rotated = imagerotate($corner_resized, 180, 0);
    imagecolortransparent($rotated, $black); 
    imagecopymerge($image, $rotated, $dest_x, $dest_y, 0, 0, $corner_width, $corner_height, 100);  
}

// Top-right corner
if ($topright == true) {
    $dest_x = $size[0] - $corner_width;  
    $dest_y = 0;  
    $rotated = imagerotate($corner_resized, 270, 0);
    imagecolortransparent($rotated, $black); 
    imagecopymerge($image, $rotated, $dest_x, $dest_y, 0, 0, $corner_width, $corner_height, 100);  
}

// Rotate image
$image = imagerotate($image, $angle, $white);

// Output final image
imagejpeg($image);

imagedestroy($image);  
imagedestroy($corner_source);
?>



GD라이브러리가 설치된 환경에서 위의 코드를 복사하여 roundedCorners.php 파일로 저장합니다.

그리고 이미지를 출력시에

• src='roundedCorners.php?src=bunny.jpg&radius=40'
• src='roundedCorners.php?src=bunny.jpg&radius=40&angle=15'
• src='roundedCorners.php?src=bunny.jpg&radius=40&topleft=no&bottomright=no'

src의 변수에 원본이미지의 경로를 담고, radius 변수에 곡선의 각도를 입력해주시면 됩니다.

그 이외의 옵션 변수들은 API를 참고하시기 바랍니다.


roundedCorners.php는 해당 경로의 이미지를 읽어 라운드처리한 이미지를 임시로 생성한뒤 출력합니다.

하지만 이방법을 사용시에 트래픽이 많은 곳에서는 과도한 메모리가 사용될 우려가 있으므로,

위의 php코드를 변형, 사용하여 이미지 업로드시에 라운드코너이미지를 생성하여 저장하고, 이를 불러오는 방법이 좋겠습니다.